AngularJS怎么在Node.js中使用
本篇文章给大家分享的是有关AngularJS怎么在Node.js中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
AngularJS是什么
AngularJS其实就是一个js库,一个js文件,帮助我们更好的开发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?
按我的理解,这几点是比较重要的:
扩展HTML语法,动态修改HTML
双向数据绑定
提供针对前端和后端的各种服务,比如http,http,cookie,window,window,timeout,$document等,方便开发者
还有很多基于AngularJS的UI库,帮助我们构建复杂的Web UI,比如https://github.com/angular-ui或https://github.com/angular-ui/bootstrap。
AngularJS的学习资源
很多,Google或百度吧。另外推荐:https://github.com/jmcunningham/AngularJS-Learning。
也有很多专门讲AngularJS开发的图书,不过我没看过。我看的是《Node.js+MongoDB+AngularJS Web开发》,我觉得蛮不错的,涵盖了MEAN(Node.js-Express-AngularJS-MongoDB)技术栈,是想用一种语言成就全栈工程师梦想的不错选择。
在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下载下来,部署到你的网站上,然后这样:
<scriptsrc="http://yousite/javascripts/angular-1.4.3.min.js"></script>
在HTML文档中使用AngularJS
这基本上分为四个部分:
使用ng-app指令定义应用程序模块
加载在script标签中定义的angular.js库
在HTML文档里插入angular相关的指令(directive)
实现控制器(一般在一个js文件里)
下面是一个使用AngularJS的HTML文档:
<!doctypehtml> <htmlng-app="myApp"> <head> <title>Node.js+Express+AngularJS</title> </head> <body> <divng-controller="myController"> <h4>FavoriteFrameworks:</h4> <ling-repeat="frameworkinframeworks">{{framework}}</li> </div> <scriptsrc="/javascripts/angular-1.4.3.min.js"></script> <scriptsrc="/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内容如下:
doctypehtml html(ng-app="myApp") head titleNode.js+Express+AngularJS body div(ng-controller="myController") h4FavoriteFrameworks: li(ng-repeat="frameworkinframeworks") {{framework}} script(src="/javascripts/angular-1.4.3.min.js") script(src="/javascripts/frameworks.js")
以上就是AngularJS怎么在Node.js中使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。
推荐阅读
-
node.js中Buffer对象有什么用
-
Node.js实现断点续传
Node.js实现断点续传目录方案分析切片断点续传具体解决流程逻辑分析前端服务端小结方案分析切片就是对上...
-
使用Node.js怎么实现一个HTTP服务器
这篇文章将为大家详细讲解有关使用Node.js怎么实现一个HTTP服务器,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅...
-
使用Node.js怎么实现一个大文件分片上传功能
使用Node.js怎么实现一个大文件分片上传功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这...
-
jade模板引擎如何在Node.js中使用
-
如何在Node.js中引入UIBootstrap
-
Angular如何在Node.js中使用
-
使用node.js如何连接mysql
使用node.js如何连接mysql?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人...
-
body-parser怎么在node.js中使用
本篇文章为大家展示了body-parser怎么在node.js中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的...
-
如何在node.js中使用Express服务器
这篇文章给大家介绍如何在node.js中使用Express服务器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助...