【MVVM】- AngularJS基礎學習

時間 2019-11-08

原文原文鏈接

Angular JS

AngularJS 基礎入門案例

外觀頁面css

<!-- 定義angularJS代碼的工做域：相似avalon  ms-controller -->
<body ng-app=""> 
  
<!-- 建立變量various並放入Scope變量，angularJS工做域裏面實現共享：input,select,textarea標籤適用 -->
        Your name: <input type="text" ng-model="various" placeholder="World">
        <hr>
        
<!-- 插值表達式直接取出scope域中名爲various值，不然顯示默認值World! -->
        Hello {{various || 'World'}}!<br>
        
<!-- ng-bind將當前html元素的text屬性和scope的various綁定,適用表達式-->    
        ng-bind01:<span ng-bind="(various || 'span bind')"></span>!<br>
        
<!-- 注意input select textarea的數據綁定只能適用ng-model -->
        ng-bind02:<input type="text" ng-model="various" placeholder="input model!">
        
        <hr>
<!-- ng-init:初始化變量，可是不會與當前html元素進行數據綁定,注意init能夠初始化多個變量，';'隔開 -->
        ng-init:<span ng-init="name='zhangsan'"></span>{{name}}<br>
        ng-init value:<span ng-bind="name"></span>
</body>

AngularJS 模塊

模塊是應用控制器的容器，Angularjs代碼依賴Jquery，在使用angualrjs代碼時，Jquery腳本文件須在AngularJS腳本以前加載，此外通常將腳本代碼放置在body元素的底部是爲了提供網頁的加載速度，因 HTML 加載不受制於腳本加載：換句話說腳本和html代碼加載時分開的，爲了提供網頁的加載速度，能夠先將頁面顯示的html先加載完成後，再加載腳本文件html

注意：1個html中只有1個應用，所以頁面只有一個模塊，若是存在多個以第一個爲準數組

外觀頁面app

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

js操做邏輯框架

/*
*  app: 模塊對象
*  myApp: 模塊名
*  []: 表示該模塊依賴的模塊數組，相似Java中的jar包依賴
* 
*  myCtrl： 表示模塊下掛載的控制器
*  $scope: 做用域，這裏控制器做用範圍定義2個屬性：firstName 和 lastName， 主要用於模型與視圖之間的數據同步(vm部分)
*/
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "Squirrel";
    $scope.lastName = "Hello";
});

AngularJS 控制器

外觀頁面ide

<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJS 函數綁定</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
    <button ng-click="save()">保存</button>
    <button ng-click="clear()">清除</button>
</p>

<p>
    剩餘字數: <span ng-bind="left()"></span>
</p>
<!-- AngualrJS的顯示、隱藏邏輯控制指令：相似avalon 的 ms-visible和knockout的visible指令 -->
<div ng-show="flag">
結果：<font color="red">
    <span ng-bind="result"></span>
</font>
</div>

js操做邏輯函數

/**
 * AngularJS 將屬性、函數視爲controller的平等成員，可按照訪問普通屬性的方式調用函數
 */
var app = angular.module("myApp", []);

/*
* 定義控制器 myCtrl， 而且做用域定義普通屬性和函數
*/
app.controller("myCtrl", function($scope) {
    $scope.message = "";
    $scope.result="";
    $scope.flag=false;
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {
        $scope.message = "";
        $scope.result= $scope.message;
        $scope.flag = false;
    };
    $scope.save  = function() {
         $scope.result= $scope.message;
         $scope.flag=true;
    };
});

AngularJS 控制器做用範圍

$scope 表明視圖與數據模型的中間層：scope中的對象 model和view 共享，而且數據是雙向同步測試

雙向同步: $scope中的對象與視圖元素綁定，一方發生數據更新，另外一方自動同步更新ui

controller做用域：負責controller標籤包裹的元素的數據處理，若是子元素嵌套Controller,則相應的子元素的做用Controller以距離子元素最近的爲準(這種最近做用原則在Jmeter測試框架，avalon的ms-controller一樣體現)spa

外觀頁面

<!-- 指定應用名及控制器 -->
<body  ng-app="myApp">

<div ng-controller="myCtrl01">
<p>myCtrl01的做用域</p>
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

<hr/>
<p>myCtrl02的做用域</p>
<div ng-controller="myCtrl02">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
</div>

js操做邏輯

var app = angular.module('myApp', []);

