zoukankan      html  css  js  c++  java
  • Angularjs之基本概念梳理(一)

    1.Angularjs指令属性ng-app和ng-controller的理解

       ng-app指令-标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指  令,如<div ng-            app>,则AngularJS脚本仅在该<div>中运行。

      ng-controller指令-定义了应用程序控制器。控制器可以初始化数据模型,它在建立模型(model)和视图(view)之间的数据绑定中起到至关重要的作用。AngularJS 使用$scope 对象   来调用控制器。 $scope(相当于作用域、控制范围) 是一个应用象(属于应用变量和函数),用来保存AngularJS Model(模型)的对象。

      

     1 function PhoneListCtrl($scope) {
     2 
     3   $scope.phones = [
     4 
     5     {"name": "Nexus S",
     6 
     7      "snippet": "Fast just got faster with Nexus S."},
     8 
     9     {"name": "Motorola XOOM™ with Wi-Fi",
    10 
    11      "snippet": "The Next, Next Generation tablet."},
    12 
    13     {"name": "MOTOROLA XOOM™",
    14 
    15      "snippet": "The Next, Next Generation tablet."}
    16 
    17   ];
    18 
    19 }

    链接地址:http://www.angularjs.cn/A003  http://www.angularjs.cn/A005


    2.Angularjs的模块化和模块的加载和依赖    

      Angularjs模块-将一个应用程序碎片化,每个单独的模块式AngularJSy应用程序的一部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块。一个模块,其实是一个在应用程序的引导程序中运行的,一个配置的集合和运行块的集合。拆分的原因是,在你的测试中常常需要忽略掉初始化代码,因为这些代码比较难测试。通过把它拆分出来就能在测试中方便地忽视掉它。通过只加载和当前测试相关的模块,也能使测试更专一。

    应用程序运行启动时,加载装配各个模块,然后这些模块的组合,构成了你的应用程序,其中模块之间因为有依赖关系所以会有优先级

    链接地址(http://www.tuicool.com/articles/nAZ3yq  http://www.jb51.net/article/60505.htm)

    配置块

    其实在模块上有一些非常方便的方法,它们就相当于是一个 config 配置块,看例子:

     1 angular.module('myModule', []).
     2 
     3 value('a', 123).
     4 
     5 factory('a', function() { return 123; }).
     6 
     7 directive('directiveName', ...).
     8 
     9 filter('filterName', ...);
    10 
    11  
    12 
    13 // is same as
    14 
    15  
    16 
    17 angular.module('myModule', []).
    18 
    19 config(function($provide, $compileProvider, $filterProvider) {
    20 
    21   $provide.value('a', 123);
    22 
    23   $provide.factory('a', function() { return 123; });
    24 
    25   $compileProvider.directive('directiveName', ...);
    26 
    27   $filterProvider.register('filterName', ...);
    28 
    29 });

    当AngularJS在进行引导启动你的应用程序的时候,它会首先定义所有的常量。然后再在配置块中使用同一个 常量列表 去注册它们。

    一个模块就是一系列配置和代码块的集合,它们是在启动阶段就附加到应用上的。一个最简单的模块由两类代码块集合组成的:

    配置代码块 - 在注入提供者注入和配置阶段执行。只有注入提供者和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。
    运行代码块 - 在注入器被创建后执行,被用来启动应用的,它会在所有的服务配置完毕,注入器被创建完毕之后执行。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。

    模块可以把其他模块列为它的依赖。“依赖某个模块”意味着需要把这个被依赖的模块在本块模块之前被加载。换句话说被依赖模块的配置块会在本模块配置块前被执行。运行块也是一样。任何一个模块都只能被加载一次,即使它被多个模块依赖。所以模块加载具有优先级

    依赖关系

    一个模块,它知道所有它所依赖的其它模块,也就是说在它加载起来前,需要将它所依赖的其它所有模块给加载起来。换句换说,对于需要配置块的模块来说,配置块一定是在需要它的模块初始化之前就被初始化完毕了。 同样的,运行块(run block)也是这样的,一个模块,会且仅会被加载一次,无论有多少个模块引用了它,它都只会被加载一次的。

     

     

    小插曲:模板 视图组件被AngularJS用下面这个模板构建出来:

     1 <html ng-app>
     2 
     3 <head>
     4 
     5   ...
     6 
     7   <script src="lib/angular/angular.js"></script>
     8 
     9   <script src="js/controllers.js"></script>
    10 
    11 </head>
    12 
    13 <body ng-controller="PhoneListCtrl">
    14 
    15  
    16 
    17   <ul>
    18 
    19     <li ng-repeat="phone in phones">
    20 
    21       {{phone.name}}
    22 
    23     <p>{{phone.snippet}}</p>
    24 
    25     </li>
    26 
    27   </ul>
    28 
    29 </body>
    30 
    31 </html>
    View Code
     1 <html ng-app>
     2 
     3 <head>
     4 
     5   ...
     6 
     7   <script src="lib/angular/angular.js"></script>
     8 
     9   <script src="js/controllers.js"></script>
    10 
    11 </head>
    12 
    13 <body ng-controller="PhoneListCtrl">
    14 
    15  
    16 
    17   <ul>
    18 
    19     <li ng-repeat="phone in phones">
    20 
    21       {{phone.name}}
    22 
    23     <p>{{phone.snippet}}</p>
    24 
    25     </li>
    26 
    27   </ul>
    28 
    29 </body>
    30 
    31 </html>

     

  • 相关阅读:
    ubuntu开机挂载磁盘盘出现:Metadata kept in Windows cache, unable to mount
    ubuntuaptgetoldversion
    evince 41.2ubuntu 16.04snap
    ubuntu坚果云安装deb后启动不了
    电影票分析
    jieba分词讲解2
    期末总结建议
    软件架构师工作看法
    jieba分词讲解1
    1
  • 原文地址:https://www.cnblogs.com/Spring-Rain/p/4888446.html
Copyright © 2011-2022 走看看