Node.js 使用AngularJS的方法示例

2020-06-17 06:43:34易采站长站整理

在Node.js中支持AngularJS

AngularJS是一个客户端的JavaScript库,要想在Node.js里支持它,只要在HTML模板中嵌入script标记,让客户端能获取到angular.js文件就成了。

比如这样:

[code]<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js”></script>[/code]

但这基本上是死路一条,因为国内Google不通啊。所以,最好是翻qiang或VPN下载下来,部署到你的网站上,然后这样:


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

在HTML文档中使用AngularJS

这基本上分为四个部分:
使用ng-app指令定义应用程序模块
加载在script标签中定义的angular.js库
在HTML文档里插入angular相关的指令(directive)
实现控制器(一般在一个js文件里)

下面是一个使用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>

上面的文档内引用到的frameworks.js内容如下:


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

把frameworks.html文件放在HelloExpress的public目录下面,把frameworks.js放在public/javascripts目录下,运行网站,在浏览器打开地址“http://localhost:3000/frameworks.html”,效果如下图所示:

在jade模板中使用AngularJS

其实jade模板文件里使用AngularJS,只需要将Angular指令嵌入即可,没什么特别的。如果你有现成的html文档,也可以使用html转jade的在线工具来转换为jade模板文件,在这里:http://html2jade.org。

前面使用了AnjularJS的HTML文档,对应的jade模板文件frameworks.jade内容如下:


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")