Angularjs学习笔记

最新推荐文章于 2018-08-08 17:56:40 发布

Mr3-Water

最新推荐文章于 2018-08-08 17:56:40 发布

阅读量561

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/zmj132113/article/details/50826705

版权

Angular.js
0，为什么开发Angularjs
Angularjs致力于减轻于开发人员在开发Ajax应用过程中的痛苦。

1，概念
* 客户端模板
Angular中，模板和数据都会被发送到流浪器中，然后在客户端进行装配。
什么意思呢？
也就是传统中的开发中，用户发起一个http请求，请求一个url的资源，服务器端会将根据用户发送到服务器端的数据进行响应，然后将数据装配到模板中，最后将html发送到浏览器中，浏览器会html进行解析。
但是，Angularjs只是将后台的数据获取得到，然后装配到模板中。
* MVC
MVC核心概念：把管理数据的代码，应用逻辑代码，向用户展示数据的代码清晰的分离开。
Angularhs应用中
视图就是Document Object Moel
控制器就是JavaScript类
模型数据则是被存储在对象中的属性中
* 数据绑定
数据绑定可自动将model和view间的数据同步
Angularjs实现数据绑定的方式，可以让我们把model当作程序中唯一可信度饿数据来源。view始终是model的投影。
当model发生变化时，会自动反映到view上。

* 经典模板系统中的数据绑定
大多数模板系统中的数据绑定都是单向的。
把模板与model合并在一起变成view，如果在合并之后，model发生了变化，不会自动反映到view上。
用户在view上的交互也不会反映到model中，开发者必须写大量代码不断地在view与model之间同步数据

* Angularjs模板中的数据绑定
模板是在浏览器中编译的，在编译阶段中产生了一个实时更新live的视图
不论在model或是view上发生了变化，都会立刻反映到对方。
model成为程序中唯一真实的数据来源，极大地简化了开发者需要处理的编程模型。

* 依赖注入
依赖注入是一种软件的设计模式，用来处理代码的依赖关系
Angular的依赖注入只是简单的获取他所需要的东西，而不需要创建那些他们所依赖的东西。

2,初步学习angluarjs
推荐使用的编写angluarjs的工具是webStorm
首先下载angularjs，下载之后在webStorm中新建一个vender目录，放置类库。

（1）数据绑定
<body ng-app>
    <input type="text" />
    {{1000}}
    /**
        在body标签中添加ng-app表示这个body里面内容要使用angularjs来管理。
        ag-app指令告诉Angular应该管理页面中的哪一块。
        而上面的{{1000}},大括号表示angluarjs的表达式。在页面中输出的是1000，而不是{{1000}}。
        {{name}}如果是这样的话就是会没有输出，因为这个name变量是没有定义的，{{“name”}}这种情况下就是输出name这个字符。

        Angularjs表达式
        angular表达式 通过$parse服务解析执行
        与Javascript表达式的区别
        1，属性求值：所有属性的求值是对于scope的，而javaScript是对于window对象的。
        2，宽容：表达式求值，对于undefined和null，angular是宽容的，但是JavaScript会产生NullPointerException
        3，没有流程控制语句：在angular表达式里，不能做以下任何的事：条件分支，循环，抛出异常。
        4，过滤器（filters）：我们可以就讲表达式的结果传入过滤器链（filter chains）

        如何绑定数据---使用了一个ng-model来设置属性值
        <input type="text" ng-model="name" value="" />
        上面的代码声明一个model，而在这个输入框中输入数据就会将数据显示在表达式中的{{name}}
        而且是同时放生改变的，而且angular数据绑定是双向的
        <input type="text" ng-model="name" value="" />
        当上面的文本输入框发生改变的时候，下面的表达式和文本输入框会同时改变的。
        {{name}}
        <input type="text" ng-model="name" value="" />
    */
</body>
<script>

</script>


3，控制器
下面是angularjs有关于控制器的例子。
    <body ng-app>
        <div  ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
            {{name}}
            {{age}}
        </div>
        <script type="text/javascript" src="../app/index.js" />
    </body>

    index.js
    var firstController = function($scope){
        //$scope全局作用域
        //声明一个model
        $scope.name  = '张三';
        $scope.age = 30;
    }
总结：
1，控制器的定义，首先需要在js文件里面定义一个类，这个类就是控制器,而这个类中的构造参数中会有一个全局作用域$scope,使用这个全局作用域
可以访问这个这个控制器所管理的范围内的变量。
var firstController = function($scope){
    $scope.name = "张三";
    $scope.age = 34;
}
<body ng-app>
    <div ng-controller="firstController">
        <input type="text" ng-model value="" name="name" />
        {{name}}
        {{age}}
    </div>
</body>

3,指令-(ng-bind)
Javascript是单进程的，当加载页面的时候，是从上往下的，如果加载速度比较慢的，加载{{name}}这个表达式，会很快将这个表达式填充。
但是在执行
{{name}}
<script>
    alert(3);//在执行这行代码的时候，angularjs的js文件链接还没有加载进来。所以{{name}}这行代码没有渲染出来，所以是在页面中显示{{name}}
</script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

所以使用ngBind这个属性可以解决掉这个问题
<div ng-bind="name"></div>
<div ng-bind="age"></div>

4，angularjs多控制器
<div ng-controller="firstController" >
    <input type="text" ng-model="name" value=" " />

    <div ng-controller="secondController">
        <input type="text" ng-model="name" value=" "/>
    </div>
</div>

index.js
function firstController = function($scope){
    $scope.name = "张三";
}

function secondController = function($scope){
    $scope.name = "李四";
}

angularjs的作用域访问是跟javascript一样的，都是内部的不能给外部访问，外部的变量是可以给内部的代码使用。

5，$scope里面的$apply
scope是一个指向应用model的object，也是表达式的执行上下文
scope被放置于一个类似应用的DOM结构层次结构中。
{{date}}

index.js
var firstController = function($scope){
    $scope.date = new Date();
    //每隔一秒就更新一下时间
    setInterval(function(){
        $scope.date = new Date();
    },1000);
}


 手动出发脏检查
 $apply仅仅只是进入angularjs context ,然后通过$digest去触发脏检查
 $apply如果不菲参数的话，会检查该$scope里面的所有监听的属性，推荐给上参数。
 setInterval(function(){
    $scope.$apply(function(){
        $scope.date = new Date();
        //---会去触发脏检查
    });
 },1000);

 ￥digest()
 所属的scope和其所有子scope的脏检查，脏检查又会触发$watch(),整个Angular双向绑定机制就活了起来。
 不建议直接调用$digest()，而应该使用$apply(),$apply()其实不能把信直接送给$digest，之间还有$eval门卫把关，如果$apply带的表达式
 不合法，$eval会把错误送交$exceptionHandler，合法才会触发digest，所以更安全。 



 什么是angularjs过滤器
 是用于对数据格式化，或则筛选的函数，可以直接在模板中通过一种语法使用
 {{expression | filter}}
 {{expression | filter1 | filter2 }}
 {{expression | filter1:param }}



 过滤器种类
 number
 currency
 date
 json
 limitTo
 lowercase
 uppercase
 filter(string|function|object)
 number
 orderBy(string|function|object)