Part 32 AngularJS controller as syntax
So far in this video series we have been using $scope to expose the members from the controller to the view.
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 32 AngularJS controller as syntax的更多相关文章
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- (十六)JQuery Ready和angularJS controller的运行顺序问题
项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...
- Part 34 AngularJS controller as vs scope
There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. T ...
- Part 33 Angular nested scopes and controller as syntax
Working with nested scopes using $scope object : The following code creates 3 controllers - country ...
- angularjs controller 继承
前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...
- Angularjs Controller间通信的几种方法
先说最简单的,适合简单数据 一.使用controller as <body ng-controller="ParentCtrl as parent"> <inpu ...
- angular controller as syntax vs scope
今天要和大家分享的是angular从1.2版本开始带来了新语法Controller as.再次之前我们对于angular在view上的绑定都必须使用直接的scope对象,对于controller来说我 ...
- AngularJS 'Controller As'用法
AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...
随机推荐
- 系统设计实践(03)- Instagram社交服务
前言 系统设计实践篇的文章将会根据<系统设计面试的万金油>为前置模板,讲解数十个常见系统的设计思路. 前置阅读: <系统设计面试的万金油> 系统设计实践(01) - 短链服务 ...
- P4542-[ZJOI2011]营救皮卡丘【费用流,Floyd】
正题 题目链接:https://www.luogu.com.cn/problem/P4542 题目大意 给出\(n+1\)个点\(m\)条边的无向图,\(k\)个人开始在\(0\)号点,一个人进入\( ...
- mybatis 配置问题查找
mybatis配置问题记录 org.apache.ibatis.binding.BindingException: Type interface com.xx.dao.UserDao(自己项目的文件) ...
- 基于Tesseract组件的OCR识别
基于Tesseract组件的OCR识别 背景以及介绍 欲研究C#端如何进行图像的基本OCR识别,找到一款开源的OCR识别组件.该组件当前已经已经升级到了4.0版本.和传统的版本(3.x)比,4.0时代 ...
- iOS Swift结构体与类的方法调度
前言 hello,小伙伴们:在忙碌中闲暇之余给大家聊聊swift的知识点,今天给大家带来的是swift中结构体与类的方法调度详细区别,希望对你有所帮助,好了废话不用多说,接下来步入主题! 1.普通方法 ...
- 深入理解Java虚拟机之垃圾回收篇
垃圾回收简介 Java 会对内存进行自动分配与回收管理,使上层业务更加安全,方便地使用内存实现程序逻辑.在不同的 JVM 实现及不同的回收机制中,堆内存的划分方式是不一样的. 简要地介绍下垃圾 ...
- 2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件
软件安装 VSCode软件 能够安装 VS Code 能够熟练使用 VS Code 软件 能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual ...
- 掌握BeanShell,轻松处理jmeter中的数据
作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15424558.html 博客主页:https://www.cnblogs.com/testero ...
- Hadoop面试题(四)——YARN
1.简述hadoop1与hadoop2 的架构异同 1)加入了yarn解决了资源调度的问题. 2)加入了对zookeeper的支持实现比较可靠的高可用. 2.为什么会产生 yarn,它解决了什么问题, ...
- 用例圖學習實例 / Learning Use Case Diagram by Examples
什麼是用例圖? 用例描述了一個演員和感興趣的系統之間的一系列交互,以達到某種特定目標,並由某種觸發事件引發.用例滿足需求或為演員解決問題.用例圖包含一組用例,可以通過從每個角色的不同角度講述系統將如何 ...