Node.js 使用AngularJS的方法示例
做一个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？
按我的理解，这几点是比较重要的：
- 扩展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下载下来，部署到你的网站上，然后这样：
<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")
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- AngularJS+Node.js实现在线聊天室
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
相关推荐
-
AngularJS+Node.js实现在线聊天室
不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://files.jb51.net/file_images/article/201508/201508281040051.gif 功能 着手开发之前,首先明确一
-
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护.当时特别想把一个Node服务做的特别强大.现在看来leader的做法是对的,我更加倾向于把n
-
Node.js 使用AngularJS的方法示例
做一个Web应用,一般都有前台和后台,Node.js可以实现后台,利用jade模板引擎也可以生成一些简单的前台页面,但要想开发出具有实际意义的现代Web应用,还得搭配一个Web前端框架. AngularJS是一个JavaScript前端框架,对于Node.js来说是一个完美的客户端库.AngularJS强制使用MVC(模型-视图-控制器,Model-View-Controller)框架,而它又使用JavaScript对象作为它的模型,和Node.js特别般配,用AngularJS的某些服务(比如
-
node.js遍历目录的方法示例
本文介绍了node.js遍历目录的方法示例,分享给大家,也给自己留个笔记,具体如下 同步遍历 const fs = require('fs'); const path=require('path'); function travel(dir,callback){ fs.readdirSync(dir).forEach((file)=>{ var pathname=path.join(dir,file) if(fs.statSync(pathname).isDirectory()){ travel
-
Node.js复制文件的方法示例
本文实例讲述了Node.js复制文件的方法.分享给大家供大家参考,具体如下: 本人开发过程中,经常遇到,要去拷贝模板到当前文件夹,经常要去托文件,为了省事,解决这个问题,写了一个node复制文件. // js/app.js:指定确切的文件名. // js/*.js:某个目录所有后缀名为js的文件. // js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件. // !js/app.js:除了js/app.js以外的所有文件. // *.+(js|css):匹配项目根目录下,所有
-
node.js实现回调的方法示例
本文实例讲述了node.js实现回调的方法.分享给大家供大家参考,具体如下: 向回调函数传递额外的参数 在调用函数中,使用匿名函数中实现需传递的参数,再次匿名函数内调用回调函数. var events = require("events"); function CarShow() { events.EventEmitter.call(this); this.seeCar = function (make) { this.emit('sawCar', make); } } CarShow
-
Node.js引入UIBootstrap的方法示例
很多Web管理系统的侧边菜单是可折叠的(手风琴样式),我们在前面两篇文章里的HTML模板,自己用div.css做了一些处理,可效果不好.所以我请来了一个前端UI框架,UI Bootstrap,来帮忙.别看它名字里带一个Bootstrap,但它并不依赖Bootstrap,而是用AngularJS实现的原生指令哦.我讨厌太多的依赖,这个我喜欢. 这篇我们以"Angular简单示例"里的AngularDemo为基础,我说到的目录什么的,都遵循express应用的默认目录结构. UI Boot
-
node.js实现身份认证的示例代码
请问昨天结束的早是对堆积在了今天吗,今天还来加个班更博,看在这个毅力的份上能否给亿点点推荐. 有个好消息有个坏消息,先说坏消息吧,就是在这么学下去我急需急支糖浆,来回顾回顾前面的知识,这几天学的太急了,搞得有点推着走的意思,好消息就是今天的内容是最后最后node的基础内容了,果然天不负我,整完然后有两个大案例,做完我就从上次复习那里开始一直复习过来,然后全部不欠账,就昂首挺胸的走进vue了,等等,这个学完可以进去了吧. 1.今天的第一个内容说一下web开发模式,今天基本就是讲一个身份认证的内容,
-
Node.js 应用探索文件解压缩示例详解
目录 引言 compressing 解压 压缩 archiver adm-zip 压缩 解压缩 总结 引言 今天在使用 node 脚本对文件处理时,需要实现一个功能,要对一个 zip 压缩包解压出来,修改里面的文件后,重新打包成zip包.node 解压缩文件的场景在实际应用中还是比较常见,下面介绍几个用来解压缩文件的库和使用方法. compressing compressing 是一个使用起来方便.功能非常强大的node库,它可以对文件.文件夹进行解压或压缩,支持tar.gzip.tgz.zip
-
node.js发送邮件email的方法详解
本文实例讲述了node.js发送邮件email的方法.分享给大家供大家参考,具体如下: 通常我们做node项目时,可能我们会碰到做一个简单的邮件反馈,那么我们今天就来讨论一下,其中遇到的各种坑. 总的来说做这个东西,我们可能需要node第三方依赖模块,来实现我们要达到的效果. 这里我推荐两个模块:https://github.com/pingfanren/Nodemailer npm install nodemailer //这个模块不错,github上星也比较多,还经常有维护,但是坑也比较多
-
webpack打包node.js后端项目的方法
本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖 复制代码 代码如下: npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0 webpack配置 webpack.config.js 'use strict'; const webpack = require('webpack'); let externals = _externals();
-
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
在cmd中: 1.输入node回车即可进入Node.js运行环境. 2.退出只需要连续按两次Ctrl+C或者输入".exit"回车即可. 以上这篇Node.js中,在cmd界面,进入退出Node.js运行环境的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: nodejs教程之环境安装及运行 配置nodejs环境的方法