AngularJS基礎知識2

時間 2019-11-26

原文原文鏈接

1、angularJS雙向數據綁定

利用雙向數據綁定，不只能把數據模型的變化同步到視圖上面，還能夠利用雙向數據綁定的特性來作一些樣式上面的控制。javascript

雙向數據綁定用處不少，不只僅是像知識點1中的那個例子，只用花括號來表示。css

1.數據模型變化同步到視圖

直接用例子來講明：html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/angular.min.js"></script>
    <script src="js/dataBind_1.js"></script>
</head>
<body>
    <div class="panel panel-primary"  ng-app="dataInfo" ng-controller="myCtrl">
        <div class="panel-heading">
            <div class="panel-title">雙向數據綁定-數據模型變化同步到視圖</div>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-2 control-label">郵箱：</label>
                    <div class="col-md-10">
                        <input type="email" class="form-control" placeholder="請輸入郵箱" ng-model="userInfo.email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">密碼：</label>
                    <div class="col-md-10">
                        <input type="password" class="form-control" placeholder="請輸入密碼" ng-model="userInfo.password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <div class="checkbox">
                            <label><input type="checkbox" ng-model="userInfo.autoLogin">自動登陸</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <button class="btn btn-default" type="button" ng-click="getData()">獲取form表單的值</button>
                        <button class="btn btn-default" type="button" ng-click="setData()">設置form表單的值</button>
                        <button class="btn btn-default" type="button" ng-click="resetData()">重置表單</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

dataBind_1.jsjava

var dataInfo = angular.module("dataInfo",[]);
dataInfo.controller("myCtrl",["$scope",
    function($scope){
        $scope.userInfo = {
            email:"zengwenli_95@foxmail.com",
            password:"111111",
            autoLogin:true
        };

        $scope.getData = function(){
            console.log($scope.userInfo);
        };

        $scope.setData = function(){
            $scope.userInfo = {
                email:"zwl.jasmine95@gmail.com",
                password:"111111",
                autoLogin:false
            }
        };

        $scope.resetData = function(){
            $scope.userInfo = {
                email:"",
                password:"",
                autoLogin:false
            }
        };
}]);

效果：node

1）點擊第一個按鈕web

2）點擊第二個按鈕ajax

3）點擊第三個按鈕json

2.樣式控制

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <script src="js/dataBind_2.js"></script>
    <style type="text/css">
        .test-red{
            color: red;
        }
        .test-green{
            color:green;
        }
    </style>
</head>
<body>
    <div ng-app="myColor" ng-controller="myCtrl">
        <p class="test-{{color}}">雙向數據綁定-改變CSS樣式</p>
        <button ng-click="setColor()">綠色</button>
    </div>
</body>
</html>

dataBind_2.jsbootstrap

var app = angular.module("myColor",[]);
app.controller("myCtrl",["$scope",
    function($scope){
        $scope.color = "red";
        $scope.setColor = function(){
            $scope.color = "green";
        }
}]);

效果：瀏覽器

----->

經過數據使視圖發生變化。上訴變量color若是沒有定義，值爲none或者undefined，就會出現不少詭異的狀況。爲了不這個狀況，angularJS定義了ng-class。ng-class能夠接收一些表達式。

（1）ng-class

eg：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <script src="js/ngClass.js"></script>
    <style type="text/css">
        .error{
            background: red;
        }
        .warning{
            background: green;
        }
    </style>
</head>
<body>
    <div ng-app="ngClass" ng-controller="myClass">
        <div ng-class="{error:isError,warning:isWarning}">{{messageTest}}</div>
        <button ng-click="showError()">showError</button>
        <button ng-click="showWarning()">showWarning</button>
    </div>
</body>
</html>

{error:isError,warning:isWarning} ：這是一個表達式，若是isError的值爲true，就會用error的樣式；若是isWarning的值是true，就會用warning的值。

ngClass.js

