Node.js使用Angular實戰解析

這次帶給大家Node.js使用Angular實戰解析，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。內容如下：

nbsp;html>

 
  <meta>
  <title>X管理系统</title>
  <link>
 
 
  <p>
    </p><p>
     </p><p>X管理后台</p>
     <p><a>{{currentUser}}</a> <a>退出</a></p>
    
    <p>
     </p><p>
      </p><p>{{menu.text}}</p>
      <p>
       <input>
      </p>
     
    
    <p>
     </p><p></p>
    
  
  <script></script>
  <script></script>
 

接著是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;
}
p.x-view-full {
 width: 100%;
 height: 100%;
}
p.x-project-header {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 width: 100%;
 height: 60px;
 left: 0px;
 top: 0px;
}
p.x-sidemenu {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 left: 0px;
 top: 66px;
 width: 160px;
 height: 600px; 
}
p.x-contents {
 display: inline-block;
 position: absolute;
 left: 170px;
 top: 66px;
 min-width: 200px;
 min-height: 200px;
}
p.x-sidemenu-one{
 margin-left: 8px;
}
p.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;
}
p.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編碼）：

nbsp;html>

 
  <meta>
  <title>登录</title>
 
 
  <p>
    </p><p>登录</p>
    

                                                                                                 

账号：
密码：
注册

    

    

第五步，在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程式碼如下：

<script></script>

2. 實作你的Angular模組

例如我們範例中的admin.js，它實作了一個控制器來支援HTML模板。

3. 載入你的主模組

script元素，就放在angular函式庫的後面，放後面，這是必須的。 HTML程式碼如下：

<script></script>

4. 定義根元素

admin.html有這麼一行程式碼：

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文档中有这行代码：

<p></p>

上面的代码把名字是“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里的数据和方法，都可以直接被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已经说过了。咱说没提过的。

复制代码 代码如下:

{{currentUser}} 退出

这行代码里用到了{{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元素。

<p></p>

上面的代码使用ng-repeat指令，根据x-controller里定义的menus数组来创建多个

元素，每个都具有相同的结构。在ng-repeat指令内，通常使用“x in collections”这种语法来遍历作用域中的某个集合，而x又可以在ng-repeat定义的模板元素内部使用。比如上面定义的p模板，使用ng-show指令时就使用了“menu in menus”中定义的menu变量。同时这个p模板内部代码也引用了menu，参看下面的代码：

<p>{{menu.text}}</p>

ng-show指令放在某个HTML元素内部，用来指示是否显示该元素。

ng-click指令可以指定某个元素被点击时的响应（函数）。

复制代码 代码如下:

上面的代码使用ng-click指令为代表子菜单的按钮指定了响应鼠标点击的代码“setContent(subMenu.action)”。setContent是作用域内定义的方法，subMenu是ng-repeat指令内定义的变量。

有了这样的处理，当用户点击某个菜单时，就会调用到admin.js里的setContent方法来改变content的值。而这种改变，会反过来影响HTML的效果，改变管理页面左下区域内显示的内容。示例里当你点击用户管理时会显示一个登陆页面。

促成这种效果的代码如下：

<p></p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样操作Node.js 使用jade模板引擎

怎样使用node前端开发模板引擎Jade

以上是Node.js使用Angular實戰解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！