Node.js使用Angular简单示例
在“使用AngularJS”中,我们提到了如何在Node.js项目中引入AngularJS,这次提供一个非常简单的示例,演示AngularJS里的指令、数据绑定、服务等内容。
我准备做Web后台管理系统,不同的管理员会有不同的权限,管理员登录后看到的菜单和他的权限有关,能看到什么,是动态生成的(类似RBAC)。本文的示例从这个项目而来,当然,现在还是最简单的。
如果没有特别说明,后面我们用到的示例都使用express generator生成。
Angular小demo
先搞起来吧。
第一步,进入myprojects目录,执行“express AngularDemo”。
第二步,导航到AngularDemo目录,执行“npm install”
第三步,到AngularJS下载最新的AngularJS库文件,我下载的是1.4.3 min版本,重命名为“angular-1.4.3.min.js”,放在AngularDemo/public/javascripts下面。对于我们这个简单的Demo,只要这一个文件就可以了。
第四步,准备我们要用的文件。
首先是admin.html,放在AngularDemo/public下面即可。admin.html的编码格式要用UTF8。内容如下:
上面的代码把名字是“x-controller”的控制器分配到
元素中,这样我们就可以在这个元素中使用js里定义的同名控制器的作用域内的数据(Model)。
admin.js的第2行代码:
controller('x-controller', function ($scope, $http) {
定义了一个控制器。具体的语法参考这里吧:http://docs.angularjs.cn/api。国内的,无需翻qiang。
controller是angular.Module的一个方法,用来定义控制器,原型是: controller(name, constructor);
第一个参数是控制器的名字,第二个参数是控制器的构造函数。构造函数的参数是控制器依赖的服务。
还有一种语法controller(name,[]),第二个参数是控制器的依赖数组。比如:
复制代码 代码如下:controller('x-controller',['$scope', '$http', function($scope, $http){}]);
我看1.3.x,1.4.x的文档里controller方法的原型都是第一种,第二种是我在《Node.js+MongoDB+AngularJS Web开发》里看到。两种我都测试了,都可以用。但跟什么版本什么关系,存疑了。
6. 实现作用域模型
使用Module的controller方法定义控制器时,会让开发者提供控制器的构造函数。当Angular编译HTML时,会使用开发者提供的控制器构造函数创建控制器的实例。构造函数内,会初始化一些数据,关联到作用域scope上。在作用域scope里的数据和方法,都可以直接被HTML引用。
我在admin.js里x-controller控制器的构造函数内,提供了menus数组,用于构造管理界面的左侧菜单;提供了currentUser,显示在管理界面右上角;content则用来保存管理界面左下角区域使用的局部html模板;最后呢,提供了一个setContent方法,以便用户可以通过管理界面的菜单来更改content,进而改变功能区域的内容。
7. 在HTML模板中使用指令和绑定数据
其实在实现作用域模型时,心里对“什么数据和哪个HTML元素对应”这一点是一清二楚的,不清楚你也实现不来啊不是。
一旦你实现了作用域模型,就可以在HTML模板里使用ng指令来关联数据了。其实有时候你是先写HTML模板,还是先实现作用域模型,还真分不太清楚。
我们以admin.html为例来说明一下ng指令的用法,注意,只提admin.html中用到的,没用到就看http://docs.angularjs.cn/api。我们用到了ng-app、ng-controller、ng-repeat、ng-click、ng-show、ng-include、{{}}。
ng-app和ng-controller已经说过了。咱说没提过的。
复制代码 代码如下:
这行代码里用到了{{expression}}这种语法,花括号之间是一个使用作用域内的变量构成的JS表达式。示例里直接引用了currentUser变量,实际运行中会用admin.js里的currentUser的值替换HTML文档中的这部分代码。如果在运行过程中currentUser变量的值发生变化,HTML也会变化,这是数据绑定。
我们可以修改一下admin.js,使用$interval服务来启动一个定时器,修改currentUser的值。新的admin.js是这样的:
angular.module('x-admin', []).
controller('x-controller', function ($scope, $http, $interval) {
$scope.currentUser="ZhangSan";
$scope.content = '/welcome.html';
$scope.menus = [
......
];
$scope.setContent = function(action){
console.log(action);
$scope.content=action;
};
//2秒后改变一次currentUser
$interval(function(){
$scope.currentUser = "LiSi";
}, 2000, 1);
});
ng-repeat指令可以根据一个集合,使用一个模板化的item来创建多个相似的HTML元素。