`
boyitech
  • 浏览: 84309 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

博弈AngularJS讲义(1) - 快速开始

angularjsjsangular下载
阅读更多

什么是AngularJS ?  

   AngularJS是一款非常优秀的前端MVVM（Model-View-ViewModel）框架，它强大的双向数据绑定（two-way data binding）和依赖注入（dependency injection), 使得前端代码结构更具层次化和模块化，极大减少了前端代码量。 通过AngularJS可以扩展HTML的语法，让页面显得更加简洁。 由于国内访问Google Site受限，所以广大的爱好者可能无法访问到最好的AngularJS资源，我们将在稍后的章节中结合大量的官方代码片段对AngularJS进行详解，尽显其强大之处。

  AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。

   使用双大括号{{}}语法进行数据绑定

   使用DOM控制结构实现迭代或者隐藏DOM片段

   支持表单和表单验证

   逻辑代码和DOM元素关联

   构建可重用的页面组件  

 

AngularJS的使用场景

   AngularJS呈现给开发者更高层次的抽象简化了应用程序的开发。但这种抽象牺牲了一些灵活性。并不是所有的Web应用都适合采用AngularJS开发。

   AngularJS主要适用于CRUD(增、删、改、查)类的应用，基于其强大的数据绑定，模版指令定制，路由，表单验证，组建重用以及依赖注入。此外Angular还提供了丰富的自动化测试工具。

   AngularJS不适合开发游戏和DOM操作过于频繁的页面应用，对于这些类型的应用应考虑更底层的库或者框架比如jQuery.

 

AngularJS的禅学

  AngularJS推崇在构建UI和组件时使用声明式的代码风格：

    将DOM操作和应用逻辑解耦，提高代码的可测试性

    测试代码和写代码同样重要， 测试的难度很大程度上取决于代码的结构设计

    将前后端的代码解耦，使得前后端并行开发

    将复杂的问题分而治之

  AngularJS主要从以下几点帮我们简化了开发：

    减少了大量回调及事件注册的代码， 让代码层次更加清晰

    用声明式的代码描述UI的状态和行为，不用再写大量的JS代码操作DOM

    AngularJS对Model与UI的绑定以及AJAX提供了良好的封装，让我们更专注与整个应用的流程

    AngularJS的依赖注入机制减少了初始化代码

 

让我们从一个简单例子开始

   1. 从本文附件中下载AngularJS框架代码

   2. 使用你喜爱的文本编辑器，创建html文件， 加入如下内容：

      

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

  注意： 请在script里面引入你所用的angularjs的正确地址。

 

  3. 在浏览器中运行以上代码，结果如图所示。

    
    

  现在让我们分析一下代码。 首先值得注意的是在html标签里面的“ng-app”属性，这是AngularJS内置的一个标记(directives), 但页面加载时，AngularJS会自动识别相应的标记，对页面进行预处理(compile), “ng-app”告诉AngularJS这是一个AngularJS的应用，接下来在<input>的标签中有一个ng-model="yourName"，AngularJS自动给改input标签绑定一个model属性"yourName", 该控件的value会自动赋给绑定的属性，最后看到的是一个模板<h1>Hello {{yourName}}!</h1>的， “{{}}”是AngularJS表达式（expression），可绑定前面<input>说关联的model属性，这样在input中输入不同的文本， 就可以在Hello语句中实时看到更新的值了。 这正是数据绑定的强大之处， 不需要再写额外的js代码来注册监听事件了。

 

  在此我们初步领略了AngularJS的强大。我们将在下个章节中，详细介绍AngularJS的一些核心概念。

 

 

  • 大小: 3.8 KB
分享到：
| 博弈Java讲义 - Java线程同步 (1)
评论
1 楼 java小叶檀 2015-02-05  
angularJS的cdn地址可以使用：http://cdn.bootcss.com/angular.js/1.1.0/angular.min.js
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics