真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Angular如何在Node.js中使用

本篇文章為大家展示了Angular如何在Node.js中使用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

我們提供的服務有：做網(wǎng)站、成都網(wǎng)站設計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、龍江ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的龍江網(wǎng)站制作公司

第一步，進入myprojects目錄，執(zhí)行“express AngularDemo”。

第二步，導航到AngularDemo目錄，執(zhí)行“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。內(nèi)容如下：



 
  
  X管理系統(tǒng)
  
 
 
  
    
     X管理后臺
     {{currentUser}} 退出
    
                 {{menu.text}}

                                                           

接著是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: "用戶管理",
     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: "預約管理",
     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下面。內(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這兩個靜態(tài)的html文件，都放在public下面即可。

welcome.html內(nèi)容如下：

Welcome to X-Manager!

login.html內(nèi)容如下（注意，UTF8編碼）：



 
  
  登錄
 
 
  
    登錄

    
     
      
        
        
      
      
        
        
      
      
       
        注冊
        
       
      
     
賬號：
密碼：

    
  
 

第五步，在AngularDemo目錄里，執(zhí)行“npm start”命令，啟動網(wǎng)站。

第六步，在瀏覽器里訪問“http://localhost:3000/admin.html”。應該會看到下面的效果哦：

Angular如何在Node.js中使用

創(chuàng)建基本AngularJS應用的步驟

前面我們不管三七二十一先把AngularDemo跑起來了。現(xiàn)在我們看下創(chuàng)建一個基本的AngularJS應用的步驟。

第一步是實現(xiàn)一個Node.js Web服務器。這個express為我們代勞了，我們就用默認的應用模板，你去看app.js的話，應該發(fā)現(xiàn)它把public目錄使用app.static中間件處理了一下，我們可以直接在瀏覽器里訪問public目錄下的文件，比如http://localhost:3000/admin.html。

第二步就是實現(xiàn)一個AngularJS HTML模板，比如我們的admin.html。這是最重要的，我們展開來看看。

1. 加載AngularJS庫

嗯，script元素，放在HTML文檔body元素的最后，如admin.html那樣。瀏覽器會幫你下載并執(zhí)行angular-1.4.3.min.js文件。HTML代碼如下：

2. 實現(xiàn)你的Angular模塊

比如我們示例中的admin.js，它實現(xiàn)了一個控制器來支持HTML模板。

3. 加載你的主模塊

script元素，就放在angular庫的后面，放后面，這是必須的。HTML代碼如下：

4. 定義根元素

admin.html有這么一行代碼：

admin.js的第1行代碼

angular.module('x-admin', [])

這兩行代碼是對應的，HTML里使用ng-app指令指定了Angular模塊名字。而這個模塊名字，就是你的js代碼里使用angular.module定義模塊時提供的第一個參數(shù)。對于我們的示例，模塊名字叫“x-admin”。

在HTML中關聯(lián)了ng-app后，就可以添加控制器了。

關于ng-app指令和angular.module方法，參考這里吧：http://docs.angularjs.cn/api。國內(nèi)的，無需翻qiang。

使用angular.module定義模塊時，第二個參數(shù)是依賴的模塊列表，Angular會自動為你解決依賴注入問題。比如你依賴ui bootstrap，可以這么寫：

angular.module('x-admin', ['ui.bootstrap'])

需要注意的是：文檔里描述指令時，都是ngApp這種形式，而寫代碼時，是ng-app。angular的文檔還是不錯的，贊一個。

5. 添加控制器

admin.html文檔中有這行代碼：

上面的代碼把名字是“x-controller”的控制器分配到

元素中，這樣我們就可以在這個元素中使用js里定義的同名控制器的作用域內(nèi)的數(shù)據(jù)（Model）。

admin.js的第2行代碼：

controller('x-controller', function ($scope, $http) {

定義了一個控制器。具體的語法參考這里吧：http://docs.angularjs.cn/api。國內(nèi)的，無需翻qiang。

controller是angular.Module的一個方法，用來定義控制器，原型是： controller(name, constructor);

第一個參數(shù)是控制器的名字，第二個參數(shù)是控制器的構(gòu)造函數(shù)。構(gòu)造函數(shù)的參數(shù)是控制器依賴的服務。

還有一種語法controller(name,[])，第二個參數(shù)是控制器的依賴數(shù)組。比如：

復制代碼 代碼如下:

controller('x-controller',['$scope', '$http', function($scope, $http){}]);

我看1.3.x，1.4.x的文檔里controller方法的原型都是第一種，第二種是我在《Node.js+MongoDB+AngularJS Web開發(fā)》里看到。兩種我都測試了，都可以用。但跟什么版本什么關系，存疑了。

6. 實現(xiàn)作用域模型

使用Module的controller方法定義控制器時，會讓開發(fā)者提供控制器的構(gòu)造函數(shù)。當Angular編譯HTML時，會使用開發(fā)者提供的控制器構(gòu)造函數(shù)創(chuàng)建控制器的實例。構(gòu)造函數(shù)內(nèi)，會初始化一些數(shù)據(jù)，關聯(lián)到作用域scope上。在作用域scope里的數(shù)據(jù)和方法，都可以直接被HTML引用。

我在admin.js里x-controller控制器的構(gòu)造函數(shù)內(nèi)，提供了menus數(shù)組，用于構(gòu)造管理界面的左側(cè)菜單；提供了currentUser，顯示在管理界面右上角；content則用來保存管理界面左下角區(qū)域使用的局部html模板；最后呢，提供了一個setContent方法，以便用戶可以通過管理界面的菜單來更改content，進而改變功能區(qū)域的內(nèi)容。

7. 在HTML模板中使用指令和綁定數(shù)據(jù)

其實在實現(xiàn)作用域模型時，心里對“什么數(shù)據(jù)和哪個HTML元素對應”這一點是一清二楚的，不清楚你也實現(xiàn)不來啊不是。

一旦你實現(xiàn)了作用域模型，就可以在HTML模板里使用ng指令來關聯(lián)數(shù)據(jù)了。其實有時候你是先寫HTML模板，還是先實現(xiàn)作用域模型，還真分不太清楚。

我們以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已經(jīng)說過了。咱說沒提過的。

復制代碼 代碼如下:

這行代碼里用到了{{expression}}這種語法，花括號之間是一個使用作用域內(nèi)的變量構(gòu)成的JS表達式。示例里直接引用了currentUser變量，實際運行中會用admin.js里的currentUser的值替換HTML文檔中的這部分代碼。如果在運行過程中currentUser變量的值發(fā)生變化，HTML也會變化，這是數(shù)據(jù)綁定。

我們可以修改一下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指令可以根據(jù)一個集合，使用一個模板化的item來創(chuàng)建多個相似的HTML元素。

上面的代碼使用ng-repeat指令，根據(jù)x-controller里定義的menus數(shù)組來創(chuàng)建多個

元素，每個都具有相同的結(jié)構(gòu)。在ng-repeat指令內(nèi)，通常使用“x in collections”這種語法來遍歷作用域中的某個集合，而x又可以在ng-repeat定義的模板元素內(nèi)部使用。比如上面定義的div模板，使用ng-show指令時就使用了“menu in menus”中定義的menu變量。同時這個div模板內(nèi)部代碼也引用了menu，參看下面的代碼：

{{menu.text}}

ng-show指令放在某個HTML元素內(nèi)部，用來指示是否顯示該元素。

ng-click指令可以指定某個元素被點擊時的響應（函數(shù)）。

復制代碼 代碼如下:

上面的代碼使用ng-click指令為代表子菜單的按鈕指定了響應鼠標點擊的代碼“setContent(subMenu.action)”。setContent是作用域內(nèi)定義的方法，subMenu是ng-repeat指令內(nèi)定義的變量。

有了這樣的處理，當用戶點擊某個菜單時，就會調(diào)用到admin.js里的setContent方法來改變content的值。而這種改變，會反過來影響HTML的效果，改變管理頁面左下區(qū)域內(nèi)顯示的內(nèi)容。示例里當你點擊用戶管理時會顯示一個登陸頁面。

促成這種效果的代碼如下：

上述內(nèi)容就是Angular如何在Node.js中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


當前文章：Angular如何在Node.js中使用
轉(zhuǎn)載來于：http://weahome.cn/article/pojohh.html

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部