Node.js 使用AngularJS的方法示例

更新時(shí)間：2018年05月11日 09:59:23 作者：foruok

這篇文章主要介紹了Node.js 使用AngularJS的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

做一個(gè)Web應(yīng)用，一般都有前臺(tái)和后臺(tái)，Node.js可以實(shí)現(xiàn)后臺(tái)，利用jade模板引擎也可以生成一些簡單的前臺(tái)頁面，但要想開發(fā)出具有實(shí)際意義的現(xiàn)代Web應(yīng)用，還得搭配一個(gè)Web前端框架。

AngularJS是一個(gè)JavaScript前端框架，對(duì)于Node.js來說是一個(gè)完美的客戶端庫。AngularJS強(qiáng)制使用MVC（模型-視圖-控制器，Model-View-Controller）框架，而它又使用JavaScript對(duì)象作為它的模型，和Node.js特別般配，用AngularJS的某些服務(wù)（比如$http）和Node.js通信，交互的對(duì)象不需要被轉(zhuǎn)換為其它結(jié)構(gòu)就能同時(shí)在前端和后端使用，堪稱完美。

還有一點(diǎn)，AngularJS背靠Google，值得信賴。不過，天朝網(wǎng)絡(luò)也真特么絕了，難道僅僅因?yàn)檫@一點(diǎn)，https://angularjs.org/就不能訪問了嗎，就不能訪問了嗎，就不能訪問了嗎！重要的事情說三遍，說三遍，說三遍，你懂的。不過，你可以翻qiang或者買個(gè)VPN，訪問就沒問題了。另外，你也可以通過github訪問AngularJS：https://github.com/angular/angular.js。github上還有一個(gè)好東東：https://github.com/jmcunningham/AngularJS-Learning，里面列出了各種AngularJS的學(xué)習(xí)鏈接。最后呢，還有http://www.angularjs.cn/這個(gè)中文站，以及很多點(diǎn)綴在互聯(lián)網(wǎng)上的AngularJS資源，Google或百度都可以找到。

AngularJS是什么

AngularJS其實(shí)就是一個(gè)js庫，一個(gè)js文件，幫助我們更好的開發(fā)Web前端。在github上，AngularJS這么介紹自己：

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.
Oh yeah and it helps with server-side communication, taming async callbacks with promises and deferreds. It also makes client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. Best of all?? It makes development fun!

都是英文的，Are u OK？

按我的理解，這幾點(diǎn)是比較重要的：

擴(kuò)展HTML語法，動(dòng)態(tài)修改HTML
雙向數(shù)據(jù)綁定
提供針對(duì)前端和后端的各種服務(wù)，比如http，http，cookie，window，window，timeout，$document等，方便開發(fā)者

還有很多基于AngularJS的UI庫，幫助我們構(gòu)建復(fù)雜的Web UI，比如https://github.com/angular-ui或https://github.com/angular-ui/bootstrap。

AngularJS的學(xué)習(xí)資源

很多，Google或百度吧。另外推薦：https://github.com/jmcunningham/AngularJS-Learning。

也有很多專門講AngularJS開發(fā)的圖書，不過我沒看過。我看的是《Node.js+MongoDB+AngularJS Web開發(fā)》，我覺得蠻不錯(cuò)的，涵蓋了MEAN（Node.js-Express-AngularJS-MongoDB）技術(shù)棧，是想用一種語言成就全棧工程師夢想的不錯(cuò)選擇。

在Node.js中支持AngularJS

AngularJS是一個(gè)客戶端的JavaScript庫，要想在Node.js里支持它，只要在HTML模板中嵌入script標(biāo)記，讓客戶端能獲取到angular.js文件就成了。

比如這樣：

[code]<script src="]

但這基本上是死路一條，因?yàn)閲鴥?nèi)Google不通啊。所以，最好是翻qiang或VPN下載下來，部署到你的網(wǎng)站上，然后這樣：

<script src="http://yousite/javascripts/angular-1.4.3.min.js"></script>

在HTML文檔中使用AngularJS

這基本上分為四個(gè)部分：
使用ng-app指令定義應(yīng)用程序模塊
加載在script標(biāo)簽中定義的angular.js庫
在HTML文檔里插入angular相關(guān)的指令（directive）
實(shí)現(xiàn)控制器（一般在一個(gè)js文件里）

下面是一個(gè)使用AngularJS的HTML文檔：

<!doctype html>
<html ng-app="myApp">
<head>
 <title>Node.js + Express + AngularJS</title>
</head>
<body>
 <div ng-controller="myController">
 <h3>Favorite Frameworks:</h3>
 <li ng-repeat="framework in frameworks">{{framework}}</li>
 </div>
 <script src="/javascripts/angular-1.4.3.min.js"></script>
 <script src="/javascripts/frameworks.js"></script>
</body>
</html>

上面的文檔內(nèi)引用到的frameworks.js內(nèi)容如下：

angular.module('myApp', []).
 controller('myController', ['$scope', function($scope){
 $scope.frameworks = ['Node.js', 'Express', 'AnjularJS'];
 }]);

把frameworks.html文件放在HelloExpress的public目錄下面，把frameworks.js放在public/javascripts目錄下，運(yùn)行網(wǎng)站，在瀏覽器打開地址“http://localhost:3000/frameworks.html”，效果如下圖所示：

在jade模板中使用AngularJS

其實(shí)jade模板文件里使用AngularJS，只需要將Angular指令嵌入即可，沒什么特別的。如果你有現(xiàn)成的html文檔，也可以使用html轉(zhuǎn)jade的在線工具來轉(zhuǎn)換為jade模板文件，在這里：http://html2jade.org。

前面使用了AnjularJS的HTML文檔，對(duì)應(yīng)的jade模板文件frameworks.jade內(nèi)容如下：

doctype html
html(ng-app="myApp")
 head
 title Node.js + Express + AngularJS
 body
 div(ng-controller="myController")
  h3 Favorite Frameworks:
  li(ng-repeat="framework in frameworks")
  {{framework}}

 script(src="/javascripts/angular-1.4.3.min.js")
 script(src="/javascripts/frameworks.js")

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: