zoukankan      html  css  js  c++  java
  • 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();

     

  • 相关阅读:
    Android AHandle AMessage
    android java 与C 通过 JNI双向通信
    android 系统给应用的jar
    UE4 unreliable 同步问题
    UE4 difference between servertravel and openlevel(多人游戏的关卡切换)
    UE4 Run On owing Client解析(RPC测试)
    UE4 TSubclassOf VS Native Pointer
    UE4 内容示例网络同步Learn
    UE4 多人FPS VR游戏制作笔记
    UE4 分层材质 Layerd Materials
  • 原文地址:https://www.cnblogs.com/skyessay/p/7215343.html
Copyright © 2011-2022 走看看