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

AngularJS是一个JavaScript前端框架，对于Node.js来说是一个完美的client库。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，cookie，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）技术栈，是想用一种语言成就全栈project师梦想的不错选择。

在Node.js中支持AngularJS

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

比方这样：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

但这基本上是死路一条，由于国内Google不通啊。

所以。最好是翻qiang或VPN下载下来，部署到你的站点上。然后这样：

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

在HTML文档中使用AngularJS

这基本上分为四个部分：

  1. 使用ng-app指令定义应用程序模块
  2. 载入在script标签中定义的angular.js库
  3. 在HTML文档里插入angular相关的指令（directive）
  4. 实现控制器（一般在一个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")

其他文章：

Node.js开发入门—使用AngularJS的更多相关文章

  1. Node.js开发入门—使用cookie保持登录

    这次来做一个站点登录的小样例,后面会用到. 这个演示样例会用到Cookie.HTML表单.POST数据体(body)解析. 第一个版本号,我们的用户数据就写死在js文件中. 第二个版本号会引入Mong ...

  2. Node.js开发入门—HelloWorld再分析

    在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...

  3. Node.js开发入门—套接字(socket)编程

    Node.js的net模块提供了socket编程接口,方便我们利用较为底层的套接字接口来实现应用协议.这次我们看一个简单的回显服务器示例,包括服务端和客户端的代码. 代码 分服务器和客户端两部分来说吧 ...

  4. Node.js学习笔记——Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  5. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  6. 快速搭建 Node.js 开发环境以及加速 npm

    如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...

  7. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  8. 《Node.js开发指南》知识整理

    Node.js简介 Node是一个可以让JavaScript运行在服务器端的平台,抛弃了传统平台依靠多线程来实现高并发的设计思路,而采用单线程.异步式I/O.事件驱动式的程序设计模型. 安装和配置No ...

  9. Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

随机推荐

  1. event事件对象 兼容写法：var oEvent=ev||event;和取消事件冒泡

    要在整个页面添加事件要使用document,例如要捕抓鼠标位置 document.onclink=function(ev)  //FireFox Chrome默认都是有一个值传进来的 { var oE ...

  2. 每日技术总结：encodeURI,encodeURIComponent,toFixed

    1. encodeURI(URIstring) encodeURI()函数可把字符串作为URI进行编码 encodeURI("http://www.w3school.com.cn" ...

  3. 深度解析VC中的消息（转发）

    http://blog.csdn.net/chenlycly/article/details/7586067 这篇转发的文章总结的比较好,但是没有告诉我为什么ON_MESSAGE的返回值必须是LRES ...

  4. springboot入门（三）-- springboot集成mybatis及mybatis generator工具使用

    前言 mybatis是一个半自动化的orm框架,所谓半自动化就是mybaitis只支持数据库查出的数据映射到pojo类上,而实体到数据库的映射需要自己编写sql语句实现,相较于hibernate这种完 ...

  5. java三大特性：封装、继承、多态

    Java三大特性之封装   一.定义 封装性指的是将对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部的信息,而是通过该类所提供的方法来实现对内部信息的操作和访问. 二.使用封装的好处: 1 ...

  6. 学习C#修饰符：类修饰符和成员修饰符

    C#修饰符之类修饰符:public.internal. partial.abstract.sealed.static C#修饰符之成员修饰符:public.protected.private.inte ...

  7. (转)const char to LPCTSTR不能转化问题

    转: const char to LPCTSTR不能转化问题 Visual C++ 2008里cannot convert parameter 1 from 'const char [13]' to ...

  8. 怎样在一个fragment or 随意类中操作还有一个fragment中的方法

    1 怎样在acitivty中运行fragment中的方法: 首先获得这个Fragment的对象 xxxFragment fragmentObject = (xxxFragment) getFragme ...

  9. 你说你会C++? —— 智能指针

    智能指针的设计初衷是:      C++中没有提供自己主动回收内存的机制,每次new对象之后都须要手动delete.稍不注意就memory leak. 智能指针能够解决上面遇到的问题. C++中常见的 ...

  10. 对象模型图（OMD）阅读指南

    樱木 原文 对象模型图(OMD)阅读指南(转载) 补充几个名词概念: UML:Unified Modeling Language 统一建模语言,是用来对软件密集系统进行可视化建模的一种语言.UML为面 ...