• AngularJS 基础入门（指令篇）

    一、介绍

         AngularJS 是google 开发人员设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。

        AngularJS特点例如以下：

    •     REST Client： RestFul 是主流的接口模式。而AngularJS实现RestFul 接口client仅仅须要一行代码就可以。
    •     MVVM（Model-View-ViewModel）模式：  Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法。和View 进行交互。这样的设计模式使得代码解耦合。

    •    数据绑定： AngularJS是数据双向绑定。
    •    依赖注入：AngularJS支持注入方式把须要的对象。方法等注入到指定的对象中。
    •    指令： AngularJS内部自带各种经常使用指令，同一时候也支持开发人员自己定义指令。
    •    HTML模板和扩展HTML： AngularJS能够定义与HTML兼容的自己定义模板。

    二、開始AngularJS

        1. lib 引用，在HTML中引入anjularJS lib，例如以下：

    [html] view plaincopy
    1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
           能够在AngularJS官网(https://angularjs.org/)下载最新的版本号 (1.3.8) 。

        2. 简单样例：

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
    6. </head>  
    7.   
    8. <body>  
    9.   
    10. <div ng-app="" ng-controller="personController">  
    11.   
    12. First Name: <input type="text" ng-model="firstName"><br>  
    13. Last Name: <input type="text" ng-model="lastName"><br>  
    14. <br>  
    15. Full Name: {{firstName + " " + lastName}}  
    16.   
    17. </div>  
    18.   
    19. <script>  
    20. function personController($scope) {  
    21.     $scope.firstName = "John";  
    22.     $scope.lastName = "Doe";  
    23. }  
    24. </script>  
    25.   
    26. </body>  
    27. </html>  
           该样例将会在兴许解说到。

           3.推荐学习站点

            http://www.w3schools.com/angular/angular_intro.asp

            http://campus.codeschool.com/courses/shaping-up-with-angular-js/


    三、经常使用指令

        1. Expression: AngularJS 使用双大括号 {{}} 取值。

        2. ng-app： 初始化AngularJS应用，ng-app 是用来声明使用AngularJS载入页面。

        3. ng-bind: 依据HTML元素的变量名，把HTML 元素的值绑定到指定的元素上。

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
    6. </head>  
    7.   
    8. <body>  
    9.   
    10. <div ng-app="">  
    11.     <p>Name: <input type="text" ng-model="name"></p>  
    12.     <p ng-bind="name"></p>  
    13. </div>  
    14.   
    15. </body>  
    16. </html>  


       4. ng-init: 初始化应用数据,使用方式例如以下：

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
    6. </head>  
    7.   
    8. <body>  
    9.   
    10. <div ng-app="" ng-init="firstName='John'">  
    11.   
    12. <p>Name: <input type="text" ng-model="firstName"></p>  
    13. <p>You wrote: {{ firstName }}</p>  
    14.   
    15. </div>  
    16. <script>  
    17. function personController($scope) {  
    18.     $scope.firstName = "John";  
    19.     $scope.lastName = "Doe";  
    20. }  
    21. </script>  
    22.   
    23. </body>  
    24. </html>  
           普通情况下。初始化參数不使用ng-init, 我们会使用model或controller取代它，关于model和controller 会在以下介绍到。

        5. ng-model： ng-model 会绑定HTML controller 的值到应用数据，使用方式例如以下：

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
    6. </head>  
    7.   
    8. <body>  
    9.   
    10. <div ng-app="" ng-controller="personController">  
    11.   
    12. First Name: <input type="text" ng-model="firstName"><br>  
    13. Last Name: <input type="text" ng-model="lastName"><br>  
    14. <br>  
    15. Full Name: {{firstName + " " + lastName}}  
    16.   
    17. </div>  
    18.   
    19. <script>  
    20. function personController($scope) {  
    21.     $scope.firstName="John",  
    22.     $scope.lastName="Doe"  
    23. }  
    24. </script>  
    25.   
    26. </body>  
    27. </html>  
       ng-model 还具有下面功能：

            a.为应用数据提供类型验证（number。require,emai, 将在第七节介绍）;

            b.为应用数据显示状态（invalid, dirty, touched, error, 将在第七节介绍）;

            c. 为HTML 元素提供css 样式；

            d. 绑定元素到表单中。


        6. ng-controller

            AngularJS 应用时被controller控制的。

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
    6. </head>  
    7.   
    8. <body>  
    9.   
    10. <div ng-app="" ng-controller="personController">  
    11.   
    12. First Name: <input type="text" ng-model="firstName"><br>  
    13. Last Name: <input type="text" ng-model="lastName"><br>  
    14. <br>  
    15. Full Name: {{fullName()}}  
    16.   
    17. </div>  
    18.   
    19. <script>  
    20. function personController($scope) {  
    21.     $scope.firstName = "John",  
    22.     $scope.lastName = "Doe",  
    23.     $scope.fullName = function() {  
    24.         return $scope.firstName + " " + $scope.lastName;  
    25.     }  
    26. }  
    27. </script>  
    28.   
    29. </body>  
    30. </html>  

            ng-controller="personController" 是指定controller 对象的名称。在controller 对象中。能够定义属性（$scope.firstName）, 方法（$scope.fullName=function(){...}）等。

        在上面样例中，在personController 对象中创建了两个属性(变量)， 一个函数（function）。


        7. ng-repeat, 是通过遍历集合，循环clone HTML 元素， 类似 for each 功能。

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5. <pre name="code" class="html"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
    [html] view plaincopy
    1. <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">  
    [html] view plaincopy
    1. <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>  


    

    

    

    

    

    
    8. ng-disabled： 禁用元素（text,button, checkbox等）。其值为ture 或false 或者一个返回boolean 的表达式等。
    

    

    

    

    

    
[html] view
 plaincopy

    

    

    

    

      

    1. 
<!DOCTYPE html>  
    2. 
<html>  
    3. 
  
    4. 
<head>  
    5. 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
    6. 
</head>  
    7. 
  
    8. 
<body>  
    9. 
  
    10. 
<div ng-app="" ng-controller="personController">  
    11. 
<input type="button" ng-click="toggle()" value="Toggle1"><br>  
    12. 
<input type="button" ng-disabled="disabledFlag" value="Toggle2"><br>  
    13. 
<br>  
    14. 
  
    15. 
</div>  
    16. 
  
    17. 
<script>  
    18. 
function personController($scope) {  
    19. 
    $scope.disabledFlag = false,  
    20. 
    $scope.toggle = function() {  
    21. 
        $scope.disabledFlag = !$scope.disabledFlag;  
    22. 
        return $scope.disabledFlag;  
    23. 
    }  
    24. 
}  
    25. 
</script>  
    26. 
  
    27. 
</body>  
    28. 
</html>  
    

    

    

    

    

    
    9. ng-show: 显示HTML 元素。值为true时显示，否则不显示。
    

    

    

    

    
    10. ng-hide: 隐藏HTML元素，和ng-show相反。
    

    

    

    

    

    
[html] view
 plaincopy

    

    

    

    

      

    1. 
<!DOCTYPE html>  
    2. 
<html>  
    3. 
  
    4. 
<head>  
    5. 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
    6. 
</head>  
    7. 
  
    8. 
<body>  
    9. 
  
    10. 
<div ng-app="" ng-controller="personController">  
    11. 
  
    12. 
<button ng-click="toggle()">Toggle</button>  
    13. 
  
    14. 
<p ng-show="myVar">  
    15. 
First Name: <input type="text" ng-model="firstName"><br>  
    16. 
Last Name: <input type="text" ng-model="lastName"><br>  
    17. 
<br>  
    18. 
Full Name: {{firstName + " " + lastName}}  
    19. 
</p>  
    20. 
  
    21. 
</div>  
    22. 
  
    23. 
<script>  
    24. 
function personController($scope) {  
    25. 
    $scope.firstName = "John",  
    26. 
    $scope.lastName = "Doe"  
    27. 
    $scope.myVar = true;  
    28. 
    $scope.toggle = function() {  
    29. 
        $scope.myVar = !$scope.myVar;  
    30. 
    };  
    31. 
}  
    32. 
</script>  
    33. 
  
    34. 
</body>  
    35. 
</html>  
    

    

    

    

    

    
    11. ng-click: 类似于click方法，定义AngularJS click 事件。
    

    

    

    

    
    12. ng-include： 包括指定一个内容（html, jsp, tag等）。
    

    

    

    

    

    
[html] view
 plaincopy

    

    

    

    

      

    1. 
<div ng-include="'myUsers_List.htm'"></div>  
    

    
   

    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              ZoneJS 的原理与应用
                
    RxJS 中的观察者和迭代器模式
                
    前端三大框架：数据绑定与数据流
                
    Angular 的前世今生
                
    验证Kubernetes YAML的最佳实践和策略
                
    GitOps初阶指南：将DevOps扩展至K8S
                
    如何使用Istio 1.6管理多集群中的微服务？
                
    5个规则，确保你的微服务优化运行
                
    使用Thanos实现Prometheus指标联邦
                
    丢弃掉那些BeanUtils工具类吧，MapStruct真香！！！
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/tlnshuju/p/7110717.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知