Question

我完成了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。这两种技术有区别吗？

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>

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

因此，使用route to switch controllers是学习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>

BUT

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

<body ng-view></body>

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

5 个答案: