AngularJS1.X學習筆記1-整體看看

本文轉載自查看原文 2017-03-31 17:07 1496 AngularJS/ AngularJS1.x學習筆記/ JavaScript/ javascript

　　聽說明天是愚人節，這與我有什么關系呢！我可不想被愚弄，但是但是，我這么笨怎么才能不被愚弄呢？左思右想，我決定從現在開始閉關，閉關干啥哩？學習！學習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>

　　假如去掉第二個參數

　　得到的module對象的實例有如下方法和屬性（當然還有其他的，上面那個圖有）

　　模塊是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>

　　這里我們調模塊的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>

　　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>

　　比較喜歡星期五，星期五意味着放假，所以做了一個指令，星期五的時候就顯示紅色。

　　分析一下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聲明的依賴中使用。

七、使用模塊組織代碼

　　是這個樣子，我們可以把不同的組件放在不同的模塊，然后聲明依賴，比如說將控制器放在一個模塊，將過濾器放在另一個模塊，這樣呢就可以很方便的維護了。

　　代碼時刻來臨。。。。搞圖吧，好看結構

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

　　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>

　　看看這個執行的順序，因為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的整體上有了一個認識，接下來的幾個小時里，我將一個一個組件認真學習，同時完成學習筆記。如果你覺得我的筆記寫的不錯的話，請關注我，畢竟這會增加一點我學習的動力。再如果你要轉在這篇文章的話，請把文章的鏈接放上去。好了，我去上個廁所先。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AngularJS1.X學習筆記14-動畫(解讀文檔) angularjs1.x的directive中的link參數element見解 angularjs1.X獲取前一天日期 angularJs1.x 版本中 uib-tabset 如何默認激活不同的標簽頁 [學習筆記]整體DP Bootstrap學習筆記之整體架構 Bootstrap學習筆記之整體架構 AngularJs學習筆記--directive AngularJs學習筆記--expression AngularJs學習筆記--Forms