ng-controller指令和路由中的控制器有什么区别？

Question

我在AngularJS网站上完成了教程，我注意到在第7步，它们改变了控制器如何引入应用程序。 最初，他们使用指令：

<body ng-controller="PhoneListCtrl">
...
</body>

但是，它稍后会更改为使用controller属性作为ng-route 。

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }). 
    /* rest of routes here */

这是进行更改的git diff 。 这两种技术有区别吗？

Answer 1

控制器使用ng-controller指令：

在ng-controller元素上创建一个新的$ scope。
显式的视图到控制器连接
可视与检查元素等

路线中的控制器：

在ng-view元素上为每个路由创建一个新的$ scope。
控制器可以请求路由解析中定义的依赖关系。
可选的视图到控制器连接。 建议使用命名约定将路由映射到控制器到视图。

Answer 2

ng-view是造成差异的原因。 你真的不能这样做

<div ng-view ng-controller="PhoneListCtrl">

因为您需要在路线改变时更改该控制器。 所以基本上路由器会为您执行此操作，并使用您在定义路由时指定的控制器。

你可能会这样做：

<div ng-view>

然后在你的模板中：

<div ng-controller="PhoneListCtrl">

并在您的路线中省略控制器声明。 我怀疑它会产生基本相同的效果，尽管我从未尝试过。 虽然可能更适合在这里举行会议。

Answer 3

Angularjs的一个众所周知的功能是单页面应用程序。

如果直接在页面上分配ng-controller属性：

<body ng-controller="PhoneListCtrl">
...
</body>

您无法轻松切换控制器以执行其他任务。

因此，使用路由切换控制器是学习Angular Single-Page功能的重要步骤之一。

通过使用route和ng-view指令，您可以拥有相同的布局和一个不同的元素。

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }).
    when('/tablets', { 
        templateUrl: 'partials/tablet-list.html',
        controller: 'TabletListCtrl'
    }).

如果'/ phone'

<div ng-view></div>

将包含您的'partials / phone-list.html'模板并将'PhoneListCtrl'设置为div控制器

相同：

如果是'/ tablets'

<div ng-view></div>

将包含您的'partials / tablet-list.html'模板并将'TabletListCtrl'设置为div控制器

这是两者之间的区别。

Answer 4

在第一种情况下，控制器直接在页面上。

一旦他们改变它，如果路由是/phones ，那么该控制器仅在页面上，否则它是基于某些其他路由的其他控制器。

Answer 5

是的 - 改变是这样的：

如果要在页面上显示特定控制器，则可以使用

<body ng-controller>

但

如果你想做路由（具有多个控制器的应用程序） - 你将需要使用路由+将主体更改为：

<body ng-view></body>

ng-controller指令和路由中的控制器有什么区别？

问题描述

5 个解决方案

解决方案1
5 2014-01-29 14:43:24

解决方案2
1 2014-01-29 14:29:40

解决方案3
1 2014-01-29 14:57:30

解决方案4
0 2014-01-29 14:28:54

解决方案5
-1 2014-01-29 14:29:57

ng-controller指令和路由中的控制器有什么区别？

问题描述

5 个解决方案

解决方案1 5 2014-01-29 14:43:24

解决方案2 1 2014-01-29 14:29:40

解决方案3 1 2014-01-29 14:57:30

解决方案4 0 2014-01-29 14:28:54

解决方案5 -1 2014-01-29 14:29:57

解决方案1
5 2014-01-29 14:43:24

解决方案2
1 2014-01-29 14:29:40

解决方案3
1 2014-01-29 14:57:30

解决方案4
0 2014-01-29 14:28:54

解决方案5
-1 2014-01-29 14:29:57