Angular JS 框架

初始

参看痛苦的 javascript,dart来拯救我吧 Angular JS 正在往 dart 上迁移,所以没有必要看 Angular JS 了

google+ 上看到了一个活动,是介绍 Angular JS 的

http://angularjs.org/ 网站看了一下,还是比较有意思的框架

很多方面和通常的 js 框架是不一样的,摘一下 wiki 上的说明:

说明

AngularJS是一款开源 JavaScript函式库,由Google维护, 众所周知地作为单一页面应用运作协助的。它的目标是增强基于浏览器的应用,并带有MVC模式 (MVC) 功能,这为了使得开发和测试变得更加容易。

函式库读取包含附加自定义(标签属性)的HTML, 遵从这些自定义属性中的指令,并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置,或者从静态或动态JSON资源中获取。

哲学

AngularJS是建立在这样的信念上的:即宣告式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。pic 框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和试图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。 设计目标: * 将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。 * 将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。 * 将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进,并且让双方的复用成为可能。 * 指导开发者完成构建应用程序的整个历程: 从用户界面的设计,到编写业务逻辑,再到测试。 Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于试图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。

学习

http://blog.miniasp.com/post/2013/04/24/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx

这里说的还算可以,不过貌似是台湾人写的繁体,看起来有点累

重点关注中文社区 http://www.angularjs.cn/ 应该资料会很多

和jinja2很像

建立一个 helloworld.html

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

注意,必须要当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用

<html ng-app>

和 jinja2 很像,都是通过 {{}}来包围一些需要做运算的地方,最后 html 显示出来的是已经做了运算的.

也就是说,可以直接在 {{}}中,进行编程操作了

变量绑定

看下更直观的

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

看到没,这就是变量绑定.多么直观简单就实现了 input 的值及显示的动态绑定

不需要写 js,也不需要添加事件监听