AngularJS入门教程

AngularJS入门教程AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架，由谷歌最初开发的开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用，使用声明性编程的用户界面和命令式编程的逻辑，支持现代桌面和移动浏览器InternetExplorer版本8.0及以上。AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Struts或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的。MVC模式见：Model模型:业务数据.通过$scope显露给视图ViewView视图:用户界面层数据绑定模型调用控制器的功能。使用声明指令directives以便重用代码Controller控制器将视图和模型胶合一起提供功能方法使用服务，可重复使用的逻辑除了上面MVC模型以外，还提供以下组件(有些类似安卓)：服务组件服务是可重用的业务逻辑组件可测试性能作为单身对象创建使用AngularJS依赖注入的注射依赖组件创建服的务作为一个模块的一部分一个模块可以依赖于另一个模块AngularJS提供的标准服务有以下：$http：用于处理XMLHttpRequest$location：提供当前URL的信息$q：异步请求使用，promise/deferred模块$routeProvider：配置路由$log：日志服务directives标签指令：类似JSP中的标签JSTL等或Struts的标签。能够增强Html的行为能力。指令directive有四种：E-Element元素名称:my-directive/my-directiveA-Attribute属性:divmy-directive=exp/divC-Class:divclass=my-directive:exp;/divM-Comment注解:!--directive:my-directiveexp--内建标准的指令有：ng-app(A)用来启动AngularJSng-controller(A,C)绑定控制器ng-model(A,C)绑定模型ng-change(E,A)ng-click(A,C)ng-repeat(A,C)Helloword第一个程序开始一个Angular项目，可以直接拷贝这个源码项目到你的目录即可(GitHub)，然后在其基础上修改拓展。例如一个index.html的代码如下图：其中有两个指令。ng-app定义了有AngularJS管理的DOM部分，用来启动AngularJS。ng-controller定义了Scope部分，用ng-controller将控制器绑定。控制器HelloController代码是：在index,html的scope内，{{}}表示显示scope中的对象。这个index.htm运行的结果就是Hello,World基本流程如下：1.用户请求第一页2.和模板一起装入index.html页面3.等待的页面完全加载后，寻找ng-app4.扫描绑定和指令5.根据绑定指令通过AJAX连接到服务器加载额外的数据具体流程图如下：静态页面DOM加载后，通过加载事件加载内容，然后注入编译混合到DOM中，变成最后视图输出，这个原理和JSP的标签与HTML混合类似，不同的是JSP是在后端进行。下面我们在上面index,html增加ng-model：我们增加了inputng-model='greeting.text'输入框，输入的值将赋值给greeting.text变量。运行结果输出：再增加ng-click如下：ng-click是显示一个按钮。一旦点按，调用HelloController中的showGreeting方法。运行显示结果如下：我们看看下面图说明了上述模型和控制器和Html模板是如何整合在一起的。控制器和模板最终都指向整合到Model之中。如果我们从读写两个方向都理解，首先模型携带后端数据库数据，并结合模板显示；当用户提交表单，模型主要用来写的，也就是存储提交表单的变量，将这些变量值存储到后端数据库。这里的Model和Struts中的表达Form就非常类似。这是一种twowaydatabind双向数据绑定。我们知道控制器是将视图和Model胶合在一起，这主要通过$scope这个对象。bodyng-controller=SpicyCtrlbuttonng-click=chiliSpicy()Chili/buttonbuttonng-click=jalapenoSpicy()Jalape?o/buttonpThefoodis{{spice}}spicy!/p/bodyfunctionSpicyCtrl($scope){$scope.spice='very';$scope.chiliSpicy=function(){$scope.spice='chili';}$scope.jalapenoSpicy=function(){$scope.spice='jalape?o';}}这里SpicyCtrl是一个控制器，$scope可以认为是代表bodyng-controller=SpicyCtrl/body这个范围的作用域。我们可以对作用域$scope添加新的属性，如这里是spice。深入地你可以构建自己的scope。