//定義控制器myCtrl01
app.controller('myCtrl01', function($scope) {
    
    /* 
     * 後臺向scope域中存放對象：頁面存放的標籤：
     * ng-init 初始化變量 
     * ng-model:初始化變量並進行數綁定
    */
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

//定義控制器myCtrl02
app.controller('myCtrl02', function($scope) {
    $scope.firstName= "Hello";
    $scope.lastName= "Python";
});

AngularJS 運算表達式

外觀頁面

<body ng-app="">
<div ng-init="quantity=1;cost=5;array=[1,2,3,4];person={'name':'zhangsan','age':'20'}">
quantity:<span>{{quantity}}</span><br>
插值表達式等價於：<span ng-bind="quantity"></span><br><br>

<!-- angular表達式支持運算 -->
總價：<span>{{"quantity*cost="+quantity*cost}}</span><br>

<!-- &lt;  html元字符：'<' -->
邏輯運算：<span>{{quantity&lt;2?quantity:cost}}</span><br>

數組取值：<span>{{array[2]}}</span><br>

對象屬性取值：<span>{{person.name}}</span>
</div>

AngularJS 表格操做

css樣式

table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

外觀操做

<body ng-app="">
<div ng-init="persons=[{'name':'zhangsan','age':'20'},
                     {'name':'lisi','age':'19'},
                     {'name':'lisi','age':'19'}]">
<table>
<!-- $odd:下標爲奇數的元素 $even:下標爲偶數的元素 -->
  <tr ng-repeat="x in persons">
    
     <!-- 獲取元素的下標值 -->
    <td>{{$index+1}}</td> 
    
    <!-- ng-if相似ms-if進行布爾值判斷顯示 -->
    <td ng-if="$odd" style="background-color:yellow"> {{ x.name }}</td>
    <td ng-if="$even">{{ x.name }}</td>
    <td ng-if="$odd" style="background-color:green"> {{ x.age }}</td>
    <td ng-if="$even">{{ x.age }}</td>
  </tr>
</table>
<span>{{persons[0]}}</span>
</body>

AngularJS 表單操做

外觀頁面

<div ng-app="myApp" ng-controller="myCtrl">

  <!-- novalidate:當提交表單時不對錶單數據（輸入）進行驗證 -->
  <form novalidate>
    First Name:<input type="text" ng-model="user.firstName"><br>
    Last Name:<input type="text" ng-model="user.lastName">

    <br><br>
    
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>
    <font color="red">initInfo = {{initInfo}}</font>
  </p>
</div>

js操做邏輯

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.initInfo = {firstName:"squirrel", lastName:"Python"};
    $scope.reset = function() {

        // user對象等於master對象：深複製
        $scope.user = angular.copy($scope.initInfo);  
    };
    //JS掃描腳本時會自動調用reset方法進行輸入框信息的初始化（函數自動調用）
    $scope.reset();
});

AngualrJS 表單元素綁定

ng-disabled: 綁定控件的disabled屬性
ng-show: 顯示或者隱藏元素：ms-visible
ng-hide: 與ng-show功能剛好相反

css樣式

div.d1{
  width: 20px;
  height: 20px;
 background-color: pink;
 }
 
  div.d2{
   width: 20px;
  height: 20px;
 background-color: black;
 }

外觀頁面

<body ng-app="myApp" ng-controller="myctr">
<div>
請輸入：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切換輸入：<input type="button" value="switch input" ng-click="switchInput();">
</div>

<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input  <!-- 注意ng-model不能做用於單選框 -->

<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>

<hr>
<!-- ng-click：後面能夠直接跟表達式，表達式會直接執行，變量不支持++操做 -->
<input type="button" ng-click="count = count + 1" value="加1">：{{count}}

js操做邏輯

var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
    $scope.flag=false;
    $scope.count=0;
    $scope.switchInput=function(){
        $scope.flag=!$scope.flag;
    };
});

AngularJS 表單驗證

ng-model做用：

ng-model 指令可將輸入域的值與 AngularJS 建立的變量綁定
雙向綁定，在修改輸入域的值時， AngularJS 屬性的值也將修改
數據校驗
ng-model 指令可爲應用數據提供狀態值(invalid, dirty, touched, error)
ng-model 指令基於它們的狀態爲 HTML 元素提供了 CSS 類

css樣式

/*angularJS會根據表單的狀態進行添加或者刪除對應的樣式*/
/*定義輸入框不合法的默認背景顏色*/
input.ng-invalid {
    background-color: grey;
}

/*輸入框數據合法的默認背景顏色*/
input.ng-valid {
    background-color: yellow;
}

外觀頁面

<body ng-app="myApp">
<div ng-controller="myCtrl">
 
  <!-- 將表單輸入域的值與angularJS的變量綁定 -->
  名字: <input ng-model="name"><br>
  angularJS雙向綁定：{{name}}
</div>

<hr>
<p>表單輸入信息校驗</p>
<form  name="myForm01">
    Email:<input type="email" name="myEmail01" ng-model="text">
    
    <!-- ng-show:相似avalon的ms-if的用法，若是校驗不經過則返回true,顯示提示內容，數據校驗不太精確 -->
    <span ng-show="myForm01.myEmail01.$error.email" style="color: red">郵箱地址不合法!</span><br>
        數據校驗結果：<span>{{myForm01.myEmail01.$error.email}}</span>
</form>

<hr>
<p>
    ng-model 指令能夠爲應用數據提供狀態值(invalid, dirty, touched, error)
</p>

<form name="myForm02" ng-init="myText='test@qq.com'">
 Email:<input type="email" name="myEmail02" ng-model="myText" required> <!-- required標識不能爲空，不然不合法 -->
 <h5>狀態</h5>
   <!-- 經過識別表單的email控件按照默認的規則進行校驗 -->
    數據輸入合法：{{myForm02.myEmail02.$valid}} <br> 
    數據改變：{{myForm02.myEmail02.$dirty}} <br>
    觸屏點擊： {{myForm02.myEmail02.$touched}}
</form>

<hr>
<p>ng-model 指令基於它們的狀態爲 HTML 元素提供了 CSS 類</p>
<form  name="myForm03">
    輸入你的名字:<input name="myName" ng-model="text" required>
</form>

相關標籤/搜索

每日一句

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