• angular学习


    基本知识:http://www.runoob.com/angularjs/angularjs-tutorial.html

    下载angularjs网址:http://www.bootcdn.cn/angular.js/

    AngularJS概念:

    1.MVC

    封装数据代码(model),应用逻辑代码(controller),页面渲染数据代码(view),三层独立分离

    Angular中,视图就是Documenet Object Model, 控制器就是Javascript类,数据模型就是存储在对象的属性中

    2.数据绑定

    数据绑定可以自动将model和view间的数据同步,Angular实现数据绑定的方式是把model作为数据源,view始终是model的投影,当model发生变化时,会自动反映在view上

    3.依赖注入

    Angular的依赖注入是获取它所需要的东西,而不创建它们所依赖的东西(一句话 ---> 没事你不要来找我,有事我会去找你。)

    4.Angular数据绑定原理:使用脏检查比较数据是否发生了变化

    知道变量发生变化一般有两种情况

    (1)一是通过固定的接口改变值,如set()方法,缺点是写法繁琐,每个属性都要写一个set方法,

    (2)二是脏检查,将对象复制一份快照,在某个时间比较现在对象与快照的值,如果不一样就说明发生了变化,这个策略要保留两份,而且要遍历对象,比较每一个属性,比较消耗性能。angular中所有带ng-开头的事件执行后,都会触发脏检查

    页面动态显示时间例子

    demo_01.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div ng-app>
            <div ng-controller="firstController">
                <div ng-bind="date"></div>
            </div>
        </div>
        <script type="text/javascript" src="../common/angular/angularjs.js"></script>
        <script type="text/javascript" src="demo_01.js"></script>
    </body>
    </html>

    demo_01.js

    /**
     * Created by Administrator on 2017/7/21.
     */
    
    var firstController = function($scope){
        //new 一个时间
        $scope.date = new Date();
    
        //每隔一秒执行一次
        setInterval(function () {
            //通过 $apply 方法进行脏检查,从而动态改变页面数据
            $scope.$apply(function () {
                $scope.date = new Date();
            });
        },1000);
    }

     $apply() 说明:

     $apply()只是进入angular的上下文中,通过 $digest() 方法去触发脏检查,在调用 $digest() 方法时,angular会先执行angular的 $eval() 方法,如果 $eval() 解析失败会抛异常,所以不建议直接调用 $digest() 方法,而应该使用 $apply() 方法,先让 $eval() 方法进行校验,数据合法了再执行下文, $apply() 如果不给参数,会检查$scope里所有监听的属性,推荐给上

     $digest() 说明:

    所有 $scope 和 $scope的子类会进行脏检查,脏检查又会触发 $watch() 方法,这样实现了数据的双向绑定

     $watch() 说明:

    angularJs内部的wath实现了页面随model的变化而变化,在  $digest() 方法执行时,如果  watch 观察的 value 与上次执行不一样时,就会被触发

    $provider说明:

    定义服务$provider,服务本身是任意对象,angular是用$provider对象来实现自动注入的,注入机制通过调用provider的 $get() 方法,把得到的对象作为参数进行关联

    定义服务的方式: $provider.provider()

    $provider.factory说明:

    fanctory方法直接把一个函数当成是一个对象的 $get() 方法,返回的类容可以是任何类型

     

    例子

    demo2.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div ng-app="myApp">
        <div ng-controller="myController">
           {{myProvider}}
        </div>
    </div>
    <script type="text/javascript" src="../common/angular/angularjs.js"></script>
    <script type="text/javascript" src="demo2.js"></script>
    </body>
    </html>

    demo2.js

    /**
     * Created by Administrator on 2017/7/22.
     */
    /**
     * angular.moudle(name,[requires],configFn)
     * 第一个参数:moudle 的名称,第二个参数:需要依赖其他的模块的模块名,不需要就写 [],第三个参数:是一个function,用于写一些配置
     * configFn会在模块初始化时执行,这里可以配置模块的服务
     * 第三个参数的function()里注入 $provider 对象,可以用 $provide.provider() 自定义服务
     */
    var myApp = angular.module('myApp', [], function ($provide) {
    
        //自定义服务(这种自定义服务的方式不太常用,这只是一种用法)
        $provide.provider('myProvider', function () {
            this.$get = function () {
                return {message: 'myProvider message'};
            }
        });
    
        //自定义服务(常用这种方式注入服务)(返回类型必须是对象)
        $provide.service('myService', function () {
            return {name:'张三'};
        });
    
        //自定义工厂(返回类型可以是任何类型)
        $provide.factory('myFactory', function () {
            return [1, 2, 3, 4, 5];
        });
    
    });
    
    //controller
    myApp.controller('myController', function ($scope, myProvider, myService, myFactory) {
        console.log(myProvider);
        console.log(myService);
        console.log(myFactory);
        $scope.myProvider = myProvider.message;
    });
    //这里的 service  factory 与上面用法一样,只是写法不同
    //myApp.service();
    //myApp.factory();

     

  • 相关阅读:
    Dsl学习笔记-3
    Dsl学习笔记-2
    Dsl学习笔记-1
    多线程学习笔记
    DataGrid研究笔记-3
    DataGrid研究笔记-2
    从基础到分析,聊一聊企业报表平台的建设规划!
    深度解读|数据化管理的四个层次
    干货:实现数据可视化的几个工具选择(工具+编程语言)
    案例分享|某医药集团的BI建设案例
  • 原文地址:https://www.cnblogs.com/skyessay/p/7215343.html
Copyright © 2020-2023  润新知