【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>