发帖  主题  评论  推荐  标签 用户 查搜   用户 密码 自动 注册  
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 CQRS 扩展性 并发编程 事件溯源 分布式 SOA

Angular.js教程

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

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

Model模型:

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

View视图:

  • 用户界面层
  • 数据绑定模型
  • 调用控制器的功能。
  • 使用声明指令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属性: <div my-directive="exp"> </div>
  • C - Class: <div class="my-directive: exp;"></div>
  • M - Comment注解: <!-- directive: my-directive exp -->

内建标准的指令有:

  • 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的代码如下图:

ngapp

其中有两个指令。

 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 :

 我们增加了<input ng-model='greeting.text'>输入框,输入的值将赋值给greeting.text变量。

 运行结果输出:

再增加ng-click如下:

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

运行显示结果如下:

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

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

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

<body ng-controller="SpicyCtrl">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalape?o</button>
<p>The food is {{spice}} spicy!</p>
</body>

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

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

 

AngularJS教程之二 双向数据绑定

AngularJS教程之三 服务与依赖注入

AngularJS教程之四 phone完整进阶案例

 

相关参考

使用Angular2建立一个可扩展单页应用

AngularJS的最简单案例

使用Spring MongoDB AngularJS开发一个单页应用

依赖注入

AngularJS专辑

AngularJS Github专题

Angular.JS与JSF和GWT的比较

MVC模式

前端框架

解道移动版 | 关注解道 | 联系解道 | 关于解道 | 广告联系 | 网站地图 | 设为首页

沪ICP证12033263 如有意见请与我们联系 Powered by JdonFramework
返回顶部