1.MVC概要與angular概要、模板與數據綁定

時間 2019-11-08

標籤 1.mvc mvc 概要 angular 模板數據綁定欄目 AngularJS 简体版

原文原文鏈接

轉自：https://www.cnblogs.com/best/p/6242011.html#_label3_0_8_2javascript

1、前端MVC概要

5、示例下載

1、前端MVC概要

1.一、庫與框架的區別

框架是一個軟件的半成品，在全局範圍內給了大的約束。庫是工具，在單點上給咱們提供功能。框架是依賴庫的。AngularJS是框架而jQuery則是庫。css

1.二、AMD與CMD

在傳統的非模塊化JavaScript開發中有許多問題：命名衝突、文件依賴、跨環境共享模塊、性能優化、職責單1、模塊的版本管理、jQuery等前端庫層出不窮，前端代碼日益膨脹html

AMD規範及其表明：RequireJS
異步模塊定義（Asynchronous Module Definition），它是依賴前置 (由於依賴必須一開始就寫好)會先儘早地執行(依賴)模塊 , 至關於全部的require都被提早了前端

CMD規範及其表明：SeaJS
（Common Module Definition）模塊定義規範
一個模塊就是一個文件；它推崇依賴就近想何時require就何時加載，實現了懶加載，延遲執行 (as lazy as possible)vue

1.二、前端MVC概要

MVC的核心理念是：你應該把管理數據的代碼（Model）、業務邏輯的代碼（Controller）、以及向用戶展現數據的代碼（View）清晰的分離開java

模型：表明應用當前的狀態
視圖：用於展現數據，用於接口
控制器：用來管理模型和視圖之間的關係node

1.三、React

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。支持虛擬DOM（Virtual DOM）和組件化的開發。react

ReactJS官網地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/reactgit

1.四、Vue.js

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API，做者是尤雨溪是中國人。angularjs

官網：http://cn.vuejs.org/

倉庫：https://github.com/vuejs

易用
已經會了HTML,CSS,JavaScript？即刻閱讀指南開始構建應用！
靈活
簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
性能
17kb min+gzip 運行大小
超快虛擬 DOM
最省心的優化

1.五、AngularJS簡介

AngularJS是一個前端MVVM框架。

angular的英文字面意思是：有角的; 用角測量的

AngularJS是協助搭建單頁面工程（SPA）的開源前端框架。它經過MVC模式使得開發與測試變得更容易。

AngularJS試圖成爲WEB應用中的一種端對端的解決方案。它將指導開發整個應用。

AngularJS於2009年發佈第一個版本，由Google進行維護，壓縮版94k。

1.3版後再也不支持IE8
1.3版後不支持全局控制器
2.0版 alpha

git倉庫：https://github.com/angular/

官網：https://www.angularjs.org/

http://www.angularjs.cn/中文社區

http://www.apjs.net/ 中文網

a web framework for modern web apps

1.5.一、AngularJS特色

一、功能強大，完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等全部功能；
二、聲明式風格、直觀、易於操做、訪問和實現
三、支持單元測試、自己基於TDD完成
四、致力於減輕開發人員在開發AJAX應用過程當中的痛苦
五、angular 是最適合CRUD的SPA 單頁面的應用程序

不適合SEO、交互頻繁的，如遊戲之類交互體驗網站

AngularJS的核心組件：

1.六、第一個AngularJS程序

若是要開發基於angularJS的項目，則先要添加對angularJS的引用，有以下幾個方法：

1)、去angular官網或git下載，地址：https://github.com/angular/

2)、使用cdn

3)、安裝node.js，使用npm獲取

示例代碼：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>angular01</title>
    </head>

    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            name：<input type="text" ng-model="message"/>
            <p>
                {{"Hello "+message}}
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項爲空
            var app01 = angular.module("app01", []);

            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("HelloController", function($scope) {
                //在全局做用域對象上添加屬性message，並指定值
                $scope.message = "Angular!";
            });
        </script>
    </body>

</html>

運行結果：

第一個AngularJS程序要注意的地方：

一、HTML裏面沒有Class或者ID來標記在哪裏添加事件監聽器
二、當HelloController把message設置成Hello World時，咱們沒有必要註冊任何事件監聽或者編寫任何回調函數。
三、HelloController只是一個普通的JavaScript類，不須要繼承Angular所提供的任何東西。
四、HelloController能夠獲取它所須要的 $s c o p e 对象，则没有必要去创建它，依赖注入 5 、当文本框中的值发生变化时$

1.七、定義AngularJS模塊

AngularJS模塊是一種容器、它把代碼隔離並組織成簡單、整潔、可複用的塊。

angular.module(name,[requires],[configFn]);

name：模塊名稱，必須指定