var ngClass = angular.module("ngClass",[]);
ngClass.controller("myClass",["$scope",
    function($scope){
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.showError = function(){
            $scope.messageTest = "This is an error!";
            $scope.isError = true;
            $scope.isWarning = false;
        };
        $scope.showWarning = function(){
            $scope.messageTest = "Just is a warning!";
            $scope.isError = false;
            $scope.isWarning = true;
        }
}]);

效果：

----->--->

（2）樣式的顯示和隱藏——ng-show和ng-hide

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <script src="js/show-hide.js"></script>
</head>
<body>
    <div ng-app="ngShow" ng-controller="myShow">
        <button ng-click="toggleMenu()">toggle menu</button>
        <ul ng-show="menuState.show">
            <li>JavaScript</li>
            <li>bootstrap</li>
            <li>jQuery</li>
            <li>angularJS</li>
        </ul>
    </div>
</body>
</html>

show-hide.js

var ngShow = angular.module("ngShow",[]);
ngShow.controller("myShow",["$scope",
    function($scope){
        $scope.menuState = {show:false};
        $scope.toggleMenu = function(){
            $scope.menuState.show = !$scope.menuState.show;
        }
    }
]);

效果：

------->

ng-hide和ng-show效果相反，用法相同。

2、angularJS模塊

1.經過 AngularJS 的 angular.module 函數來建立模塊。

模塊定義了一個應用程序。

模塊是應用程序中不一樣部分的容器。至關於一個集合。

模塊是應用控制器的容器。

控制器一般屬於一個模塊。

以前的例子充分體現了模塊的概念：

（匿名函數）

2.何時載入庫

對於 HTML 應用程序，一般建議把全部的腳本都放置在 <body> 元素的最底部。

這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。

在多個 AngularJS 實例中，將看到 AngularJS 庫是在文檔的 <head> 區域被加載。

在實例中，AngularJS 在 <head> 元素中被加載，由於對 angular.module 的調用只能在庫加載完成後才能進行。

3.一個完整的項目結構：

node_modules文件夾不用手動添加，在安裝基於node.js的工具時系統會自動生成。

app.js : 提供入口點，定義一個module做爲啓動點，沒有太多功能，只是告訴angularJS依賴哪些功能。而後再加一些路由的配置。

3、angularJS路由

1.AJAX的缺陷

（1）ajax的請求不會留下歷史記錄

（2）用戶沒法直接經過URL進入應用中的指定界面（保存書籤、連接分享給朋友）

（3）ajax對SEO（搜索引擎優化）是個災難

（4）

2.路由的概念

ngRoute:不一樣視圖之間進行切換

AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。

經過 AngularJS 能夠實現多視圖的單頁Web應用（single page web application，SPA）。

一般咱們的URL形式爲 http://runoob.com/first/page，但在單頁Web應用中 AngularJS 經過 # + 標記 實現，例如：

http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third

