你的位置:首页 > Java教程

[Java教程]Angularjs基础(三)


    AngularJS ng-model 指令
    ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
ng-model指令
    ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
      实例:
        <div ng-app="myApp" ng-controller="myCtrl">
            名字:<input ng-model="name">
        </div>
        <script>
          var app = angular.module('mgApp',[]);
          app.controller('myCtrl',function($scope){
              $scope.name = "John Doe";
          })
      </script>

双向绑定
    双向绑定,在修改输入域的值时,AngularJS属性的值也将修改:
      实例:
        <div ng-app="myApp" ng-controller="myCtrl">
          名字:<input ng-model="name">
          <h1>你输入了:{{name}}</h1>
        </div>

验证用户输入
    实例:
      <form ng-app="" name="myForm">
        Email:
          <input type="email" name="myAddress" ng-model="text">
          <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
      </form>
      以上实例中,提示信息会在ng-show 属性返回true的情况下显示

应用状态
    ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)
      实例:
        <from ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
            Email:
            <input type="email" name="myAddress" ng-model="myText" required>
            <h1>状态</h1>
            {{myForm.myAddress.$valid}}
            {{myForm.myAddress.$dirty}}
            {{myForm.myAddress.$touched}}
        </from>

CSS 类
    ng-model指令基于他们的状态为HTML 元素提供了CSS类:
      实例;
        <style>
            input .ng-invalid{
              background-color:lightblue;
            }
        </style>
        <body>
          <from ng-app="" name="myForm">
            输入你的名字:
            <input name="myAddress" ng-model="text" required>
          </from>
        </body>
        ng-model 指令根据表单域的状态添加/移除一下类
        ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid
        ng-dirty ng-pending ng-pristine

AngularJS Scope(作用域)

        Scope(作用域) 是应用在HTML(视图)和JavaScript(控制器)之间的纽带。
        Scope是一个对象,有可能的方法和属性。
        Scope可应用在视图和控制器上。

如何使用Scope
      当你在AngularJS创建控制器时,你可以将$scope对象当做一个参数传递:
          实例: 控制器中的属性对应了视图上的属性:
            <div ng-app="myApp" ng-controller="myCtrl">
                <h1>{{carname}}</h1>
            </div>
            <script>
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope){
                $scope.carname = "Volvo";
                })
            </script>
            当在控制器中添加$scope对象时,视图(HTML)可以获取了这些属性
            视图中,你不需要添加$scope前缀,只需要添加属性名即可,如{{carname}}。

Scope概述
    AngularJS应用组成如下:
    View(视图),即HTML。
    Model(模型),当前视图中可用的数据。
    Controller(控制器),即JavaScript 函数,可以添加或修改属性。
    scope 是模型。
    scope是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
      实例: 如果你改变了视图,模型和控制器也会相应更新。
        <div ng-app="myApp" ng-controller = "myCtrl">
            <input ng-model="name">
              <h1>我的名字是{{name}}</h1>
        </div>
        <script>
          var app = angular.module('myApp',[]);
          app.controller('myCtrl',function($scope){
              $scope.name = "John Dow";
          })
        </script>

Scope 作用范围
    了解你当前使用的scope是非常重要的。
      实例:当我们使用ng-repeat 指令时,没个重复项都访问了当前的重复对象。
        <div ng-app="myApp" ng-controller="myCtrl">
          <ul>
            <li ng-repeat="x in name"></li>
          </ul>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
              $scope.names = ["Emil","Tobias","Linus"]
            });
        </script>
        每个<li>元素可以访问当前的重复对象,这里对应用的是一个字符串,并使用变量x 表示。

根作用域
    所有的应用都有一个$rootScope,它可以作用在ng-app 指令包含的所有HTML 元素中。
    $rootScope可作用域整个应用中,是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
    实例:创建控制器时,将$rootScope作为参数传递,可在应用中使用:
      <div ng-app="myApp" ng-controller="myCtrl">
          <h1>{{lastname}} 家族成员:</h1>
          <ul>
              <li ng-repeat="x in name">{{x}}{{lastname}}</li>
          </ul>
      </div>
      <script>
          var app = angular.module('myApp',[]);
          app.controller('myCtrl',function($scope,$rootScope){
            $scope.names = ["Emil","Tobias","Linus"];
            $rootScope.lastname = "Refsnes";
          })
      </script>

 

    AngularJS 控制器
    AngularJs 控制器 控制AngularJS 应用程序的数据。
    AngularJS 控制器是常规的JavaScript对象。
AngularJS 控制器
      AngularJS 应用程序被控制器控制。
      ng-controller指令定义了应用程序控制器。
      控制器时JavaScript对象,由标准的JavaScript对象的构造函数 创建。
        实例:
          <div ng-app="myApp" ng-controller="myCtrl">
              名:<input type="text" ng-model = "firstName"><br>
              姓:<input type="text" ng-model = "lastName">
              姓名:{{firstName +""+lastName}}
          </div>
          <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
                $scope.firstName = "John";
                $scope.lastName = "Doe";
              })
          </script>
      应用解析:
          AngularJS 应用程序由ng-app定义。应用程序在<div>内运行。
          ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。
          myCtrl 函数是一个JavaScript 函数。
          AngularJS 使用$scope对象来调用控制器。
          在AngularJS 使用$scope是一个应用像(属于应用变量和函数)
          控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)的对象。
          控制器在作用域中创建两个属性(firstName 和lastName)。
          ng-model 指令绑定输入域到控制器的属性(firstName 和lastName)。

控制器方法
    上面的石磊演示了一个带有lastName 和firstName 这两个属性的控制器对象。
    控制器也可以有方法变量和函数
    实例
        <div ng-app="myApp" ng-controller="personCtrl">
          名:<input type="text" ng-model="firstName">
          姓:<input type="text" ng-model="lastName">
          姓名:{{fullName()}}
        </div>
        <script>
          var app = angular.module('myApp',[]);
          app.controller('personCtrl',function($scope){
              $scope.firsName = "John";
              $scope.lastName = "Doe";
              $scope.fullName = function(){
                return $scope.firstName + "" +$scope.lastName;
            }
          })
        </script>

外部文件中的控制器
    在大型的应用程序中,通常是把控制器存储在外部文件中。
    只需要把<script>标签中的代码复制到名为personController.js的外部文件中即可:
      实例:
          <div ng-app="myApp" ng-controller = "personCtrl">
              First Name:<input type="text" ng-model = "firstName">
              Last Name:<input type="text" ng-model="lastName">
              Full Name:{{firstName + " " +lastName}}
          </div>
          <script src="personController.js"></script>

其他实例
    实例:
      angular.module('myApp',[]).controller('namesCtrl',function($scope){
      $scope.names = [
          {name:'Jani',country:'Norway'},
          {name:'Hege',country:'Sweden'},
          {name:'Kai',country:'Denmark'}
        ];
      });
    <div ng-repeat="myApp" ng-controller="nameCtrl">
      <ul>
        <li ng-repeat="x in name">
          {{x.name +'x' +x.country]}}
        </li>
      </ul>
    </div>
    <script src="namesController.js"></script>