我们可以使用控制器去给视图提供要显示的数据,这个数据可以来自应用程序的后台数据库。在上一个视频里我们定义了一个模块,在这个模块里面,可以去添加控制器。打开 app.js ...
在这个 module 方法的后面,继续使用一个 .controller 方法 ... 或者也可以这样,先把这个模块交给一个变量 ... 比如叫它 myApp ..
var myApp = angular.module('myApp', []);
然后再使用 myApp 的 .controller 方法 ... 它的第一个参数是给我们给控制器起的名字 ... 比如去创建一个叫 UserController 的控制器,控制器的名字里面,每个词的第一个字母用大写,一般命名控制器就是使用这样的形式,先是可以描述这个控制器作用的一个词儿,我这里就是 User,后面再加上 Controller 这个词儿。
它的第二个参数就是这个控制器要做的事情 ... 用一个匿名函数 ... 在这里,可以简单的用一个 console.log ... 在控制器上输出点文字 ...
myApp.controller('UserController', function () {
console.log('Hello');
});
保存 ... 再回到 index.html ... 想要使用控制器,可以先找到一个元素 ... 比如这里先新建一个 div 标签 ... 然后再这个元素上面使用 ngController 这个指令 ... 这个指令作为这个元素的一个属性,就是 ng-controller ... 它的值就是要用到的控制器的名字 ... 输入 UserController ...
这样在这个 div 标签里面,我们就可以使用 UserController 这个控制器里的东西了。先保存一下 ... 打开浏览器的控制台,你会看到 UserController 控制器在控制台上输出的文字 ... Hello ...
这里要注意一下,在 index.html 这个文档里面,我用到了 myApp 这个模块来引导应用,你会发现 ng-app 的值就是这个模块, 这样我们才能在它里面,使用这个模块拥有的东西,比如我们定义在这个模块上的 UserController 控制器。