Node.js开发入门—使用AngularJS

发表于 JS 分类,标签:

做一个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,cookie,window,timeout,$document等,方便开发者
还有很多基于AngularJS的UI库,帮助我们构建复杂的Web UI,比如https://github.com/angular-uihttps://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模板中嵌入

在jade模板中使用AnjularJS

其实jade模板文件里使用AngularJS,只需要将Angular指令嵌入即可,没什么特别的。如果你有现成的html文档,也可以使用html转jade的在线工具来转换为jade模板文件,在这里:http://html2jade.org

前面使用了AnjularJS的HTML文档,对应的jade模板文件frameworks.jade内容如下:

doctype htmlhtml(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")


0 篇评论

发表我的评论