angularjs 总结(一)

最新推荐文章于 2024-10-05 01:22:45 发布

chenxiayin2741

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量89

点赞数

文章标签： javascript runtime ViewUI

原文链接：https://my.oschina.net/felumanman/blog/330308

版权

angularjs-bootstrap

放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于<html>标签中。

<style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>

 <div ng-app class="ng-cloak">{{1+1}}</div>

里面的”ng-cloak”，这个是用于在angular.js编译完成之前, 编译完成后这个class或属性会被删除

也可用 <div ng-bind=""></div>代替，这样未解析之前，用户不会看到未解析的{{1+1}}了。

directive

directive是一个当编译器在dom中遇到会执行的一个函数，有内置也可自定义。

directive分为 elemet(E) class(C) attribute(A) 注释(M) 四种

<ng-bind></ng-bind>
<div class="ng-bind:exp"></div>
<div ng-bind="exp></div>
<!--directive ng-bind exp-->

concepts

angular启动过程

1 浏览器加载HTML，将HTML标签转换成DOM对象；

2 浏览器加载angularjs

3 angularjs等待DOMContentLoaded事件

4 angularjs需找ng-app指令，指定应用边界的范围

5 如果ng-app有指定module，将被用作配置$injector

6 $injector用于创建$complie 和 $rootScope

7 $complie 用于编译和链接 $rootscope 根作用域

8 ng-init 指令在对应的scope中创建name属性并对其赋值如：<div ng-init="name = 'test'">{{name}}</div>

9 将'{{name}}'的值插入表达式的队列中，最终显示为'test'.

Runtime

dirty checking (脏检查)，将原有对象复制一份快照，在某个时间比较现在对象与快照的值，如果不一样表明发生变化，这个策略要保留俩分变量，而且要遍历对象，比较每个属性，会有一个的性能问题。

AngularJs采用的就是此方法。但不会脏检查所有的对象，当对象绑定到html中，这个对象添加为检查对象。属性也是如此在AngularJs程序初始化时，会将绑定的对象的属性添加为监听对象(watcher), 也就是说一个对象绑定了N个属性，就会添加N个watcher。

angularjs $apply源码 ：

// 1 浏览器通过 event-loop 触发angularjs的脏检查方法（也就是angularjs通过调用$scope.$apply( stimulusFn )进入 angular execution context）。

function$apply(expr) {
　　try {
　　
　　    //2 angularjs通过内置的$eval()解析表达式
　　　　return $eval(expr);
　　} catch(e) {
　　    
　　    //出现错误给提示
　　　　$exceptionHandler(e);
　　} finally {
　　    
　　    //3 如果表达式合法，则通过$digest()方法进行所属scope及子scope进行脏检查
　　　　$root.$digest();
　　}
}

4 当$digest()方法触发时，$watch()观察的val 与上次执行时的不一样，就会被触发，从而对特定的DOM从新赋值

Scope

view与contorller的纽带

Controller

controller的职责是构建model,并通过回调函数将其model推送到view中。view是当前scope和tamplate(HTML)的映射。scope是指挥model到view以及向controller发送event的纽带。

Model

Model可以理解为数据对象，它作用是与tamplate集合产生视图。

View

template与model结合产生view,最终呈现为浏览器DOM。

此图通俗点讲就是其他很多模板引擎，通过tempalte和model 合并成HTML字符串，再通过类似innerHTML方法渲染到DOM上，当数据改变，Model变化，需要重新也Tempate合并，产生HTML字符串重新渲染。

angularjs模板引擎通过compliter查找directives，依次在model中设置watches。一个一直更新的view，不需要重新拼接model和template，model成为唯一数据来源。

Directives

Directive是一个行为或DOM转换，允许你以生命的方式扩展HTML标签例子：

<!DOCTYPE HTML>
<html ng-app="myDirective">
<head>
    <meta charset="UTF-8">
    <title>directive</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body ng-controller="MyCtrl">
<div ng-model="content" contenteditable="true">My Little Dada</div>
<pre>modelValue = {{content}}</pre>
<button ng-click="reset()">reset(change model)</button>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    angular.module("myDirective",[])
            .directive("contenteditable",function() {
                return {
                    require:'ngModel',
                    link:function (scope, element, attr, ngModel) {
                        function setVal() {
                            ngModel.$setViewValue(element.text());
                        }

                        // veiw -> model
                        element.bind("keyup",function() {
                            scope.$apply(setVal);
                        });
                        // model -> view
                        ngModel.$render = function(val) {
                            console.log("render running");
                            element.html(val);
                        };
                        //init
                        setVal();
                    }
                }
            }
    ).controller("MyCtrl",function($scope) {
                $scope.reset = function() {
                        $scope.content = "My Little Dada";
                };
            });
</script>
</body>
</html>