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

【问题标题】：What is the difference between an ng-controller directive and a controller in the route?ng-controller 指令和路由中的控制器有什么区别？
【发布时间】：2014-02-21 10:06:31
【问题描述】：

我研究了tutorial on the AngularJS website，我注意到在step 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。这两种技术有区别吗？

【问题讨论】：

您所在步骤的链接是什么？
@qwertynl 第 7 步。docs.angularjs.org/tutorial/step_07
specifying AngularJS controller: benefits using ngController vs. $routeProvider的可能重复
@DanDascalescu 我想我的问题是第一位的。
@austin：我知道，但不幸的是另一个有更好的答案。

标签： javascript angularjs angularjs-directive angularjs-routing

【解决方案1】：

是的 - 变化是这样的：

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

<body ng-controller>

但是

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

<body ng-view></body>

【讨论】：

当我使用 ng-view 属性时，我收到超出最大堆栈大小的错误。

【解决方案2】：

使用 ng-controller 指令的控制器：

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

路由中的控制器：

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

【讨论】：

【解决方案3】：

Angularjs 的一个著名特性是单页应用程序。

如果直接在页面上赋值ng-controller属性：

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

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

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

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

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

如果'/电话'

<div ng-view></div>

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

同理：

如果'/平板电脑'

<div ng-view></div>

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

这是两者的区别。

【讨论】：

【解决方案4】：

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

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

因为您需要在路由更改时更改该控制器。所以基本上路由器会为你做这些，并使用你在定义路由时指定的控制器。

你可能可以这样做：

<div ng-view>

然后在您的模板中：

<div ng-controller="PhoneListCtrl">

并在您的路线中省略控制器声明。我怀疑这会产生基本相同的效果，尽管我从未尝试过。不过，在这里按照惯例可能会更好。

【讨论】：

【解决方案5】：

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

一旦他们更改它，该控制器仅在路由为 /phones 时才会出现在页面上，否则它是基于其他路由的其他控制器。

【讨论】：