AngularJS基礎知識2

本文轉載自查看原文 2016-08-31 11:03 1259 AngularJS

一、angularJS雙向數據綁定

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

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

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

直接用例子來說明：

<!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.js

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
            }
        };
}]);

效果：

1）點擊第一個按鈕

2）點擊第二個按鈕

3）點擊第三個按鈕

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.js

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效果相反，用法相同。

二、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依賴哪些功能。然后再加一些路由的配置。

三、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）引入庫文件