ng-controller指令和路由中的控制器有什么区别？
[英]What is the difference between an ng-controller directive and a controller in the route?
问题描述
I worked through the tutorial on the AngularJS website and I noticed that in at step 7 , they change how a controller is introduced into the application. 
我在AngularJS网站上完成了教程 ，我注意到在第7步 ，它们改变了控制器如何引入应用程序。 Initially, they use a directive: 最初，他们使用指令：
<body ng-controller="PhoneListCtrl">
...
</body>
However, it later gets changed to use a controller attribute as part of an ng-route . 但是，它稍后会更改为使用controller属性作为ng-route 。
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
/* rest of routes here */
Here's the git diff where the change is made. 这是进行更改的git diff 。 Is there a difference between these two techniques? 这两种技术有区别吗？
5 个解决方案
解决方案1
5 2014-01-29 14:43:24
Controller using a ng-controller directive: 控制器使用ng-controller指令：
- A new $scope is created on
ng-controllerelement.在ng-controller元素上创建一个新的$ scope。 - Explicit view-to-controller connection 显式的视图到控制器连接
- Visible with inspect element, etc 可视与检查元素等
Controller in a route : 路线中的控制器：
- A new $scope is created per route on the
ng-viewelement.在ng-view元素上为每个路由创建一个新的$ scope。 - The controller can request dependencies defined in the route resolve. 控制器可以请求路由解析中定义的依赖关系。
- Optional view-to-controller connection. 可选的视图到控制器连接。 Recommended to have a naming convention that maps routes to controllers to views. 建议使用命名约定将路由映射到控制器到视图。
解决方案2
1 2014-01-29 14:29:40
ng-view is the cause of the difference. ng-view是造成差异的原因。 You can't really do this 你真的不能这样做
<div ng-view ng-controller="PhoneListCtrl">
As you'd need to change that controller as the route changed. 因为您需要在路线改变时更改该控制器。 So basically the router does that for you, and uses the controller you specified when you defined your routes. 所以基本上路由器会为您执行此操作，并使用您在定义路由时指定的控制器。
You probably can do this: 你可能会这样做：
<div ng-view>
and then in your template: 然后在你的模板中：
<div ng-controller="PhoneListCtrl">
and leave out the controller declaration in your routes. 并在您的路线中省略控制器声明。 Which I suspect would have essentially the same effect, although I've never tried that. 我怀疑它会产生基本相同的效果，尽管我从未尝试过。 Probably better to go with convention here though. 虽然可能更适合在这里举行会议。
解决方案3
1 2014-01-29 14:57:30
One of well-known feature of Angularjs is Single-Page Applications. Angularjs的一个众所周知的功能是单页面应用程序。
If you assign ng-controller attribute directly on the page： 如果直接在页面上分配ng-controller属性：
<body ng-controller="PhoneListCtrl">
...
</body>
you can't switch controllers easily for other tasks. 您无法轻松切换控制器以执行其他任务。
So, use route to switch controllers is one of important step in learning Angular Single-Page feature. 因此，使用路由切换控制器是学习Angular Single-Page功能的重要步骤之一。
You can have same layout and one different element by using route and ng-view directive. 通过使用route和ng-view指令，您可以拥有相同的布局和一个不同的元素。
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/tablets', {
templateUrl: 'partials/tablet-list.html',
controller: 'TabletListCtrl'
}).
If '/phones' 如果'/ phone'
<div ng-view></div>
will include your 'partials/phone-list.html' template and set 'PhoneListCtrl' as div controller 将包含您的'partials / phone-list.html'模板并将'PhoneListCtrl'设置为div控制器
The same： 相同：
If '/tablets' 如果是'/ tablets'
<div ng-view></div>
will include your 'partials/tablet-list.html' template and set 'TabletListCtrl' as div controller 将包含您的'partials / tablet-list.html'模板并将'TabletListCtrl'设置为div控制器
This is the difference between two. 这是两者之间的区别。
解决方案4
0 2014-01-29 14:28:54
In the 1st case the controller is directly on the page. 在第一种情况下，控制器直接在页面上。
Once they change it, that controller is only on the page if the route is /phones otherwise it is some other controller based on some other route. 一旦他们改变它，如果路由是/phones ，那么该控制器仅在页面上，否则它是基于某些其他路由的其他控制器。
解决方案5
-1 2014-01-29 14:29:57
Yes - the change is this: 是的 - 改变是这样的：
if you want to display a specific controller on the page, you can use 如果要在页面上显示特定控制器，则可以使用
<body ng-controller>
BUT 但
if you want to do routing (application with more than one controller) - you will need to use routing + change the body to: 如果你想做路由（具有多个控制器的应用程序） - 你将需要使用路由+将主体更改为：
<body ng-view></body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.