AngularJS主要组成部分及小实例

来源：互联网发布：java读取文件编辑：程序博客网时间：2024/04/30 13:30

AngularJS的主要组成部分：
启动(startup) - 展示"hello world!"
执行期(runtime) - AngularJS 执行期概览
作用域(scope) - 视图和控制器的集合区
控制器(controller) - 应用的行为
模型(model) - 应用的数据
视图(view) - 用户能看到的
指令(directives) - 扩展HTML语法
过滤器(filters) - 数据本地化
注入器(injector) - 聚合你的应用
模块(module) - 配置注入器
$ - AngularJS的命名空间(namespace)

1.启动：
DOMContentLoaded事件：是firefox下特有的Event
if (document.addEventListener)
{document.addEventListener("DOMContentLoaded", init, false);}
当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
http://www.tuicool.com/articles/aae2me

2.执行期：
3.作用域：作用域是用来检测模型的改变和为表达式提供执行上下文的。它是分层组织起来的，并且层级关系是紧跟着DOM的结构的。

4.控制器：
视图背后的控制代码就是控制器。它的主要工作内容是构造模型，并把模型和回调方法一起发送到视图。视图可以看做是作用域在模板(HTML)上的"投影(projection)"。而作用域是一个中间地带，它把模型整理好传递给视图，把浏览器事件传递给控制器。控制器和模型的分离非常重要，因为：
控制器是由Javascript写的。Javascript是命令式的，命令式的语言适合用来编写应用的行为。控制器不应该包含任何关于渲染代码（DOM引用或者片段）。
视图模板是用HTML写的。HTML是声明是的，声明式的语言适合用来编写UI。视图不应该包含任何行为。
因为控制器和视图没有直接的调用关系，所以可以使多个视图对应同一个控制器。这对"换肤(re-skinning)"、适配不同设备（比如移动设备和台式机）、测试，都非常重要。

5.模型：
模型就是用来和模板结合生成视图的数据。模型必须在作用域中时可以被引用，这样才能被渲染生成视图。和其他框架不一样的是，Angularjs对模型本身没有任何限制和要求。你不需要继承任何类也不需要实现指定的方法以供调用或者改变模型。模型可以是原生的对象哈希形式的，也可以是完整对象类型的。简而言之，模型可以是原生的Javascript对象。

6.视图：
AngularJS和其它模板系统不同。它使用的是DOM而不是字符串。模板仍然是用HTML字符串写的，并且它仍然是HTML。浏览器将它解析成DOM，然后这个DOM会作为输入传递给模板引擎，也就是我们的编译器。编译器查看其中的指令，找到的指令后，会开始监视指令内容中相应的模型。这样做，就使得视图能"连续地"更新，不需要模板和数据的重新合并。你的模型也就成了你视图变化的唯一动因。

7.指令：
一个指令就是一种"由某个属性、元素名称、css类名出现而导致的行为，或者说是DOM的变化"。

8.Filters过滤器
过滤器扮演着数据翻译的角色。一般他们主要用在数据需要格式化成本地格式的时候。它参照了UNIX过滤的规则，并且也实现了"|"（管道）语法。

9.模块和注入器
每个AngularJS应用都有一个唯一的注入器。注入器提供一个通过名字查找对象实例的方法。它将所有对象缓存在内部，所以如果重复调用同一名称的对象，每次调用都会得到同一个实例。如果调用的对象不存在，那么注入器就会让实例工厂(instance factory)创建一个新的实例。
一个模块就是一种配置注入器实例工厂的方式，我们也称为"提供者(provider)"。
注入器真正强大之处在于它可以用来调用方法和实例化的类型。这个精妙的特性让方法和类型能够通过注入器请求到他们依赖的组件，而不需要自己加载依赖。

10.AngularJS 命名空间
为了防止意外的命名冲突， AngularJS为可能冲突的对象名加以前缀"$"。所以请不要在你自己的代码里用"$"做前缀，以免和AngularJS代码发生冲突。

<!DOCTYPE html><html  ng-app="timeExampleModule">    <head>        <meta charset="utf-8">        <title>AngularTest</title>        <script src="https://code.angularjs.org/1.1.0/angular.min.js"></script>    </head>    <body>   1.启动： <p ng-init=" name='World' ">Hello {{name}}!</p> <!--ng-init指令将"World"赋给作用域里的name这个变量。通过{{name}}的替换，整个表达式变成了"Hello World"。--> 2.执行期：<br/> <input ng-model="user"> <p>Hello {{user}}!</p> <!--下面解释了"hello XXX"的例子是怎么样实现"将用户输入绑定到视图上"的效果。    在编译阶段：        input上的ng-model指令给<input>输入框绑定了keydown事件；        {{user}}这个变量替换表单式建立了一个 $watch 来接受 user 变量改变的通知。    在执行期阶段：        按下任何一个键(以X键为例)，都会触发一个 input 输入框的keydown事件；        input 上的指令捕捉到 input 里值得改变，然后调用 $apply("user = 'X';")来更新处于AngularJS执行上下文中的模型；        AngularJS将 user='X'应用到模型上；        $digest 循环开始；        $watch 列表检测到了user值的变化，然后通知 {{user}}变量替换的表达式，这个表达式负责将DOM进行更新；        AngularJS退出执行上下文，然后退出Javascript上下文中的keydown事件；        浏览器以更新的文本重渲染视图。--> 3.作用域：<!--演示了{{user1}}表达式在不同的作用域下解析成不同的值-->     <div ng-controller="GreetCtrl" class="redBorder">      Hello {{user1}}!    </div>    <div ng-controller="ListCtrl">      <ol class="redBorder">        <li ng-repeat="user1 in user1s" class="redBorder">{{user1}}</li>      </ol>    </div>    <style>    .redBorder{       border: 1px solid red;       margin: 3px;    }    </style>    <script>    function GreetCtrl($scope) {   $scope.user1 = 'World';}function ListCtrl($scope) {  $scope.user1s = ['Igor', 'Misko', 'Vojta'];}    </script> <br/>   4.控制器： <div ng-controller="MyCtrl">      Hello {{name}}!      <button ng-click="action()">        OK      </button>    </div>   <script>function MyCtrl($scope) {  $scope.action = function() {    $scope.name = 'OK';  }  $scope.name = 'World';}</script>   <br/>5.模型： 模型就是用来和模板结合生成视图的数据<br/><br/>6.视图：<div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE']">      <input ng-model="list" ng-list> <br>      <input ng-model="list" ng-list> <br>      <pre>list={{list}}</pre>       <ol>        <li ng-repeat="item in list">          {{item}}        </li>      </ol>    </div> 7.指令：指令能让你以一种声明式的方法来扩展HTML表示能力<br/><br/> 8.filter过滤器： <div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] ">      Number formatting: {{ 1234567890 | number }} <br>      array filtering <input ng-model="predicate">      {{ list | filter:predicate | json }}    </div>    <br/>9.模块和注入器：<!--当ng-controller实例化构造器的时候，它自动提供了指明的依赖。没有必要去创建依赖、查找依赖、或者提供一个依赖的引用给注入器。-->      <div ng-controller="ClockCtrl">      Current time is: {{ time.now }}    </div>    <script>    angular.module('timeExampleModule', []).factory('time', function($timeout) {    var time = {};    (function tick() {      time.now = new Date().toString();      $timeout(tick, 1000);    })();    return time;  });function ClockCtrl($scope, time) {  $scope.time = time;}    </script>    </body> </html>

源引：http://www.w3cfuns.com/notes/16004/2ea012ec69a8f5b46e970bd1821e0005.html

0 0