Node.js使用Angular簡(jiǎn)單示例
在“使用AngularJS”中，我們提到了如何在Node.js項(xiàng)目中引入AngularJS，這次提供一個(gè)非常簡(jiǎn)單的示例，演示AngularJS里的指令、數(shù)據(jù)綁定、服務(wù)等內(nèi)容。
我準(zhǔn)備做Web后臺(tái)管理系統(tǒng)，不同的管理員會(huì)有不同的權(quán)限，管理員登錄后看到的菜單和他的權(quán)限有關(guān)，能看到什么，是動(dòng)態(tài)生成的（類(lèi)似RBAC）。本文的示例從這個(gè)項(xiàng)目而來(lái)，當(dāng)然，現(xiàn)在還是最簡(jiǎn)單的。
如果沒(méi)有特別說(shuō)明，后面我們用到的示例都使用express generator生成。
Angular小demo
先搞起來(lái)吧。
第一步，進(jìn)入myprojects目錄，執(zhí)行“express AngularDemo”。
第二步，導(dǎo)航到AngularDemo目錄，執(zhí)行“npm install”
第三步，到AngularJS下載最新的AngularJS庫(kù)文件，我下載的是1.4.3 min版本，重命名為“angular-1.4.3.min.js”，放在AngularDemo/public/javascripts下面。對(duì)于我們這個(gè)簡(jiǎn)單的Demo，只要這一個(gè)文件就可以了。
第四步，準(zhǔn)備我們要用的文件。
首先是admin.html，放在AngularDemo/public下面即可。admin.html的編碼格式要用UTF8。內(nèi)容如下：
<!DOCTYPE html>
<html ng-app="x-admin">
<head>
<meta charset="UTF-8">
<title>X管理系統(tǒng)</title>
<link rel="stylesheet" href="/stylesheets/admin.css" rel="external nofollow" >
</head>
<body>
<div class="x-view-full" ng-controller="x-controller">
<div class="x-project-header">
<div id="x-project-title">X管理后臺(tái)</div>
<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>
</div>
<div class="x-sidemenu">
<div class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">
<p class="sidemenu-one">{{menu.text}}</p>
<div class="x-sidemenu-two" ng-repeat="subMenu in menu.subMenus" ng-show="subMenu.enabled">
<input type="button" class="sidemenu-button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)"></input>
</div>
</div>
</div>
<div class="x-contents">
<div ng-include="content"></div>
</div>
</div>
<script src="/javascripts/angular-1.4.3.min.js"></script>
<script src="/javascripts/admin.js"></script>
</body>
</html>
接著是admin.js文件，放在AngularDemo/public/javascripts下面。UTF8編碼哦，內(nèi)容如下：
angular.module('x-admin', []).
controller('x-controller', function ($scope, $http) {
$scope.currentUser="ZhangSan";
$scope.content = '/welcome.html';
$scope.menus = [
{
text: "系統(tǒng)管理",
enabled: true,
subMenus:[
{
text: "用戶(hù)管理",
enabled: true,
action:"/login.html"
},
{
text: "角色管理",
enabled: true,
action:"/role"
},
{
text: "權(quán)限管理",
enabled: true,
action:"/access"
}
]
},
{
text: "內(nèi)容管理",
enabled: true,
subMenus:[
{
text: "直播監(jiān)控",
enabled: true,
action:"/stream-monitor"
},
{
text: "預(yù)約管理",
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;
};
});
接下來(lái)我寫(xiě)了一個(gè)簡(jiǎn)單的CSS文件——admin.css，放在AngularDemo/public/stylesheets下面。內(nèi)容如下：
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這兩個(gè)靜態(tài)的html文件，都放在public下面即可。
welcome.html內(nèi)容如下：
Welcome to X-Manager!
login.html內(nèi)容如下（注意，UTF8編碼）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
</head>
<body>
<div class="form-container">
<p class="form-header">登錄</p>
<form action='login' method='POST' align="center">
<table>
<tr>
<td><label for="user">賬號(hào)：</label></td>
<td><input type="text" id="user" name="login_username" /></td>
</tr>
<tr>
<td><label for="pwd">密碼：</label></td>
<td><input type="password" id="pwd" name="login_password" /></td>
</tr>
<tr>
<td colspan='2' align="right">
<a href="/signup" rel="external nofollow" >注冊(cè)</a>
<input type="submit" value='登錄'/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
第五步，在AngularDemo目錄里，執(zhí)行“npm start”命令，啟動(dòng)網(wǎng)站。
第六步，在瀏覽器里訪問(wèn)“http://localhost:3000/admin.html”。應(yīng)該會(huì)看到下面的效果哦：
創(chuàng)建基本AngularJS應(yīng)用的步驟
前面我們不管三七二十一先把AngularDemo跑起來(lái)了。現(xiàn)在我們看下創(chuàng)建一個(gè)基本的AngularJS應(yīng)用的步驟。
第一步是實(shí)現(xiàn)一個(gè)Node.js Web服務(wù)器。這個(gè)express為我們代勞了，我們就用默認(rèn)的應(yīng)用模板，你去看app.js的話，應(yīng)該發(fā)現(xiàn)它把public目錄使用app.static中間件處理了一下，我們可以直接在瀏覽器里訪問(wèn)public目錄下的文件，比如http://localhost:3000/admin.html。
第二步就是實(shí)現(xiàn)一個(gè)AngularJS HTML模板，比如我們的admin.html。這是最重要的，我們展開(kāi)來(lái)看看。
1. 加載AngularJS庫(kù)
嗯，script元素，放在HTML文檔body元素的最后，如admin.html那樣。瀏覽器會(huì)幫你下載并執(zhí)行angular-1.4.3.min.js文件。HTML代碼如下：
<script src="/javascripts/angular-1.4.3.min.js"></script>
2. 實(shí)現(xiàn)你的Angular模塊
比如我們示例中的admin.js，它實(shí)現(xiàn)了一個(gè)控制器來(lái)支持HTML模板。
3. 加載你的主模塊
script元素，就放在angular庫(kù)的后面，放后面，這是必須的。HTML代碼如下：
<script src="/javascripts/admin.js"></script>
4. 定義根元素
admin.html有這么一行代碼：
<html ng-app="x-admin">
admin.js的第1行代碼
angular.module('x-admin', [])
這兩行代碼是對(duì)應(yīng)的，HTML里使用ng-app指令指定了Angular模塊名字。而這個(gè)模塊名字，就是你的js代碼里使用angular.module定義模塊時(shí)提供的第一個(gè)參數(shù)。對(duì)于我們的示例，模塊名字叫“x-admin”。
在HTML中關(guān)聯(lián)了ng-app后，就可以添加控制器了。
關(guān)于ng-app指令和angular.module方法，參考這里吧：http://docs.angularjs.cn/api。國(guó)內(nèi)的，無(wú)需翻qiang。
使用angular.module定義模塊時(shí)，第二個(gè)參數(shù)是依賴(lài)的模塊列表，Angular會(huì)自動(dòng)為你解決依賴(lài)注入問(wèn)題。比如你依賴(lài)ui bootstrap，可以這么寫(xiě)：
angular.module('x-admin', ['ui.bootstrap'])
需要注意的是：文檔里描述指令時(shí)，都是ngApp這種形式，而寫(xiě)代碼時(shí)，是ng-app。angular的文檔還是不錯(cuò)的，贊一個(gè)。
5. 添加控制器
admin.html文檔中有這行代碼：
<div class="x-view-full" ng-controller="x-controller">
上面的代碼把名字是“x-controller”的控制器分配到
元素中，這樣我們就可以在這個(gè)元素中使用js里定義的同名控制器的作用域內(nèi)的數(shù)據(jù)（Model）。
admin.js的第2行代碼：
controller('x-controller', function ($scope, $http) {
定義了一個(gè)控制器。具體的語(yǔ)法參考這里吧：http://docs.angularjs.cn/api。國(guó)內(nèi)的，無(wú)需翻qiang。
controller是angular.Module的一個(gè)方法，用來(lái)定義控制器，原型是： controller(name, constructor);
第一個(gè)參數(shù)是控制器的名字，第二個(gè)參數(shù)是控制器的構(gòu)造函數(shù)。構(gòu)造函數(shù)的參數(shù)是控制器依賴(lài)的服務(wù)。
還有一種語(yǔ)法controller(name,[])，第二個(gè)參數(shù)是控制器的依賴(lài)數(shù)組。比如：
我看1.3.x，1.4.x的文檔里controller方法的原型都是第一種，第二種是我在《Node.js+MongoDB+AngularJS Web開(kāi)發(fā)》里看到。兩種我都測(cè)試了，都可以用。但跟什么版本什么關(guān)系，存疑了。
6. 實(shí)現(xiàn)作用域模型
使用Module的controller方法定義控制器時(shí)，會(huì)讓開(kāi)發(fā)者提供控制器的構(gòu)造函數(shù)。當(dāng)Angular編譯HTML時(shí)，會(huì)使用開(kāi)發(fā)者提供的控制器構(gòu)造函數(shù)創(chuàng)建控制器的實(shí)例。構(gòu)造函數(shù)內(nèi)，會(huì)初始化一些數(shù)據(jù)，關(guān)聯(lián)到作用域
我在admin.js里x-controller控制器的構(gòu)造函數(shù)內(nèi)，提供了menus數(shù)組，用于構(gòu)造管理界面的左側(cè)菜單；提供了currentUser，顯示在管理界面右上角；content則用來(lái)保存管理界面左下角區(qū)域使用的局部html模板；最后呢，提供了一個(gè)setContent方法，以便用戶(hù)可以通過(guò)管理界面的菜單來(lái)更改content，進(jìn)而改變功能區(qū)域的內(nèi)容。
7. 在HTML模板中使用指令和綁定數(shù)據(jù)
其實(shí)在實(shí)現(xiàn)作用域模型時(shí)，心里對(duì)“什么數(shù)據(jù)和哪個(gè)HTML元素對(duì)應(yīng)”這一點(diǎn)是一清二楚的，不清楚你也實(shí)現(xiàn)不來(lái)啊不是。
一旦你實(shí)現(xiàn)了作用域模型，就可以在HTML模板里使用ng指令來(lái)關(guān)聯(lián)數(shù)據(jù)了。其實(shí)有時(shí)候你是先寫(xiě)HTML模板，還是先實(shí)現(xiàn)作用域模型，還真分不太清楚。
我們以admin.html為例來(lái)說(shuō)明一下ng指令的用法，注意，只提admin.html中用到的，沒(méi)用到就看http://docs.angularjs.cn/api。我們用到了ng-app、ng-controller、ng-repeat、ng-click、ng-show、ng-include、{{}}。
ng-app和ng-controller已經(jīng)說(shuō)過(guò)了。咱說(shuō)沒(méi)提過(guò)的。
這行代碼里用到了{(lán){expression}}這種語(yǔ)法，花括號(hào)之間是一個(gè)使用作用域內(nèi)的變量構(gòu)成的JS表達(dá)式。示例里直接引用了currentUser變量，實(shí)際運(yùn)行中會(huì)用admin.js里的currentUser的值替換HTML文檔中的這部分代碼。如果在運(yùn)行過(guò)程中currentUser變量的值發(fā)生變化，HTML也會(huì)變化，這是數(shù)據(jù)綁定。
我們可以修改一下admin.js，使用$interval服務(wù)來(lái)啟動(dòng)一個(gè)定時(shí)器，修改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指令可以根據(jù)一個(gè)集合，使用一個(gè)模板化的item來(lái)創(chuàng)建多個(gè)相似的HTML元素。
<div class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">
上面的代碼使用ng-repeat指令，根據(jù)x-controller里定義的menus數(shù)組來(lái)創(chuàng)建多個(gè)
元素，每個(gè)都具有相同的結(jié)構(gòu)。在ng-repeat指令內(nèi)，通常使用“x in collections”這種語(yǔ)法來(lái)遍歷作用域中的某個(gè)集合，而x又可以在ng-repeat定義的模板元素內(nèi)部使用。比如上面定義的div模板，使用ng-show指令時(shí)就使用了“menu in menus”中定義的menu變量。同時(shí)這個(gè)div模板內(nèi)部代碼也引用了menu，參看下面的代碼：
<p class="sidemenu-one">{{menu.text}}</p>
ng-show指令放在某個(gè)HTML元素內(nèi)部，用來(lái)指示是否顯示該元素。
ng-click指令可以指定某個(gè)元素被點(diǎn)擊時(shí)的響應(yīng)（函數(shù)）。
上面的代碼使用ng-click指令為代表子菜單的按鈕指定了響應(yīng)鼠標(biāo)點(diǎn)擊的代碼“setContent(subMenu.action)”。setContent是作用域內(nèi)定義的方法，subMenu是ng-repeat指令內(nèi)定義的變量。
有了這樣的處理，當(dāng)用戶(hù)點(diǎn)擊某個(gè)菜單時(shí)，就會(huì)調(diào)用到admin.js里的setContent方法來(lái)改變content的值。而這種改變，會(huì)反過(guò)來(lái)影響HTML的效果，改變管理頁(yè)面左下區(qū)域內(nèi)顯示的內(nèi)容。示例里當(dāng)你點(diǎn)擊用戶(hù)管理時(shí)會(huì)顯示一個(gè)登陸頁(yè)面。
促成這種效果的代碼如下：
<div ng-include="content"></div>
上面的代碼使用ng-include指令來(lái)包含一個(gè)HTML片段。當(dāng)你使用ng-include指定了一個(gè)html片段后，Angular會(huì)解析這個(gè)指令，獲取對(duì)應(yīng)的html文檔，編譯，并且將其內(nèi)容整合進(jìn)原始html文檔內(nèi)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了阿里云OSS實(shí)踐文件直傳基于服務(wù)端實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
NodeJS 創(chuàng)建目錄和文件的方法實(shí)例分析
這篇文章主要介紹了NodeJS 創(chuàng)建目錄和文件的方法,涉及node.js中fs模塊mkdir、writeFile及目錄判斷existsSync等方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2023-04-04
VsCode與Node.js知識(shí)點(diǎn)詳解
在本篇文章中小編給大家分享了關(guān)于VsCode與Node.js的相關(guān)知識(shí)點(diǎn)以及安裝等內(nèi)容，需要的朋友們可以參考下。2019-09-09
NodeJS連接MongoDB數(shù)據(jù)庫(kù)時(shí)報(bào)錯(cuò)的快速解決方法
下面小編就為大家?guī)?lái)一篇NodeJS連接MongoDB數(shù)據(jù)庫(kù)時(shí)報(bào)錯(cuò)的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
nrm(npm registry manager )是npm的鏡像源管理工具,它可以快速在讓你在本地源之間切換,下面這篇文章主要給大家介紹了關(guān)于npm與nrm兩種方式查看源和切換鏡像的相關(guān)資料,需要的朋友可以參考下2023-02-02
node koa2實(shí)現(xiàn)上傳圖片并且同步上傳到七牛云存儲(chǔ)
這篇文章主要介紹了node koa2實(shí)現(xiàn)上傳圖片并且同步上傳到七牛云存儲(chǔ)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
websocket結(jié)合node.js實(shí)現(xiàn)雙向通信的示例代碼
本文主要介紹了websocket結(jié)合node.js實(shí)現(xiàn)雙向通信的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
初識(shí)NodeJS服務(wù)端開(kāi)發(fā)入門(mén)（Express+MySQL）
本篇文章主要介紹了初識(shí)NodeJS服務(wù)端開(kāi)發(fā)入門(mén)（Express+MySQL），可以對(duì)數(shù)據(jù)庫(kù)中的一張表進(jìn)行簡(jiǎn)單的CRUD操作，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了Node.js搭建WEB服務(wù)器的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
node實(shí)現(xiàn)封裝一個(gè)圖片拼接插件
這篇文章主要介紹了node實(shí)現(xiàn)封裝一個(gè)圖片拼接插件，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08