AngularJS1.X攻笔记1-完好无损看

  听说
明天凡是愚人节,这同我来啊关联吧!我可
不思为调侃,但是只是,我这么愚笨怎么才会免让作弄呢?左思右想,我决定于兹启幕闭关,闭关干啥呢?学习!学习AngularJS。以前学习过Angular的,不过好老无因此都忘记的几近了,所以决定好复习一下。这有限天我将大半作几首随笔,记录转本人之读过程。参考用书《AngularJS高级程序设计-Adam
Freeman》,我会参考书中的例证做相同总体,谈谈自己之喻。现在依作者的笔触先整体把握一下,后面再一个一个押。

一、Module对象

  调用angular.module()可以创造一个module对象实例或者返回一个module对象。

  创建:augular.module(“nameApp”,[]),第二独参数声明你如赖之模块对象往往组,不依赖传空数组

  返回就创造的:angular.module(“nameApp”);不指定第二只参数则赶回就创办的名字啊nameApp的模块,如果先无创造是模块则失误

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>module Test</title>
</head>
<body>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var nameApp = angular.module("nameApp",[]);
        console.log(nameApp);
    </script>
</body>
</html>

 

图片 1

  假如去丢第二个参数

图片 2

  得到的module对象的实例有如下方法以及总体性(当然还来其他的,上面很图有)

图片 3

 

  模块是Angular应用的起点,它好同HTML文档的一律有些涉及,可以辅助组织代码和零部件。

二、controller

  1、简单的事例

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>controller Test1</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(不晓得)"}}</h4>
    </div>



    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
       myApp.controller('dayCtrl',function($scope){
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $scope.day = dayNames[new Date().getDay()];

        })
    </script>
</body>
</html>

 

图片 4

  这里我们调模块的controller方法,定义了一个控制器,在工厂函数中声称了$scope依赖,他是一个视图作用域,定义在斯$scope上之道及性质可以当视图中艺术,将控制器绑定到视图的措施是运ng-app指令。

  关于因注入:简单说就算是拿来主义,要为此什么直接将,会有人吃你的。这算对呦,比如你若一百万,然后就有人打一百万于你,想想就爽!!

  2、一个控制器用于一个几近个视图

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>controller Test2</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(不晓得)"}}</h4>
    </div>

    <div ng-controller='dayCtrl'>
        <h4>今天是几号: {{date || "(不晓得)"}}</h4>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $scope.day = dayNames[new Date().getDay()];
            $scope.date = new Date().getDate();

        })
    </script>
</body>
</html>

 

  图片 5

  3、多单控制器多只视图

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>controller Test3</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(不晓得)"}}</h4>
    </div>

    <div ng-controller='dateCtrl'>
        <h4>今天是几号: {{date || "(不晓得)"}}</h4>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $scope.day = dayNames[new Date().getDay()];


        });
        myApp.controller('dateCtrl',function($scope){
            $scope.date = new Date().getDate();
        })
    </script>
</body>
</html>

   效果和方面的例子是如出一辙的。(这个编辑器有待改善啊,代码加粗要碰半龙才方可!)

 三、directive

  指令是干嘛的,感觉指令就是将视图,和另零件为到一道了,方便复用。

  一个简短的例证

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>directive Test1</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4highlight='星期五'>Today is {{day || "(不晓得)"}}</h4><!-- important -->
    </div>

    <div ng-controller='dayCtrl'>
        <h4>今天是几号: {{date || "(不晓得)"}}</h4>
    </div>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $scope.day = dayNames[new Date().getDay()];
            $scope.date = new Date().getDate();

        });
        myApp.directive("highlight",function(){<!-- important -->
            return function(scope,element,attrs){
                if(scope.day == attrs["highlight"]){
                    element.css("color","red");
                }
            }
        })
    </script>
</body>
</html>

 

 图片 6

  比较欣赏星期五,星期五意味着放假,所以做了一个发令,星期五之时节便显得红色。

  分析一下directive的用法,它接受两只参数,第一独凡是依赖令名,第二单凡是一个工厂函数,要求工厂函数返回一个工函数;工人函数中承受三单参数,第一单scope表示以指令的视图的作用域,第二独代表指令所在元素的jq包装对象(ng里面只来个迷离版的jq叫jqLIte),第三独参数表示指令所在元素的特性集合。

四、filter

  1、自己定义一个filter并采用的

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>filter Test1</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(不晓得)" | toDay}}</h4>   <!-- important -->
    </div>

    <div ng-controller='dayCtrl'>
        <h4>今天是几号: {{date || "(不晓得)"}}</h4>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){            
            $scope.day = new Date().getDay();
            $scope.date = new Date().getDate();

        })
        .filter("toDay",function(){ <!-- important -->
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            return function(value){
                return dayNames[value];
            }
        })
    </script>
</body>
</html>

 

   原来我们是在控制器里面格式化数据的,现在我们因此filter在视图中格式化数据,这样更灵活一点。

  filter用法分析:第一个参数为过滤器名字,第二只参数为一个厂子函数,工厂函数里返回一个工人函数,工人函数接受一个参数,为下过滤器的死去活来值。对比一下directive,有麻痹有好像。

  然而然而,我们的highlight呢?想想。。。我们缓解一下,不针对自仿佛用错例子了(上面的例证本来就是没highlight,尴尬),但是本人思念你早已掌握我一旦说啊了,不更改了。

  2、在指令中采取filter

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>filter Test2</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4 highlight='星期五'>Today is {{day || "(不晓得)" | toDay}}</h4>
    </div>

    <div ng-controller='dayCtrl'>
        <h4>今天是几号: {{date || "(不晓得)"}}</h4>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){            
            $scope.day = new Date().getDay();
            $scope.date = new Date().getDate();

        })
        .filter("toDay",function(){
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            return function(value){
                return dayNames[value];
            }
        });

        myApp.directive("highlight",function($filter){  <!-- important --->
            var toDay = $filter("toDay")                 <!-- important --->
            return function(scope,element,attrs){
                if(toDay(scope.day) == attrs["highlight"]){       <!-- important --->
                    element.css("color","red");
                }
            }
        })
    </script>
