你的位置:首页 > Java教程

[Java教程]Angularjs基础(六)


AngularJS HTML DOM
    AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled指令
    ng-disabled指令直接绑定应用数据到HTML的disabled属性。
      实例:
      <div ng-app="" ng-init="mySwitch=true">
        <p>
          <button ng-disableled="mySwitch">点我!</button>
        </p>
        <p>
          <input type="checkbox" ng-model ="mySwitch">按钮
        </p>
        <p>
          {{ mySwitch }}
        <p>
    </div>
    实例讲解:
        ng-disabled 指令绑定应用程序数据“mySwitch”到HTML 的disabled 属性。
        ng-model 指令绑定 “mySwitch”到HTML input checkbox 元素的内容(value).
        如果mySwitch 为true ,按钮将不可用。
        <p>
          <button disabled>点我!</button>
        </p>
          如果 mySwitch 为false, 按钮则可用:
        <p>
          <button>点我!</button>
        </p>

ng-show 指令
    ng-show 指令隐藏或显示一个HTML 元素。
    实例
      <div ng-app="">
        <p ng-show="true">我是可见的</p>
        <p ng-show="false">我是不可见的</p>
      </div>
    ng-show指令是根据value的值来显示(隐藏)HTML元素。
    你可以使用表达式来计算布尔值(true或false):
    实例:
      <div ng-app="">
        <p ng-show="hour > 12">我是可见的</p>
      </div>

ng-hide指令
    ng-hide指令用于隐藏或者显示HTML 元素。
    实例
      <div ng-app="">
        <p ng-hide="true">我是不可见的</p>
        <p ng-hide="false">我是可见的</p>
      </div>

AngularJS 事件
    AngularJS 有自己的HTML 事件指令

ng-click 指令
    ng-click 指令定义了AngularJS 点击事件
    实例:
      <div ng-app="" ng-controller="myCtrl">
        <button ng-click="count = count +1">点我!</button>
        <p>{{ count }}</p>
      </div>

隐藏HTML元素
    ng-hide 指令用于设计应用部分是否可见
    ng-hide="true"设置HTML元素不可见,
    ng-hide="false"设置HTML 元素不可见。
    实例:
      <div ng-app="myApp" ng-controller="personCtrl">
        <button ng-click="toggle()">>隐藏/ 显示</button>
        <p ng-hide="myVar">
          名:<input type="text" ng-model="firstName">
          姓名:<input type="text" ng-model="lastName">
          Full Name:{{firstName + ""+lastName}}
        </p>
      </div>
      <script>
        var app = angular.module('myApp',[]);
        app.controller('personCtrl',function($scope){
        $scope.firstName = "John",
        $scope.lastName="Doe"
        $.scope.myVar = false;
        $scope.toggle = function(){
            $scope.myVar = !$scope.myVar;
          }
        })
    </script>
    应用解析:
      第一部分 personController与控制器章节类似。
        应用有一个默认属性:$scope.myVar = false;
        ng-hide指令设置<p>元素及两个输入域是否可见,根据myVar的值(true 或false)来设置是否可见
        toggle()函数用于切换myVar 变量的值(true 和false)
        ng-hide="true"让元素不可见。

显示HTML元素
    ng-show 指令可用于设置应用中心的一部分是否可见。
    ng-show="false" 可以设置HTML 元素 不可见。
    ng-show=“true”可以设置HTML元素可见。
      实例:
        <div ng-app="myApp" ng-controller="personCtrl">
          <button ng-click = "toggle()">隐藏/显示</button>
          <p ng-show ="myVar">
          名:<input type="text" ng-model="firstName">
          姓:<input type="text" ng-model="lastName">
          姓名:{{firstName +""+ lastName}}
          </p>
        </div>
        <script>
          var app = angular.module('myApp',[]);
            app.controller('personCtrl',function($scope){
                $scope.firstName = "John",
                $scope.lastName = "Doe"
                $scope.myVar = true;
                $scope.toggle = function(){
                    $scope.myVar = !$scope.myVar;
                }
          })
        </script>

AngularJS 模块
    模块定义了一个应用程序。
    模块是应用程序中不同部分的容器。
    模块是应用控制器的容器。
    控制器通常属于一个模块。

创建模块
    <div ng-app="myApp">...</div>
    <script>
      var app = angular.module("myApp",[]);
    </script>
    “myApp”参数对应执行应用的HTML元素。
    现在你可以在AngularJS 应用中添加控制器,指令,过滤器等。

添加控制器
    你可以使用ng-controller 指令来添加应用的控制器。
    实例:
      <div ng-app="myApp" ng-controller="myCtrl">
        {{firstName + "" +lastName}}
      </div>
      <script>
        var app= angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        })
      </script>

添加指令
      AngularJS 提供了很多内置的命令,你可以使用它们来为你的应用添加功能。
        实例:
          <div ng-app="myApp" runoob-directive></div>
          <script>
            var app = angular.module("myApp",[]);
            app.directive("runoobDirective",function(){
            return{
                template:"我在指令构造器中创建!"
              };
            })
        </script>

模块和控制器包含在JS 文件中
    通常AngularJS 应用程序将模块和控制器包含在JavaScript文档中
    <!DOCTYPE html>
    <html>
      <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">
        {{ firstName + " " + lastName }}
    </div>
    <script src="myApp.js"></script>
      <script src="myCtrl.js"></script>
    </body>
    </html>
      myApp.js
        var app = angular.module("myApp",[]);
        在模块定义中[] 参数用于定义模块的依赖关系。
        中括号[] 表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名。
      myCtrl.js
    app.controller("myCtrl",function($scope){
        $scope.firstName = "John";
        $scope.lastName ="Doe";
    })

函数会影响到全局命名空间
    JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
    AngularJS 模块让所有的函数的作用域在该模块下,避免了该问题。

什么时候载入库?
    在我们的实例中,所有的AngularJS 库都在HTML 文档的头部载入。
    对于HTML应用程序,通常建议把所有的脚本都放置在<body>元素的最底部。
    会提高网页的加载速度,因为HTML加载不受制于脚本加载。
    在我们的多个AngularJS 实例中您将看到AngularJS库是在文档的<head>区域被加载。
    在我们的实例中,AngularJS在<head>元素中被加载,因为对angular.module的调用只能在库加载完后才能进行。
    另一个解决方案在<body>元素中加载AngularJS 库,但是必须放置在您的AngularJS脚本前面:
    实例
      <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        </head>
        <body>
          <div ng-app="myApp" ng-controller="myCtrl">
            {{ firstName + " " + lastName }}
          </div>
        <script>
          var app = angular.module("myApp", []);
          app.controller("myCtrl", function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
          });
        </script>
        </body>
        </html>