angularjs简单笔记

随手记的一些知识点，，没有长篇大论的原理，，不喜勿喷 ^*_*^

Angularjs可以构建一个单一页面应用（SPAs），整个页面不跳转，通过AJAX进行局部刷新

Angularjs：双向数据绑定，可以避免书写大量的初始代码

         Html内容会被再次渲染，本来是静态的html标签，变为了动态的页面模块

         依赖注入

在angularjs中尽量不要使用全局变量

Angularjs--执行流程

  1、启动（startup）-展示“hello world”

  2、执行期（runtime）-angularjs执行概览

  3、作用域（scope）-视图和控制器的集合区

  4、控制器（controller）-应用的行为

  5、模型（model）-应用的数据

  6、指令（dirctives）-扩展html语法

  7、过滤器（filters）-数据本地化

  8、注入器（injector）-聚合你的应用

  9、模块（module）-配置注入器

  10、$-angularjs的命名空间

MVC解耦 各司其职

1、双向数据绑定（ng模块）：{{el}}  作用域：简单的数据对象

  Angularjs模块：代表一个完整的业务功能的单元

  模块初始化函数：angular.module(“模块名称”,[]);返回新创建的模块，或者已经存在的模       

                  块

            第一个参数：模块名称

            第二个参数：当前函数依赖列表组合，有利于代码重用

一个模块包含：view（html代码）controller（js代码，作为数据的搬运工）

为了防止函数再次变为全局变量，违反了angularjs最初的意愿，所以，一般使用方式是不接收，直接调用：

angular.module("myApp",[])
        .controller("init",function($scope){
            $scope.msg= "xiaohong";
        });

一个controller对应的是一个html片段的初始化过程

  手动启动ng-app，启动模块：angular.bootstrap(documnt,[‘myapp’])

  如果在body中使用ng-app每个页面只能有一个自动启动的ng-app

也可以同时对多个片段进行处理：

<bodyng-app = "myapp">
<divng-controller="haha">
    <span>hello {{usname}}</span>
</div>
<divng-controller="init">
<span>nihao {{msg}}</span>
</div>
</body>
<scriptsrc = "angular.min.js"></script>
<script>
angular.module("myapp",[])
        .controller("haha",function($scope){
            $scope.usname= "world";
        }).controller("init",function($scope){
            $scope.msg= "164896465146";
        });

</script>

 

2、作用域：两种

$rootScope 根作用域，对应的是一个模块，每个模块有一个rootScope

$scope：子作用域，对应一个html片段，一个ng-controller标记一个scope，不同的  

        controller之间要进行数据交互，只能用rootScope进行依赖注入

   （先从小范围找，在从大范围找）

强制向上找变量：使用$parent   $parent.uname;

 

 Ng-repeat :遍历数据对象 比如说user对象：

      Ng-repeat = “user in users”  users是$scope作用域中的一个对象

3、过滤器

       作用是接受一个输入，通过某个规则进行处理，然后返回处理后的结果，主要用在

       数据的格式化上

Angularjs内置了一些过滤器，他们是

 Currency（货币）{{money | currency:’￥’}}默认是美元符号

Date（日期）{{birthday | date:’yyyy年MM月dd日’}}

Filter（子串匹配） 用来处理数组的，参数|filter:’过滤条件’ 

         可以直接在{{}}中使用filter，跟在表达式后面用 | 分割

        也可以多个filter连用，上一个filter的输出将作为下一个

        filter的输入

Json（格式化json对象）

limitTo（限制个数）

Lowercase（小写）

Uppercase（大写）

Number（数字）

orderBy（排序）