【MVVM】- AngularJS基础学习

阅读量：7042 次

发布时间：2019-06-28

本文共 5131 字，大约阅读时间需要 17 分钟。

Angular JS

AngularJS 基础入门案例

外观页面


       
            Your name:         
    
        
            Hello {
   {various || 'World'}}!
        
                ng-bind01:!
        
            ng-bind02:                
    
            ng-init:{
   {name}}
        ng-init value:

AngularJS 模块

模块是应用控制器的容器，Angularjs代码依赖Jquery，在使用angualrjs代码时，Jquery脚本文件须在AngularJS脚本之前加载，此外一般将脚本代码放置在body元素的底部是为了提供网页的加载速度，因 HTML 加载不受制于脚本加载：换句话说脚本和html代码加载时分开的，为了提供网页的加载速度，可以先将页面显示的html先加载完成后，再加载脚本文件

注意：1个html中只有1个应用，因此页面只有一个模块，如果存在多个以第一个为准

外观页面


    
     {
   { firstName + " " + lastName }}

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 控制器

外观页面

AngularJS 函数绑定

剩余字数:

结果：

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中的对象与视图元素绑定，一方发生数据更新，另一方自动同步更新

controller作用域：负责controller标签包裹的元素的数据处理，如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用原则在Jmeter测试框架，avalon的ms-controller同样体现)

外观页面


    
    
     myCtrl01的作用域
名: 
     
     
姓: 
     
     
     
姓名: {
   {firstName + " " + lastName}}
     
     myCtrl02的作用域
     
      名: 
      
      
姓: 
      
      
      
姓名: {
   {firstName + " " + lastName}}

js操作逻辑

var app = angular.module('myApp', []);//定义控制器myCtrl01app.controller('myCtrl01', function($scope) {        /*      * 后台向scope域中存放对象：页面存放的标签：     * ng-init 初始化变量      * ng-model:初始化变量并进行数绑定    */    $scope.firstName= "John";    $scope.lastName= "Doe";});//定义控制器myCtrl02app.controller('myCtrl02', function($scope) {    $scope.firstName= "Hello";    $scope.lastName= "Python";});

AngularJS 运算表达式

外观页面


    
     quantity:
     {
   {quantity}}
     
插值表达式等价于：
     
     
     
     总价：
     {
   {"quantity*cost="+quantity*cost}}
     
     逻辑运算：
     {
   {quantity<2?quantity:cost}}
     
数组取值：
     {
   {array[2]}}
     
对象属性取值：
     {
   {person.name}}

AngularJS 表格操作

css样式

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

外观操作


    
     
                                                  {
   {$index+1}}                               {
   { x.name }}             {
   { x.name }}              {
   { x.age }}             {
   { x.age }}          
      
     
     {
   {persons[0]}}

AngularJS 表单操作

外观页面


      
       
     
          First Name:
      
      
    Last Name:
          
      
      
        
        
     
  
     form = {
   {user }}
  
         initInfo = {
   {initInfo}}

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

外观页面


    
     请输入：
     {
   {flag}}
     
切换输入：
     
    
    
input:{
   {checkValue}}
stop input  
    
    
ng-show:flag
    
ng-hide:checkValue
    
    
    ：{
   {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;}

外观页面


       
       名字: 
     
     
  angularJS双向绑定：{
   {name}}
    
    
表单输入信息校验
    
         Email:
             
         
     邮箱地址不合法!
     
        数据校验结果：
     {
   {myForm01.myEmail01.$error.email}}
    
    
    ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
    
      Email:
      
      
     状态
   
         数据输入合法：{
   {myForm02.myEmail02.$valid}} 
     
     数据改变：{
   {myForm02.myEmail02.$dirty}} 
     
    触屏点击： {
   {myForm02.myEmail02.$touched}}
    
    
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类
    
         输入你的名字: