即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

Angular.js教程。

微信 达内JAVA学院 15℃ 0评论
本文目录
[隐藏]

AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架,由谷歌最初开发的 开源项目,干净的架构吸引了大量粉丝,适合建立CRUD类型的业务应用程序,并不适合开发游戏等应用, 使用声明性编程的用户界面和命令式编程的逻辑, 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上。

  AngularJS是一款客户端MVC的javascript框架,而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构),如果你有Struts或SpringMVC等后端MVC框架编程经验,学习Angular会很快,基本是按照同一个MVC思路实现的。MVC模式见:

1.Model模型:

  • 业务数据.通过$scope显露给视图View

2.View视图:

  • 用户界面层

  • 数据绑定模型

  • 调用控制器的功能。

  • 使用声明指令directives以便重用代码

3.Controller控制器

  • 将视图和模型胶合一起

  • 提供功能方法

  • 使用服务,可重复使用的逻辑

除了上面MVC模型以外,还提供以下组件(有些类似安卓):

4.服务组件

  • 服务是可重用的业务逻辑组件

  • 可测试性

  • 能作为单身对象创建

  • 使用AngularJS依赖注入的注射依赖组件

  • 创建服的务作为一个模块的一部分

  • 一个模块可以依赖于另一个模块

AngularJS提供的标准服务有以下:

  • $http:用于处理 XMLHttpRequest 

  • $location:提供当前URL的信息

  • $q: 异步请求使用,promise/deferred模块

  • $routeProvider:配置路由

  • $log:日志服务

 

5.directives标签指令:

类似JSP中的标签JSTL等或Struts的标签。能够增强Html的行为能力。指令directive有四种:

  • E – Element元素名称:

  • A – Attribute属性:

  • C – Class:

  • M – Comment注解:

内建标准的指令有:

  • ng-app (A) 用来启动AngularJS

  • ng-controller (A, C) 绑定控制器

  • ng-model (A, C) 绑定模型

  • ng-change (E, A)

  • ng-click (A, C)

  • ng-repeat (A, C)

6.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-app

  4. 扫描绑定和指令

  5. 根据绑定指令通过AJAX连接到服务器加载额外的数据

 具体流程图如下:静态页面DOM加载后,通过加载事件加载内容,然后注入 编译混合到DOM中,变成最后视图输出,这个原理和JSP的标签与HTML混合类似,不同的是JSP是在后端进行。

 下面我们在上面index,html增加ng-model :

 我们增加了输入框,输入的值将赋值给greeting.text变量。

 运行结果输出:

再增加ng-click如下:

ng-click是显示一个按钮。一旦点按,调用HelloController中的showGreeting方法。

运行显示结果如下:

我们看看下面图说明了上述模型和控制器和Html模板是如何整合在一起的。

  控制器和模板最终都指向整合到Model之中。如果我们从读写两个方向都理解,首先模型携带后端数据库数据,并结合模板显示;当用户提交表单,模型主要用来写的,也就是存储提交表单的变量,将这些变量值存储到后端数据库。这里的Model和Struts中的表达Form就非常类似。这是一种two way databind双向数据绑定。

  我们知道控制器是将视图和Model胶合在一起,这主要通过$scope这个对象。



The food is {{spice}} spicy!

function SpicyCtrl($scope) {
$scope.spice = ‘very’;
$scope.chiliSpicy = function() {
$scope.spice = ‘chili’;
}
$scope.jalapenoSpicy = function() {
$scope.spice = ‘jalape?o’;
}
}

  这里SpicyCtrl是一个控制器,$scope可以认为是代表这个范围的作用域。我们可以对作用域$scope添加新的属性,如这里是spice。深入地你可以构建自己的scope。

转载请注明:CodingBlog » Angular.js教程。

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情