Angular如何在Node.js中使用
本篇文章为大家展示了Angular如何在Node.js中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
第一步，进入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。内容如下：
<!DOCTYPEhtml>
<htmlng-app="x-admin">
<head>
<metacharset="UTF-8">
<title>X管理系统</title>
<linkrel="stylesheet"href="/stylesheets/admin.css"rel="externalnofollow">
</head>
<body>
<divclass="x-view-full"ng-controller="x-controller">
<divclass="x-project-header">
<divid="x-project-title">X管理后台</div>
<divid="x-login-user"><ahref="/user/tttt"rel="externalnofollow"rel="externalnofollow">{{currentUser}}</a> <ahref="/logout"rel="externalnofollow"rel="externalnofollow">退出</a></div>
</div>
<divclass="x-sidemenu">
<divclass="x-sidemenu-one"ng-repeat="menuinmenus"ng-show="menu.enabled">
<pclass="sidemenu-one">{{menu.text}}</p>
<divclass="x-sidemenu-two"ng-repeat="subMenuinmenu.subMenus"ng-show="subMenu.enabled">
<inputtype="button"class="sidemenu-button"value="{{subMenu.text}}"ng-click="setContent(subMenu.action)"></input>
</div>
</div>
</div>
<divclass="x-contents">
<divng-include="content"></div>
</div>
</div>
<scriptsrc="/javascripts/angular-1.4.3.min.js"></script>
<scriptsrc="/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:1pxsolid#E4E4E4;
background:#F2F2F2;
width:100%;
height:60px;
left:0px;
top:0px;
}
div.x-sidemenu{
display:inline-block;
position:absolute;
border:1pxsolid#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内容如下：
WelcometoX-Manager!
login.html内容如下（注意，UTF8编码）：
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>登录</title> </head> <body> <divclass="form-container"> <pclass="form-header">登录</p> <formaction='login'method='POST'align="center"> <table> <tr> <td><labelfor="user">账号：</label></td> <td><inputtype="text"id="user"name="login_username"/></td> </tr> <tr> <td><labelfor="pwd">密码：</label></td> <td><inputtype="password"id="pwd"name="login_password"/></td> </tr> <tr> <tdcolspan='2'align="right"> <ahref="/signup"rel="externalnofollow">注册</a> <inputtype="submit"value='登录'/> </td> </tr> </table> </form> </div> </body> </html>
第五步，在AngularDemo目录里，执行“npm start”命令，启动网站。
第六步，在浏览器里访问“http://localhost:3000/admin.html”。应该会看到下面的效果哦：
创建基本AngularJS应用的步骤
前面我们不管三七二十一先把AngularDemo跑起来了。现在我们看下创建一个基本的AngularJS应用的步骤。
第一步是实现一个Node.js Web服务器。这个express为我们代劳了，我们就用默认的应用模板，你去看app.js的话，应该发现它把public目录使用app.static中间件处理了一下，我们可以直接在浏览器里访问public目录下的文件，比如http://localhost:3000/admin.html。
第二步就是实现一个AngularJS HTML模板，比如我们的admin.html。这是最重要的，我们展开来看看。
1. 加载AngularJS库
嗯，script元素，放在HTML文档body元素的最后，如admin.html那样。浏览器会帮你下载并执行angular-1.4.3.min.js文件。HTML代码如下：
<scriptsrc="/javascripts/angular-1.4.3.min.js"></script>
2. 实现你的Angular模块
比如我们示例中的admin.js，它实现了一个控制器来支持HTML模板。
3. 加载你的主模块
script元素，就放在angular库的后面，放后面，这是必须的。HTML代码如下：
<scriptsrc="/javascripts/admin.js"></script>
4. 定义根元素
admin.html有这么一行代码：
<htmlng-app="x-admin">
admin.js的第1行代码
angular.module('x-admin',[])这两行代码是对应的，HTML里使用ng-app指令指定了Angular模块名字。而这个模块名字，就是你的js代码里使用angular.module定义模块时提供的第一个参数。对于我们的示例，模块名字叫“x-admin”。
在HTML中关联了ng-app后，就可以添加控制器了。
关于ng-app指令和angular.module方法，参考这里吧：http://docs.angularjs.cn/api。国内的，无需翻qiang。
使用angular.module定义模块时，第二个参数是依赖的模块列表，Angular会自动为你解决依赖注入问题。比如你依赖ui bootstrap，可以这么写：
angular.module('x-admin',['ui.bootstrap'])需要注意的是：文档里描述指令时，都是ngApp这种形式，而写代码时，是ng-app。angular的文档还是不错的，赞一个。
5. 添加控制器
admin.html文档中有这行代码：
<divclass="x-view-full"ng-controller="x-controller">
上面的代码把名字是“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时，会使用开发者提供的控制器构造函数创建控制器的实例。构造函数内，会初始化一些数据，关联到作用域
我在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已经说过了。咱说没提过的。
复制代码 代码如下:
<div id="x-login-user"><a href="/user/tttt" rel="external nofollow" rel="external nofollow" >{{currentUser}}</a> <a href="/logout" rel="external nofollow" rel="external nofollow" >退出</a></div>
这行代码里用到了{{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元素。
<divclass="x-sidemenu-one"ng-repeat="menuinmenus"ng-show="menu.enabled">
上面的代码使用ng-repeat指令，根据x-controller里定义的menus数组来创建多个
元素，每个都具有相同的结构。在ng-repeat指令内，通常使用“x in collections”这种语法来遍历作用域中的某个集合，而x又可以在ng-repeat定义的模板元素内部使用。比如上面定义的div模板，使用ng-show指令时就使用了“menu in menus”中定义的menu变量。同时这个div模板内部代码也引用了menu，参看下面的代码：
<pclass="sidemenu-one">{{menu.text}}</p>ng-show指令放在某个HTML元素内部，用来指示是否显示该元素。
ng-click指令可以指定某个元素被点击时的响应（函数）。
复制代码 代码如下:
<input type="button" class="sidemenu-button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)">
上面的代码使用ng-click指令为代表子菜单的按钮指定了响应鼠标点击的代码“setContent(subMenu.action)”。setContent是作用域内定义的方法，subMenu是ng-repeat指令内定义的变量。
有了这样的处理，当用户点击某个菜单时，就会调用到admin.js里的setContent方法来改变content的值。而这种改变，会反过来影响HTML的效果，改变管理页面左下区域内显示的内容。示例里当你点击用户管理时会显示一个登陆页面。
促成这种效果的代码如下：
<divng-include="content"></div>
上述内容就是Angular如何在Node.js中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注恰卡编程网行业资讯频道。