requires：依賴項，要被添加到注入器服務提供這個模塊使用的模塊名的數組，若是須要另外一個模塊的功能，你須要將它添加在列表中，全部依賴的實在數組中指定依賴的模塊。

configFn:模塊配置階段調用的另外一個函數。

        //一、定義模塊，指定模塊名稱，依賴對象，配置函數
        angular.module("mocule1",['$window','$http'],function(){
            //服務提供者
            $provider.value("PI","3.14");
        });
        
        //二、定義模塊，簡化，無依賴，無配置函數
        var module2=angular.module("module2",[]);
        
        //三、得到指定模塊
        var module3=angular.module("module3");
        
        //四、同時同義模塊與控制器
        angular.module("module4",[]).controller("controller4",function(){
            
        });

2、模板與數據綁定

2.一、顯示普通文本

angular中，把HTML文件被稱爲模板
顯示文本
方法一：
{{item.title}}

方法二：

示例：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>

    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <p>
                name：{{user.name}}
            </p>
            <p>
                hobby：<span ng-bind="user.hobby"></span>
            </p>
            <p>
                info：{{user.info}}
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                //定義模塊，指定依賴項爲空
                var app01 = angular.module("app01", []);

                //定義控制器，指定控制器的名稱，$scope是全局對象
                app01.controller("HelloController", function($scope) {
                    //在全局做用域對象上添加對象，並指定值
                    $scope.user = {
                        "name": "zhangguo",
                        "hobby": "coding",
                        "info": "<hr/>detail"
                    };
                });
        </script>
    </body>

</html>

結果：

當加載慢時的效果：

方法二與方法一的區別：

使用模塊標籤{{ }}加載慢或渲染慢時用戶將看到標籤，而ng-bind不會，可是使用模塊要方便。

2.二、顯示HTML

爲了安全默認的HTML都將被轉義。 $s c e 是 a n g u l a r J S 自带的安全处理模块，$

示例代碼：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>

    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <p>
                {{info}}
            </p>
            <p>
                ng-bind：<span ng-bind="info"></span>
            </p>
            <p>
                ng-bind-html：<span ng-bind-html="info"></span>
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                //定義模塊，指定依賴項爲空
                var app01 = angular.module("app01", []);

                //定義控制器，指定控制器的名稱，$scope是全局對象
                app01.controller("HelloController", function($scope,$sce) {
                    $scope.info=$sce.trustAsHtml("<h2>html info</h2>");
                });
        </script>
    </body>

</html>

運行結果：

2.三、ng-model

使用ng-model屬性把元素綁定到模型屬性上，若是$scope上不存在，則當即建立，若是存在則綁定，容許同時綁定到多個HTML元素上。

$scope中有isChecked與沒有isChecked的區別
ngModel 會嘗試使用表達式的計算結果來綁定到當前域上的屬性。若是屬性在當前域上不存在，它會當即建立並添加到當前域

示例：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>
    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <p>
            贊成： <input type="checkbox" ng-model="isChecked"/>
            </p>
            容許：<input type="text" ng-model="isChecked"/>
            <p>
                {{isChecked}}
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                //定義模塊，指定依賴項爲空
                var app01 = angular.module("app01", []);

                //定義控制器，指定控制器的名稱，$scope是全局對象
                app01.controller("HelloController", function($scope) {
                    $scope.isChecked=true;
                });
        </script>
    </body>

</html>

結果：

要注意$scope中是否存在該模型，若是有則會初始化數據。

2.四、ng-change

ng-change屬性來指定一個控制器方法，變化時觸發
當用戶改變輸入時計算給出的表達式。表達式會被當即計算，不像 JavaScript的onchange事件只會在最後一次改變時觸發(一般，當用戶離開表單元素或按回車鍵時)。當值的變化來自於模型時，不會對錶達式進行計算。
這個指令須要同時給出 ngModel

示例：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>
    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <p>
               本金： <input type="text" ng-model="money" ng-change="getInterest()"/>
            </p>
            <p>
                利息：{{interest}}
            </p>
            <p>
                總收益：{{interest*1+money*1}}
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                //定義模塊，指定依賴項爲空
                var app01 = angular.module("app01", []);

                //定義控制器，指定控制器的名稱，$scope是全局對象
                app01.controller("HelloController", function($scope) {
                    $scope.getInterest=function(){
                        $scope.interest=$scope.money*Math.random();
                    }
                });
        </script>
    </body>

</html>

結果：

2.五、$watch

用於監視對象的變化，能夠得到變化前的值與變化後的值。

上面的作法有一個潛在的問題，只有當用戶在文檔框中輸入值的時候咱們纔會去計算，如還有更多的輸入框，每個輸入框都要綁定。

