angular应用
发布在angularjs2016年4月13日view:1673
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

我们知道angular是一种MVC模式的js框架,MVC是什么? Model View Controller

Model是数据模型,View是视图,Controller是控制器 那么在angular中各个部分都是怎么实现的呢?

看下面的代码: HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="myModule">//视图
    <div ng-controller="controller1">
        {{a.name}}
        <div my-directive></div>
    </div>
</body>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
</html>

javascript部分

var myModule=angular.module("myModule",[]);
        myModule.controller("controller1",["$scope",function($scope){//控制器
            $scope.a={//数据模型
                name:"fyy",
                sex:"female"
            };
        }]);
        myModule.directive('myDirective', function() {
            return {
                restrict: 'A',
                replace: true,
                scope: true,
                template: '<span>hello world</span>',
                compile: function (tElement) {
                    console.log('complile: ', tElement);
                    return function (scope, elem) {

                    }
                }
            }
        });

在html代码中,我们通过指令来确定视图的展示,那么angularjs的视图实际上就是通过指令来实现的 controller是控制器 而$scope.a是数据模型,数据模型放在$scope下

scope

指令 angularjs内置了63个指令 自定义指令:

myModule.directive('namespaceDirectiveName', function () {
        return  {
            restrict: string,//指令的使用方式,包括属性,标签,类,注释[A,E,M,C]
            priority: number,//指令执行的优先级
            template: string,//指令使用的模板,用HTML字符串的形式表示
            templateUrl: string,//从指定的url地址加载模板 当template的内容较多,不易于在template中编写的话,就可以写一个独立的html页面,通过templateUrl来加载指定的模板
            replace: true/false,//是否用模板替换当前元素,若为false,则append在当前元素上
            transclude: true/false,//是否将当前元素的内容转移到模板中
            scope: true/false/object,//指定指令的作用域
            controller: function controllerConstructor($scope, $element, $attrs, $transclude) {...
            },//定义与其他指令进行交互的接口函数
            require: string,//指定需要依赖的其他指令
            link: function postLink(scope, iElement, iAttrs) {...
            },//以编程的方式操作DOM,包括添加监听器等
            compile: function (tElement, tAttrs, transclude) {
                return
                {
                    pre: function preLink(scope, iElement, iAttrs, controller) {...
                    },
                    post: function postLink(scope, iElement, iAttrs, controller) {...
                    }
                }

            }//编程的方式修改DOM模板的副本,可以返回链接函数
        }
    });

当templateUrl被应用在多个地方的时候,我们可以将这个模板缓存到angular内置的$templateCache中:在注射器加载完所有模块时,run方法执行一次

myModule.run(function($templateCache){
     $templateCache.put("hello.html","<div> Hello everyone!!!</div>
});

在directive中需要用到的话:template:$templateCache.get(”hello.html”);

transclude为true时,就将指令标签内原有的标签保存,放到特定的位置去,放置的位置在template决定:

template:"<div>hello<div ng-transclude></div></div>

compile函数是用来对模板自身进行转换的,link函数负责模型和视图之间进行动态关联(比如绑定事件监听器) compile只在编译阶段运行一次,对于指令的每个实例,link函数都会执行一次

link函数:attrs是元素的属性 link(scope,element,attrs){ }

指令与控制器的交互:如果我们在两个控制器中都需要用到一个指令的话怎么做:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <loader howToLoad="loadData()">滑动加载</loader>
        </div>
        <div ng-controller="MyCtrl2">
            <loader howToLoad="loadData2()">滑动加载</loader>
        </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="Directive&Controller.js"></script>
</html>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.loadData=function(){
        console.log("加载数据中...");
    }
}]);
myModule.controller('MyCtrl2', ['$scope', function($scope){
    $scope.loadData2=function(){
        console.log("加载数据中...22222");
    }
}]);
myModule.directive("loader", function() {
    return {
        restrict:"AE",
        link:function(scope,element,attrs){
            element.bind('mouseenter', function(event) {
                //scope.loadData();
                // scope.$apply("loadData()");
                // 注意这里的坑,howToLoad会被转换成小写的howtoload
                scope.$apply(attrs.howtoload);
            });
        }
    } 
});

前面我们说过,在angular中,directive其实就相当于MVC中的视图,所以我们一定希望一条指令可以用在不同的控制器中,以上就是指令和控制器进行交互的方式。

指令之间的交互:

<!doctype html>
<html ng-app="MyModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="Directive&Directive.js"></script>
</head>

<body>
    <div class="row">
        <div class="col-md-3">
            <superman strength>动感超人---力量</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed>动感超人2---力量+敏捷</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed light>动感超人3---力量+敏捷+发光</superman>
        </div>
    </div>
</body>

</html>

var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
    return {
        scope: {},
        restrict: 'AE',
        controller: function($scope) {
            $scope.abilities = [];
            this.addStrength = function() {
                $scope.abilities.push("strength");
            };
            this.addSpeed = function() {
                $scope.abilities.push("speed");
            };
            this.addLight = function() {
                $scope.abilities.push("light");
            };
        },
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }
    }
});
myModule.directive("strength", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addStrength();
        }
    }
});
myModule.directive("speed", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addSpeed();
        }
    }
});
myModule.directive("light", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addLight();
        }
    }
});

独立scope:每个指令都拥有自己独立的作用域,这样指令之间的scope就不会互相影响。 scope的三种绑定方式: @ = & 当我们需要使用独立作用域,同时又想与父层scope进行交互的话就可以使用这三种绑定策略。 @:单项绑定父层scope,修改父层scope影响本层scope,用来传递字符串 =:双向绑定 &:用来传递父scope函数 具体使用方法请见: http://www.imooc.com/video/3085

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
angularjs

angularjs 学习总结

友情链接 大搜车前端团队博客
我的收藏