Part 32 AngularJS controller as syntax
2016-05-15 03:56
513 查看
So far in this video series we have been using $scope to expose the members from the controller to the view.
In the example above we are attaching message property to $scope, which is automatically available in the view.
Another way that is available to expose the members from the controller to the view, is by using CONTROLLER AS syntax. With this syntax, there is no need to inject $scope object in to the controller function, instead you simply use this keyword as shown below.
In the view, you use, CONTROLLER AS syntax as shown below.
Now, let us see how we can use this CONTROLLER AS syntax in the example that we worked with in Part 31.
Code changes in script.js. Notice the changes highlighted in yellow.
1. In the when() function, notice that we are using CONTROLLER AS syntax
2. With in each controller() function we are using this keyword to set the properties that we want to make available in the view
3. Notice in studentsController and studentDetailsController we are assigning this keyword to variable vm. vm stands for ViewModel. You can give it any meaningful name you want.
4. If you use this keyword in then() function as shown below, you would not get the result you expect. That's because 'this' keyword points to the window object when the control comes to then() function.
At this point we also need to modify all our partial templates
Changes in home.html : Use homeCtrl object to retrieve the message property that the homeController has set.
Changes in courses.html : Use coursesCtrl object to retrieve the courses property that the coursesController has set.
Changes in students.html : Use studentsCtrl object to retrieve the students property that the studentsController has set.
Changes in studentDetails.html : Use studentDetailsCtrl object to retrieve the student property that the studentDetailsController has set.
You can also use CONTROLLER AS syntax when defining routes as shown below
In our next video we will discuss, how the CONTROLLER AS syntax can make our code more readable as opposed to using $scope when working with nested scopes.
app.controller("mainController", function ($scope) { $scope.message = "Hello Angular"; });
In the example above we are attaching message property to $scope, which is automatically available in the view.
<h1 ng-controller="mainController">{{message}}</h1>
Another way that is available to expose the members from the controller to the view, is by using CONTROLLER AS syntax. With this syntax, there is no need to inject $scope object in to the controller function, instead you simply use this keyword as shown below.
app.controller("mainController", function () { this.message = "Hello Angular"; });
In the view, you use, CONTROLLER AS syntax as shown below.
<h1 ng-controller="mainController as main">{{main.message}}</h1>
Now, let us see how we can use this CONTROLLER AS syntax in the example that we worked with in Part 31.
Code changes in script.js. Notice the changes highlighted in yellow.
1. In the when() function, notice that we are using CONTROLLER AS syntax
2. With in each controller() function we are using this keyword to set the properties that we want to make available in the view
3. Notice in studentsController and studentDetailsController we are assigning this keyword to variable vm. vm stands for ViewModel. You can give it any meaningful name you want.
4. If you use this keyword in then() function as shown below, you would not get the result you expect. That's because 'this' keyword points to the window object when the control comes to then() function.
.controller("studentsController", function ($http) { $http.get("StudentService.asmx/GetAllStudents") .then(function (response) { this.students = response.data; }) })
At this point we also need to modify all our partial templates
Changes in home.html : Use homeCtrl object to retrieve the message property that the homeController has set.
<h1>{{homeCtrl.message}}</h1> <div> PRAGIM Established in 2000 by 3 S/W engineers offers very cost effective training. PRAGIM Speciality in training arena unlike other training institutions </div> <ul> <li>Training delivered by real time software experts having more than 10 years of experience.</li> <li>Realtime projects discussion relating to the possible interview questions.</li> <li>Trainees can attend training and use lab untill you get a job.</li> <li>Resume preperation and mock up interviews.</li> <li>100% placement assistance.</li> <li>Lab facility.</li> </ul>
Changes in courses.html : Use coursesCtrl object to retrieve the courses property that the coursesController has set.
<h1>Courses we offer</h1> <ul> <li ng-repeat="course in coursesCtrl.courses"> {{course}} </li> </ul>
Changes in students.html : Use studentsCtrl object to retrieve the students property that the studentsController has set.
<h1>List of Students</h1> <ul> <li ng-repeat="student in studentsCtrl.students"> <a href="students/{{student.id}}"> {{student.name}} </a> </li> </ul>
Changes in studentDetails.html : Use studentDetailsCtrl object to retrieve the student property that the studentDetailsController has set.
<h1>Student Details</h1> <table style="border:1px solid black"> <tr> <td>Id</td> <td>{{studentDetailsCtrl.student.id}}</td> </tr> <tr> <td>Name</td> <td>{{studentDetailsCtrl.student.name}}</td> </tr> <tr> <td>Gender</td> <td>{{studentDetailsCtrl.student.gender}}</td> </tr> <tr> <td>City</td> <td>{{studentDetailsCtrl.student.city}}</td> </tr> </table> <h4><a href="students">Back to Students list</a></h4>
You can also use CONTROLLER AS syntax when defining routes as shown below
var app = angular .module("Demo", ["ngRoute"]) .config(function ($routeProvider, $locationProvider) { $routeProvider .when("/home", { templateUrl: "Templates/home.html", controller: "homeController", controllerAs: "homeCtrl" }) .when("/courses", { templateUrl: "Templates/courses.html", controller: "coursesController as coursesCtrl", controllerAs: "coursesCtrl" }) .when("/students", { templateUrl: "Templates/students.html", controller: "studentsController as studentsCtrl", controllerAs: "studentsCtrl" }) .when("/students/:id", { templateUrl: "Templates/studentDetails.html", controller: "studentDetailsController as studentDetailsCtrl", controllerAs: "studentDetailsCtrl" }) .otherwise({ redirectTo: "/home" }) $locationProvider.html5Mode(true); })
In our next video we will discuss, how the CONTROLLER AS syntax can make our code more readable as opposed to using $scope when working with nested scopes.
相关文章推荐
- Part 31 AngularJS page refresh problem
- Part 30 AngularJS routeparams example
- Part 29 AngularJS intellisense in visual studio
- Part 28 AngularJS default route
- Part 27 Remove # from URL AngularJS
- [AngularJS面面观] 2. scope中的Dirty Checking(脏数据检查) --- Digest Cycle
- AngularJS中,联合使用ng-repeat和ng-if,可以实现对数据删选显示效果,特别适合于用作表单数据的显示
- angularjs-表单验证
- angular中重要指令介绍($eval,$parse和$compile)
- 深究AngularJS——过滤器(filter)
- angularJS指令参数详解
- angularJs中ngModel的坑
- 深究AngularJS——自定义服务详解(factory、service、provider)
- Angularjs中UI Router的使用方法
- AngularJS控制器controller如何通信?
- 深究AngularJS——排序
- Part 23 to 26 Routing in Angular
- AngularJS在IE8的不支持的解决方法
- AngularJS 指令编译原理
- AngularJS与单选框及多选框的双向动态绑定