$s c o p e .$

示例代碼：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>
    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <p>
               本金： <input type="text" ng-model="money"/>
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                //定義模塊，指定依賴項爲空
                var app01 = angular.module("app01", []);

                //定義控制器，指定控制器的名稱，$scope是全局對象
                app01.controller("HelloController", function($scope) {
                    $scope.$watch("money",function(newVal,old){
                        console.log("舊值："+old+"   新值："+newVal);
                    });
                });
        </script>
    </body>

</html>

運行結果：

2.六、事件

angularjs的內置指令中有許多封裝好的事件指令，以下所示：

示例：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="submitExample">

    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>

    <body>
        <!--指定控制器的做用範圍-->
        <form ng-submit="submit()" ng-controller="ExampleController">
            Enter text and hit enter:
            <input Type="text" ng-model="text" name="text" ng-copy="copy()" />
            <input Type="submit" id="submit" value="Submit" />
            <pre>list={{list}}</pre>
            <p>
                <input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
                <br/> 是否複製: {{copied}}
                <br/><br/>
                <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'> 
                <br/>
                是否粘貼: {{paste}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            angular.module('submitExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.list = [];
                    $scope.text = 'hello';
                    $scope.submit = function() {
                        if($scope.text) {
                            $scope.list.push(this.text);
                            $scope.text = '';
                        }
                    };
                }]);
        </script>
    </body>

</html>

結果：

ng-submit它能夠防止默認動做(這對錶單意味着向服務器發送請求和從新加載當前頁)，但只在表單沒包含action, data-action或x-action屬性時。

2.七、ng-repeat迭代

ngRepeat指令爲集合中的每項實例化一個模板。每一個模板的實例擁有本身的域，使用循環變量指向當前集合項上，$index指向當前項的索引或鍵值。

特殊屬性應用於每一個模板實例的本地域上，包括：

對象集合的修改將會自動更新視圖

爲了解決重複元素序列只有一個父元素的狀況，ngRepeat (不一樣於其它ng指令)支持擴展重複範圍，經過使用ng-repeat-start 和 ng-repeat-end分別定義明確的開始和結束點。ng-repeat-start 指令工做方法相似ng-repeat，可是會重複從標籤訂義自己位置開始到ng-repeat-end定義位置之間的全部HTML代碼。

  <header ng-repeat-start="item in items">
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer ng-repeat-end>
    Footer {{ item }}
  </footer>

若是上面例子中的items變量的值爲['A','B']，則輸出結果爲：

  <header>
    Header A
  </header>
  <div class="body">
    Body A
  </div>
  <footer>
    Footer A
  </footer>
  <header>
    Header B
  </header>
  <div class="body">
    Body B
  </div>
  <footer>
    Footer B
  </footer>

示例代碼：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
    </head>
    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <h2>
                用戶列表
            </h2>
            <ul>
                <li ng-repeat="user in users | orderBy:'reverse' | filter:'c'">
                    <p ng-if="$odd" style="background: lightblue;">
                    {{$index}} {{user}}
                    </p>
                    <p ng-if="$even" style="background: lightgreen;">
                    {{$index}} {{user}}
                    </p>
                </li>
            </ul>
            <p>
                <input ng-model="user" /><button ng-click="add()">添加</button>
            </p>
            <p>
            {{users}}
            </p>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                //定義模塊，指定依賴項爲空
                var app01 = angular.module("app01", []);

                //定義控制器，指定控制器的名稱，$scope是全局對象
                app01.controller("HelloController", function($scope) {
                    $scope.users=["tcom","mark","rosce","jack","lucy"];
                    
                    $scope.add=function(){
                        $scope.users.push($scope.user);
                    }
                    
                });
        </script>
    </body>

</html>

運行結果：

練習：

實現對一個學生對象數組進行以下操做
添加、刪除、修改、搜索、排序

參考代碼：

<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}]">
                    我有 {{friends.length}}個朋友 他們是:
                    <input Type="text" ng-model="q" placeholder="filter friends..." />
                    <ul>
                        <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
                            [{{$index + 1}}] {{friend.name}}他{{friend.age}}歲了
                        </li>
                    </ul>
                </div>

運行結果：

2.八、ng-show與ng-hide

用於顯示與隱藏元素。

ng-show=true 顯示

ng-hide=true 隱藏

ng-if 與 show/hide的原理是不同的

示例：

按 Ctrl+C 複製代碼

結果：

2.九、ng-class與ng-style

指定類樣式與行內樣式。

ngClass指令容許你動態設置HTML元素的CSS類，經過綁定到一個包含要添加的全部類的表達式。

這個指令有三種使用方式，這三種方式取決於表達式計算結果：

