Node.js 使用AngularJS的方法示例


Posted in Javascript onMay 11, 2018

做一个Web应用,一般都有前台和后台,Node.js可以实现后台,利用jade模板引擎也可以生成一些简单的前台页面,但要想开发出具有实际意义的现代Web应用,还得搭配一个Web前端框架。

AngularJS是一个JavaScript前端框架,对于Node.js来说是一个完美的客户端库。AngularJS强制使用MVC(模型-视图-控制器,Model-View-Controller)框架,而它又使用JavaScript对象作为它的模型,和Node.js特别般配,用AngularJS的某些服务(比如$http)和Node.js通信,交互的对象不需要被转换为其它结构就能同时在前端和后端使用,堪称完美。

还有一点,AngularJS背靠Google,值得信赖。不过,天朝网络也真特么绝了,难道仅仅因为这一点,https://angularjs.org/就不能访问了吗,就不能访问了吗,就不能访问了吗!重要的事情说三遍,说三遍,说三遍,你懂的。不过,你可以翻qiang或者买个VPN,访问就没问题了。另外,你也可以通过github访问AngularJS:https://github.com/angular/angular.js。github上还有一个好东东:https://github.com/jmcunningham/AngularJS-Learning,里面列出了各种AngularJS的学习链接。最后呢,还有http://www.angularjs.cn/这个中文站,以及很多点缀在互联网上的AngularJS资源,Google或百度都可以找到。

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?

按我的理解,这几点是比较重要的:

  1. 扩展HTML语法,动态修改HTML
  2. 双向数据绑定
  3. 提供针对前端和后端的各种服务,比如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下载下来,部署到你的网站上,然后这样:

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

在HTML文档中使用AngularJS

  1. 这基本上分为四个部分:
  2. 使用ng-app指令定义应用程序模块
  3. 加载在script标签中定义的angular.js库
  4. 在HTML文档里插入angular相关的指令(directive)
  5. 实现控制器(一般在一个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”,效果如下图所示:

Node.js 使用AngularJS的方法示例

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
jquery实现图片轮播器
May 23 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 #Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 #Javascript
Node.js使用cookie保持登录的方法
May 11 #Javascript
实例解析Vue.js下载方式及基本概念
May 11 #Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 #Javascript
基于ionic实现下拉刷新功能
May 10 #Javascript
详解各版本React路由的跳转的方法
May 10 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
React 实现车牌键盘的示例代码
2019/12/20 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
深入理解Python对Json的解析
2017/02/14 Python
python判断完全平方数的方法
2018/11/13 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
详解python数据结构和算法
2019/04/18 Python
python的pstuil模块使用方法总结
2019/07/26 Python
浅析使用Python搭建http服务器
2019/10/27 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python os库常用操作代码汇总
2020/11/03 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
部队党性分析材料
2014/02/16 职场文书
学雷锋月活动总结
2014/04/25 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
房屋产权证明书
2015/06/19 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS