AngularJS1.X读书笔记1-完全看看

  听说
前些天是愚人节,那与自身有怎么样关联吗!我可
不想被讥讽,不过只是,我这么笨怎么才能不被讥讽呢?狼狈周章,我说了算从现行上马闭关,闭关干啥呢?学习!学习AngularJS。此前学习过Angular的,不过很久没用都忘的基本上了,所以决定好好复习一下。那两日我将多发几篇随笔,记录一下自我的学习进程。参考用书《AngularJS高级程序设计-Adam
弗里曼》,我会参考书中的例子做四遍,谈谈自己的敞亮。现在依照小编的思绪先全部把握一下,前面再一个一个看。

一、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的完好上有了一个认识,接下去的多少个时辰里,我将一个一个组件认真读书,同时形成学习笔记。如若您认为我的笔记写的正确的话,请关切自我,毕竟这会追加一些自身上学的动力。再即便您要转在那篇小说的话,请把文章的链接放上去。好了,我去上个厕所先。

 

相关文章