1.1. AngularJs简介
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM(其实不管概念怎么炒作,说白了就是MVC)、模块化、自动化双向数据绑定、语义化标签(指令)、依赖注入等等。
1.2. AngularJs能为我们做什么
1. AngularJS将帮助我们构建标准化的web应用结构,并且提供了针对客户端应用的未来开发使用的模板。
也就是说,使用AngularJs为我们构建一个MVC结构,做到像后台一样的开发模式。
2.模块化和依赖注入,AngularJs的核心思想之一就是“一切都起于模块”。
依赖注入则更有点Spring的味道,Angular提供了一个自动管理对象的机制,我们无需主动new一个对象,因为这种机制基于单例模式,它帮助我们管理对象的依赖关系。我们用到哪个对象直接拿来用就是。
3. 通过Angular的指令,你可以把模板编写成 HTML 的形式。之所以可以做到这一点,是因为Angular引入了一款强大的 DOM 转换引擎,可以用它来扩展 HTML的语法
1.3 HelloWorld
HelloAngular.html
<!doctype html> <html ng-app="HelloAngular"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="helloNgCtrl"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="angular-1.3.0.js"></script> <script src="HelloAngular.js"></script> </html>
HelloAngular.js
var helloModule=angular.module('HelloAngular', []); helloModule.controller('helloNgCtrl', ['$scope', function($scope){ $scope.greeting = { text: 'Hello' }; }]);
先看html代码,ng-app是一个AngularJs的内置指令,用来声明Angular的边界,就是告诉Angular应该负责页面中的哪个部分。
Js文件中,我们首先通过angular的module方法声明了一个HelloAngular的模块,这个helloModule只是一个名字或者一个句柄,用来对这个模块进行操作。 接下来就给这个模块创建了一个名为helloNgCtrl的Controller,并且将$scope作为参数(相当于作用
域),然后给$scope添加了一个属性。
再回到Html当中,我们看到ng-app的值为我们声明的那个模块名称,证明这个页面是由angular的HelloAngular模块来负责的。而后有一个div元素,这个div应用了我们定义过的一个contoller控制器,在定义这个控制器的时候我们曾经传入了一个$scope参数表示作用域,这个作用域的范围就被限制在当前的这个div当中。我们通过双括号的形式来读取greeting这个变量,实现单向绑定,即从模型到视图的绑定。