Menu
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. 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.
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
/* rest of routes here */
Here's the git diff where the change is made. Is there a difference between these two techniques?
285
A controller is usually used to contain and maintain the logic for your view, which gets bound to your view via $scope. A directive is something that you might use repeatedly and is called in your view directly through the directive name which you can pass in as an attribute.
No difference. It is same object.
Answer:The link option is just a shortcut to setting up a post-link function. controller: The directive controller can be passed to another directive linking/compiling phase. It can be injected into other directices as a mean to use in inter-directive communication.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model directive can also: Provide type validation for application data (number, email, required). Provide status for application data (invalid, dirty, touched, error). Provide CSS classes for HTML elements.
Controller using a ng-controller directive:
ng-controller element.Controller in a route:
ng-view element.
156
One of well-known feature of Angularjs is Single-Page Applications.
If you assign ng-controller attribute directly on the page：
<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.
You can have same layout and one different element by using route and ng-view directive.
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/tablets', {
templateUrl: 'partials/tablet-list.html',
controller: 'TabletListCtrl'
}).
If '/phones'
<div ng-view></div>
will include your 'partials/phone-list.html' template and set 'PhoneListCtrl' as div controller
The same：
If '/tablets'
<div ng-view></div>
will include your 'partials/tablet-list.html' template and set 'TabletListCtrl' as div controller
This is the difference between two.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
