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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
老生常谈js数据类型
2017/08/03 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
django中瀑布流写法实例代码
2019/10/14 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
弘扬职业精神演讲稿
2014/03/20 职场文书
交通安全标语
2014/06/06 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python