當咱們點擊以上的任意一個連接時，向服務端請的地址都是同樣的 (http://runoob.com/)。由於 # 號以後的內容在向服務端請求時會被瀏覽器忽略掉。因此咱們就須要在客戶端實現 # 號後面內容的功能實現。 AngularJS 路由就經過 # + 標記幫助咱們區分不一樣的邏輯頁面並將不一樣的頁面綁定到對應的控制器上。

（原生路由的缺點：沒法進行深層次的嵌套路由。使用angular-UI中的UI-Router就能夠解決。）

3.路由的使用

ngRoute並無在AngularJS的核心包裏面，因此在使用的時候，須要引入一個獨立的庫。

1）在HTML中引入ngRoute

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>

2）在應用主模塊中，引入ngRoute

3）在模塊的config中綁定URL路徑與控制器

4.路由規則

在ngRoute中，主要有$route、$routeProvider、$routeParams三個服務項目。

$routeProvider用於在主應用主模塊的配置方法中。$route與$routeParams通常常見於控制器中。

（1）$routeProvider

AngularJS 模塊的 config 函數用於配置路由規則。經過使用 configAPI，咱們請求把$routeProvider注入到咱們的配置函數而且使用$routeProvider.whenAPI來定義咱們的路由規則。因爲$routeProvider是一個服務，根據service的使用建議，咱們主要將其當作爲工具來使用，因此咱們通常直接使用$routeProvider.XXX來調用它的成員方法來實現必定的功能，而不是實例化一個$routeProvider的實例

$routeProvider 爲咱們提供了 when(path,object) & otherwise(object) 函數按順序定義全部路由，函數包含兩個參數:

第一個參數是 URL 或者 URL 正則規則。

第二個參數是路由配置對象。

eg:

1）index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>route</title>
    <link href="src/css/test1.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="src/js/test1.js"></script>
</head>
<body>
    <div class="content" ng-app="myTest">
        <nav>
            <a href="#/login">登陸</a>
            <a href="#/register">註冊</a>
        </nav>
        <div ng-view=""></div>
    </div>
</body>
</html>

(這裏使用的是bower.json來加載一些依賴文件，看不懂的朋友能夠本身下載文件後再引入到頁面中)

2）login.html

<form>
    <fieldset>
        <legend>用戶登陸</legend>
        <div>
            <label for="username">用戶名:</label>
            <input type="text" id="username" placeholder="請輸入用戶名" ng-model="username">
        </div>
        <div>
            <label for="password">密碼:</label>
            <input type="password" id="password" placeholder="請輸入密碼" ng-model="password">
        </div>
        <br>
        <div class="btn">
            <button type="reset">重置</button>
            <button type="submit">確認</button>
        </div>
    </fieldset>
</form>

3）register.html

<form>
    <fieldset>
        <legend>用戶註冊</legend>
        <div>
            <label for="username">用戶名:</label>
            <input type="text" id="username" placeholder="請輸入用戶名" ng-model="username">
        </div>
        <div>
            <label for="email">郵箱:</label>
            <input type="text" id="email" placeholder="請輸入郵箱地址" ng-model="email">
        </div>
        <div>
            <label for="password">密碼:</label>
            <input type="password" id="password" placeholder="請輸入密碼" ng-model="password">
        </div>
        <div id="result">
            <h2>請覈對您的輸入信息：</h2>
            <div>用戶名：{{username}}</div>
            <div>郵箱：{{email}}</div>
            <div>密碼：{{password}}</div>
        </div>
        <div class="btn">
            <button type="reset">重置</button>
            <button type="submit">確認</button>
        </div>
    </fieldset>
</form>

4）test1.js

(function (window,angular) {
    var app = angular.module('myTest',['ngRoute']);
    app.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/',{template:'welcome!'})
            .when('/login',{templateUrl:'login.html'})
            .when('/register',{templateUrl:'register.html'})
    }]);
})(window,angular);

(省略css文件)

5.路由配置對象參數說明

（2）$route

$route用於將控制器與視圖相連。它觀察$location.url()，而且嘗試映射路徑到一個已經存在的路由定義中。它依賴$location、$routeParams。它主要有以下成員函數：

reload() 用於從新加載當前的路由，哪怕$location沒有改變。調用後，ngView將建立新的Scope等。

它主要有以下事件：

$routeChangeStart：路由改變以前觸發；
$routeChangeSuccess：路由改變以後觸發；
$routeChangeError：路由改變出錯觸發；

（3）$routeParams

$routeParams容許你檢索當前路由的參數。主要使用$location的search()與path()方法。

----------------------------------------------------------------------------------------------------------------------------

6.UI-Router

UI-Router是Angular-UI提供的客戶端路由框架，它解決了原生的ng-route的不少不足：

視圖不能嵌套。這意味着$scope會發生沒必要要的從新載入。這也是咱們在Onboard中引入ui-route的緣由。
同一URL下不支持多個視圖。這一需求也是常見的：咱們但願導航欄用一個視圖（和相應的控制器）、內容部分用另外一個視圖（和相應的控制器）。
UI-Router提出了$state的概念。一個$state是一個當前導航和UI的狀態，每一個$state須要綁定一個URL Pattern。在控制器和模板中，經過改變$state來進行URL的跳轉和路由。

（1）引入庫文件

引入ui-router庫文件以後就不用引入angularJS原生的路由文件了。

（2）在頁面中插入

這個表示的是一個視圖。

（3）js文件中定義

首先須要注入：