在“使用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。内容如下：
<!DOCTYPE html> <html ng-app="x-admin"> <head> <meta charset="UTF-8"> <title>X管理系统</title> <link href="https://www.jb51.net/stylesheets/admin.css" > </head> <body> <div ng-controller="x-controller"> <div> <div>X管理后台</div> <div><a href="https://www.jb51.net/user/tttt" >{{currentUser}}</a> <a href="https://www.jb51.net/logout" >退出</a></div> </div> <div> <div ng-repeat="menu in menus" ng-show="menu.enabled"> <p>{{menu.text}}</p> <div ng-repeat="subMenu in menu.subMenus" ng-show="subMenu.enabled"> <input type="button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)"></input> </div> </div> </div> <div> <div ng-include="content"></div> </div> </div> <script src="https://www.jb51.net/javascripts/angular-1.4.3.min.js"></script> <script src="https://www.jb51.net/javascripts/admin.js"></script> </body> </html>
接着是admin.js文件，放在AngularDemo/public/javascripts下面。UTF8编码哦，内容如下：
angular.module('x-admin', []). controller('x-controller', function ($scope, $http) { $scope.currentUser="ZhangSan"; $scope.content = '/welcome.html'; $scope.menus = [ { text: "系统管理", enabled: true, subMenus:[ { text: "用户管理", enabled: true, action:"/login.html" }, { text: "角色管理", enabled: true, action:"/role" }, { text: "权限管理", enabled: true, action:"/access" } ] }, { text: "内容管理", enabled: true, subMenus:[ { text: "直播监控", enabled: true, action:"/stream-monitor" }, { text: "预约管理", enabled: true, action:"/book-mgr" } ] }, { text: "推送管理", enabled: true, subMenus:[ { text: "推送列表", enabled: true, action:"/push-list" }, { text: "新增推送", enabled: true, action:"/add-push" } ] } ]; $scope.setContent = function(action){ console.log(action); $scope.content=action; }; });
接下来我写了一个简单的CSS文件——admin.css，放在AngularDemo/public/stylesheets下面。内容如下：
a { color: #00B7FF; } div.x-view-full { width: 100%; height: 100%; } div.x-project-header { display: inline-block; position: absolute; border: 1px solid #E4E4E4; background: #F2F2F2; width: 100%; height: 60px; left: 0px; top: 0px; } div.x-sidemenu { display: inline-block; position: absolute; border: 1px solid #E4E4E4; background: #F2F2F2; left: 0px; top: 66px; width: 160px; height: 600px; } div.x-contents { display: inline-block; position: absolute; left: 170px; top: 66px; min-width: 200px; min-height: 200px; } div.x-sidemenu-one{ margin-left: 8px; } div.x-sidemenu-two{ margin-left: 14px; font-size: 14px; } p.sidemenu-one{ font-size: 18px; font-weight: bold; color: black; } .sidemenu-button{ font-size: 14px; border: 0px; margin-bottom: 6px; background: #F2F2F2; } .sidemenu-button:hover {background-color: #218fd5;} #x-project-title{ position: absolute; display: inline-block; top: 20px; left: 20px; font-size: 28px; font-weight: bold; width: 200px; } #x-login-user{ position: absolute; display: inline-block; top: 30px; right: 10px; width: 200px; text-align: right; } div.admin-addUser{ position: relative; top: 4px; left: 10px; width: auto; height: auto; }
最后，为演示菜单功能，我们还需要welcome.html和login.html这两个静态的html文件，都放在public下面即可。
welcome.html内容如下：
Welcome to X-Manager!
login.html内容如下（注意，UTF8编码）：