Angular JS 框架

July 15, 2013

初始

参看[痛苦的 javascript,dart 来拯救我吧](痛苦的 javascript,dart 来拯救我吧.md) 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></html>

和 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,也不需要添加事件监听


comments powered by Disqus