logo标签列表

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

javascriptangularjsangularjs-directiveangularjs-routing
14

我在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，其中进行了更改。这两种技术之间有区别吗？

你正在进行的步骤的链接是什么？ - qwertynl
@qwertynl 第七步。http://docs.angularjs.org/tutorial/step_07 - austin
1
可能是重复的问题：指定AngularJS控制器：使用ngController与$routeProvider相比的好处 - Dan Dascalescu
@DanDascalescu 我认为我的问题先提出。 - austin
@austin：我知道，但不幸的是另一个有更好的答案。 - Dan Dascalescu
@DanDascalescu 我不知道，我认为这些答案相当主观。两者都涉及个人意见。至少这个问题有一些源代码和一些客观性的答案。 - austin
5个回答
5

ng-controller指令的控制器:

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

路由中的控制器:

  • 在ng-view元素上，每个路由都会创建一个新的$scope。
  • 控制器可以请求在路由解析中定义的依赖项。
  • 可选的视图到控制器的连接。建议使用一致的命名约定将路由映射到控制器和视图。
2
Angularjs的一个著名特性就是单页应用程序。
如果您直接在页面上分配ng-controller属性：
<body ng-controller="PhoneListCtrl">
...
</body>

你不能轻松地为其他任务切换控制器。

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

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

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

如果是'/phones'：
<div ng-view></div>

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

同样：

如果是“/tablets”

<div ng-view></div>

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

这是两者之间的区别。

1

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

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

当路由变化时，您需要更改控制器。基本上，路由器会为您执行此操作，并在定义路由时使用指定的控制器。
您可能可以执行以下操作：
<div ng-view>

然后在你的模板中：

<div ng-controller="PhoneListCtrl">

在你的路由中略去控制器声明。我猜这样做基本上会产生相同的效果，尽管我从未尝试过。不过在这里最好遵循惯例。

0
在第一种情况下，控制器是直接在页面上的。
一旦他们更改了它，如果路由是/phones，则该控制器仅在页面上，否则它是基于其他路由的其他控制器。
-1

是的 - 改变在于：

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

<body ng-controller>

但是

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

<body ng-view></body>
当我使用ng-view属性时，会出现超过最大堆栈大小的错误。 - reggaeguitar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接