若是表達式結果爲字符串，則字符串爲使用空格分隔的一個或多個類名。

若是表達式結果爲一個數組，則數組中每一個元素爲使用空格分隔的一個或多個類名字符串。

若是表達式結果爲一個對象，對象中的每一個key-value中若是鍵值爲真時則鍵名做爲類名。
這個指令不會添加劇復的類，若是這個類已經存在的話。

當表達式改變時，之前添加的類會被移除，而且只會添加以後新產生的類。

ngStyle指令容許你在HTML元素上條件化設置CSS樣式。

<li ng-class="{bg1: $o d d, b g 2 :$

當條件爲true時類樣式出現

Sample Text

myStyle={color:'red'}

示例：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>模板與數據綁定</title>
        <style type="text/css">
            .border{
                border: 10px solid lightblue;
            }
            .bg{
                background: lightgreen;
            }
            .color{
                color: orangered;
                font-size: 20px;
                font-family: "microsoft yahei";
            }
            div{
                min-height: 100px;
            }
        </style>
    </head>

    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="HelloController">
            <p>
                <input type="checkbox" ng-model="isBorder"/>邊框
                <input type="checkbox" ng-model="isBg"/>背景
                <input type="checkbox" ng-model="isColor"/>前景
                <button type="button" ng-click="cls1={'border-radius':'15px'}">圓角</button>
            </p>
            <div ng-class="{border:isBorder,bg:isBg,color:isColor}" ng-style="cls1">
                Hello ng-class and ng-style
            </div>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項爲空
            var app01 = angular.module("app01", []);

            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("HelloController", function($scope) {
            });
        </script>
    </body>

</html>

結果：

2.十、ng-src與ng-href

用於指定資源路徑。

在src或者href屬性上簡單使用{{}}綁定時沒法很好運行，出現404錯誤由於圖片加載時可能模板還未被替換成真實路徑。

因爲瀏覽器會優先使用並行的方式來加載圖片和其它內容，因此angular沒有機會攔截到數據綁定請求。

總之在模板中若是須要使用到src屬性與href屬性儘可能使用ng-src與ng-href避免400錯誤。

2.十一、表達式

在模板中使用表達式是爲了以充分的靈活性在模板、業務邏輯和數據之間創建聯繫，同時又能避免讓業務邏輯滲透到模板中。

算術：+ - * / %
比較：== != > < >= <=
邏輯：&& || !
位運算：\^ & |

模板解析器中沒有for,while,if,throw，具備容錯性
儘可能不要把業務邏輯放到模板中，清晰的區分視圖和控制器之間的職責能夠保證含義明確並易於測試。

練習：購物車

一、雙向綁定集合中的數據
二、執行移除事件
三、隔行換色、使用angularJS完成
四、點擊數量與小計時進行排序（選作）

3、區分UI和控制器的職責

控制器的職責：

一、爲應用中的模型設置初始狀態
二、經過$scope對象把數據模型和函數暴露給視圖（UI模板）
三、監視模型其他部分的變化，並採起相應的動做，雙向綁定

爲了讓控制器保持輕量可管理狀態，建議在視圖的每一塊功能區域建立一個控制器如，MenuController、PathController
能夠嵌套控制器，適OO中的繼承特性

示例代碼：

<!DOCTYPE html>
<!--指定angular託管的範圍-->
<html ng-app="app">

    <head>
        <meta charset="UTF-8">
        <title>區分UI和控制器的職責</title>
    </head>

    <body>
        <!--指定控制器的做用範圍-->
        <div ng-controller="LevelA">
            <h3>{{title}}</h3>
            valueA:{{valueA}}  <button type="button" ng-click="inc()">加</button>
            <div ng-controller="LevelB">
                <h3>{{title}}</h3>
                valueA:{{valueA}}<br/>
                valueB:{{valueB}}
                <button type="button" ng-click="inc()">加</button>
                    <div ng-controller="LevelC">
                        <h3>{{title}}</h3>
                        valueA:{{valueA}}<br/>
                        valueB:{{valueB}}<br/>
                        valueC:{{valueC}}
                        <button type="button" ng-click="inc()">加</button>
                    </div>
            </div>
        </div>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        angular.module("app",[]).controller("LevelA",function($scope){
            $scope.title="LevelA";
            $scope.valueA=1;
            $scope.inc=function(){
                $scope.valueA++;
            }
        }).controller("LevelB",function($scope){
            $scope.title="LevelB";
            $scope.valueB=1;
            $scope.inc=function(){
                $scope.valueB++;
            }
        }).controller("LevelC",function($scope){
            $scope.title="LevelC";
            $scope.valueC=1;
            $scope.inc=function(){
                $scope.valueC++;
            }
        })
        </script>
    </body>

</html>

運行結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。