</body>
</html>

 

  I think you
know!我们以我们的filter用到了directive。当然并无是要是这么干才会缓解者题材,我单想告知您得这么提到。

五、服务(provider,service,factory)

  后面理会发现立即三单还是fprovider,就像三角形和季边行都是多方面形同。这里先充分service感受一下。

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>service Test1</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(不晓得)"}}</h4>
    </div>
    <div ng-controller='dayCtrl'>
        <h4>今天是几号: {{date || "(不晓得)"}}</h4>
    </div>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);    
        myApp.controller('dayCtrl',function($scope,day){      <!--- important -->
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $scope.day = dayNames[day.day];      <!--- important -->
            $scope.date = day.date;        <!--- important -->

        }).service("day",function(){      <!--- important -->
            this.day = new Date().getDay();
            this.date = new Date().getDate();
        })
    </script>
</body>
</html>

 

  原来俺们只要自己以控制器中开创Date对象,从中间取出我们若的值,现在直用day这个服务让咱提供的劳务就好了。

  service用法分析:第一单参数是劳务名字,第二只参数
是一个厂子函数,工厂函数定义你的劳动内容。

六、定义值

  1、先上一个value()方法

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>value test1</title>
</head>
<body>
    <h1 ng-controller="dayCtrl">
        今天是{{date}}号
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.value("nowDate",new Date())          <!-- important-->
        .controller('dayCtrl',function($scope,nowDate){    <!-- important-->
            $scope.date = nowDate.getDate();
        })
    </script>
</body>
</html>

 

   value()方法可用任意值封装起来,用作依赖注入,这就是说有着东西还足以视作依靠注入的对象(不知情就词话严谨否)。

  2、再上一个constant

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>value test1</title>
</head>
<body>
    <h1 ng-controller="dayCtrl">
        今天是{{date}}号
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.constant("nowDate",new Date())             <!-- important-->
        .controller('dayCtrl',function($scope,nowDate){  <!-- important-->
            $scope.date = nowDate.getDate();
        })
    </script>
</body>
</html>

 

  信了若的也罢,这不是同等的呢?是的。自由男人(那本书的作者)是这样说之,constant是概念一个常量,可以当config方法声明的依赖性中运用,value定义的凡变量,不克于config声明的依中动用。

七、使用模块组织代码

  是以此法,我们得以拿不同的机件放在不同之模块,然后声明指,比如说用控制器放在一个模块,将过滤器放在其他一个模块,这样呢就得充分便利的保护了。

  代码时刻到来。。。。搞图吧,好看结构

图片 7

图片 8

图片 9

八、使用模块生命周期工作

  config()方法的函数会以此时此刻模块于加载后调用,而run()方法会在富有模块加载后行。啥意思,我吗尚未看明白,实验一下先。

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>life test</title>
</head>
<body>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",["module1","module2"]);

        myApp.config(function(){
            console.log("myApp config excute:");
        })
        .run(function(){
            console.log("myApp fun excute");
        });

        angular.module('module1',[])
        .config(function(){
            console.log("module1 config excute");
        })
        .run(function(){
            console.log("module1 fun excute");
        });

        angular.module('module2',[])
        .config(function(){
            console.log("module2 config excute");
        })
        .run(function(){
            console.log("module2 fun excute");
        });


    </script>
</body>
</html>

图片 10

  看看这执行之顺序,因为myApp是依赖module1,module2的之所以,module1和module2会先加载,按照config和run的性状我们清楚module1加载后,他的config方法执行,然后加载module2后,执行module2的config方法,然后加载了myApp,myApp的config方法执行,至此所有模块加载了,开始执行run方法,他是依加载成功的各个执行的。用这样的生命周期方法有何用为?我怀疑,config是得针对模块进行局部初始化的安排,从外的讳就是能够猜测出来,configure是布局的意思,run方法估计是是模块要候所有因加载了晚召开片作业。

  给到平等篇参考文章:http://blog.csdn.net/peter\_zhou123/article/details/53222287直用过来算了,文章非常缺乏

  

近些年,在列蒙遇见需要在 config 阶段中注入有service的状况,然而
factory,service 还有 value 是未克于 config 中流入的,先押一个清单:

服务/阶段 provider factory service value constant
config阶段 Yes No No No Yes
run 阶段 Yes Yes Yes Yes Yes

小心,provider 在config阶段,注入的早晚用添加 provider
后缀,可以调用非 $get 返回的法子在 run 阶段注入的上,无需加 provider
后缀,只能调用 $get 返回的主意

   

 

  至此,对Angular的总体达标出矣一个认识,接下去的几只钟头里,我拿一个一个组件认真上,同时做到学习笔记。如果您以为自家之笔记写的不利的话,请关注自我,毕竟这会追加一些己修之动力。再设你若改变当就篇稿子的讲话,请把稿子的链接放上去。好了,我去上个厕先。

 

相关文章