AngularJS开发下一代Web应用_AngularJS简介(1)

一、基本概念

1. 客户端模板

传统的多页面的Web应用程序都是通过装配和连接服务在后台来创建HTML代码的。而Angular则以不同的方式把模板和数据推送到浏览器来装配它们，而服务器角色只是为模板提供静态的资源以及为模板适当地提供数据。

例1.1：

<html>

      <head>

            <meta charset= "utf-8" />

            <title></title >

      </head>

      <body ng-app= "HelloApp">

            <div ng-controller= "HelloController">

                  <p>{{text}}</p >



            </div>

            <script src= "js/angular.js" type= "text/javascript" charset="utf-8" ></script>

            <script type= "text/javascript">


(function( window){


var HelloApp =window.angular.module( 'HelloApp',[]);




//逻辑写在这里


HelloApp.controller('HelloController', function($scope ){

                              $scope.
text = 'Hello,World' ;

                        });

                  })(
window);


</script>

      </body>

</html>

与以往开发的不同对比：

1.不在用类或者ID来标识

2.不在操作Dom元素

3.增加ng-的前缀命令

模型/视图/控制器(MVC)

Angular 应用程序中，视图就是文档对象模型 (DOM) ，控制器是 JavaScript 类，最后模型中的数据便是存储在对象中的属性(属性值)。

MVC 背后的核心思想是你可以在你的代码中清晰的分离数据管理(模型)，应用程序逻辑(控制器)以及给用户呈现数据(视图)。

视图会从模型中获取数据来显示给用户。当用户通过点击或者输入操作与应用程序进行交互时，控制器就通过修改数据模型来响应用户的操作。最后，被修改的模型会通知视图它已经发生了变化，因此视图可以更新它所显示的信息。

3. 数据绑定

当你在操作UI中的数据，大量的获取，修改，插入，就需要做一些想当不平凡的工作的来确保数据的正确性。但在Angular中我们可以不用编写代码就能处理好所有这些工作，只需要声明用户界面的哪些部分对应哪些JavaScript属性，即可同步状态，这种风格被称为数据绑定。

例1.3（我们在例1.1上修改）：

<div ng-controller ="HelloController">//当input修改时跟着改变

<input type= "text" ng-model= 'text' value= "" /> //这里需要注册一个改变值的监听事件。

<p>{{text}}</p > //随文本框的改变而改变

</div>

4、

依赖注入

在 HelloController 中有很多东西都可以重复，在这里我们并没有编写。例如，$scope 对象会将数据绑定自动传递给我们；我们不需要通过调用任何函数来创建它。我们只是通过将它放置在 HelloController 的构造器中来请求它。

5. 指令

Angular强大的Dom解析引擎，它允许你扩展HTML的语法，就是你可以编写你的模板如HTML一亲样。前面使用到的ng-app、ng-controller、ng-model，我们称之为HTML的扩展指令。它们可以用于声明设置你的应用程序如何工作或者创建可复用的组件。

二、使用指令更新DOM

1.通过自定义扩展HTML语法，做任何你能想到在模板中要做的事情.

当无法通过内置指令来处理浏览器事件和修改DOM时，我们就是时候来定义自己的指令了。

服务一样, 通过 module 对象的 API 调用它的 directive()函数来定义指令, 其中 directiveFunction 是一个工厂函数用于定义指令的功能(特性).

var appModule = angular.module('appModule', [...]);

appModule.directive('directiveName', directiveFunction);

2. Angular 带有几个适用于单页应用程序的不错的功能来自动增强元素. 其中之一个不错的特性就是 Angular 让你在表单内的 input 中声明验证状态, 并允许在整组元素通过验证的情况下才提交.

<div>First name: <input ng-model= 'user.first' required ></div>

<div>Email: <input type='email' ng-model='user.email' required></div>

示例：

Your Order

总结：

1. ng-app 属性告诉 Angular 它应该管理页面的哪一部分。由于我们把它放在元素中，这就会告诉 Angular 我们希望它管理整个页面。这往往也是你所希望的，但是如果你是在现有应用程序中集成 Angular 并使用其他方式管理页面，那么你可能希望把它放在应用程序中的某个

元素中。

2.ng-controller 在 Angular 中，你用于管理页面某个区域的 JavaScript 类被称为控制器。通过在 body 标签中包含一个控制器，那么说明我的这个 CartController 将会管理和之间的所有东西。

3.ng-repeat 的意思就是给被称为 items 数组中的每个元素都复制一次当前

里面的 DOM 结构。在每一个复制的 div 副本中，我们都会给当前元素设置一个名为 item 的属性，这样我们就可以在模板中使用它.

4{{item.title}} 正如我们在 "Hello, World" 例子中所示，数据绑定通过 {{ }} 让我们将一个变量的值插入到页面某部分中并保持数据同步。

5.{{item.price | currency}} Angular 自带了一个被称为过滤器的特性来让我们转换文本，在这里我们捆绑了一个被称为 currency 的过滤器用于给我们处理这里的美元格式操作。

6.<button ng-click='remove($index)'>Remove</button> 击这个按钮时调用 remove() 函数

7. function ShoppingController($scope, $http){ $http.get('/products').success(function(data, status, headers, config){ $scope.items = data; }); } $http,类似JQuery中Ajax对象。

8.可使用自定义的命令

9.一个不错的特性，来增强HTML的功能。

posted @ 2016-03-06 20:45 taosilly 阅读(114) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

海涛

AngularJS开发下一代Web应用_AngularJS简介(1)

Your Order

公告