认识AngularJS

时间 2019-11-20

原文原文链接

AngularJS------认识AngularJS

以前在C#中也常用MVC开发模式，对其的使用有必定的了解，可是如今须要学习AngularJS，这是纯前台的JS代码，那么为何须要学习这个呢，就是想将验证这里所有在前台执行，不须要在后台代码里面出现验证。项目须要，本身仍是得下功夫看下，不要求所有会，简单的使用就OK.html

AngularJS最适于开发客户端的单页面应用，不是功能库，是用来开发动态网页的框架，专一于扩张HTML的功能，提供动态数据绑定。依赖注入，没想到这里也有这个，以前是在IOC中听到过，本身也研究了下，可是对其理解不是很好，这里的依赖注入是让咱们实现关注点分离的方法，意味着你能够很是自由的申明组件，而后你能够经过任意其它组件，呼叫一个它的实例，而后受权，你不须要知道载入顺序，文件位置等。只须要提供它所须要的东西就OK。前端

AngularJS的四大功能

将后台的MVC模式写入了前端语言中。我总以为前端语言未来会很叼，从node.js开始我就又一种这样的感受。可能在好久以后取代后端语言不是没有可能的。node

模块化

就是一系列函数的集合，当应用被启动时，这些函数就会被执行。主要利用angular.module来定义模块。也是Angular.js的亮点。angularjs

指令属性

我本身的理解就是比html标签更加具备能力的指令标签；sql

双向数据绑定

传统的数据绑定是单向绑定，数据只能从model和controller生成须要的html，可是不能返过来使用。只是单方向的。双向数据绑定:也就是说我在前面填写，后面直接生成代码，将填写的显示出来。双向的意思就是若是view修改了属性值，那么model机会看到这个改变。相反也是同样的。编程

View---->Modeljson

 
          <!doctype html> 
         
          <html ng-app> 
         
          <head> 
         
          <meta charset= 
          "utf-8" 
          > 
         
          <script src= 
          "http://code.angularjs.org/angular-1.0.1.min.js" 
          ></script> 
         
          <script src= 
          "main.js" 
          ></script> 
         
          </head> 
         
          <body> 
         
          Your  
          name 
          :<input type= 
          "text"  
          ng-model= 
          "yourname" 
          > 
         
          <hr>  
         
          Hello {{yourname|| 
          "zhanghui" 
          }}! 
         
          </body> 
         
          </html>

Model----->Viewc#

 
          <!doctype html> 
         
          <html ng-app= 
          "AppModule" 
          > 
         
          <head> 
         
          <meta charset= 
          "utf-8" 
          > 
         
          <script src= 
          "http://code.angularjs.org/angular-1.0.1.min.js" 
          ></script> 
         
          <script src= 
          "main.js" 
          ></script> 
         
          </head> 
         
          <body> 
         
          Your  
          name 
          :<input type= 
          "text"  
          ng-model= 
          "yourname" 
          > 
         
          <hr/>  
         
          Hello {{yourname|| 
          "zhanghui" 
          }}! 
         
          <hr/> 
         
          <div ng-controller= 
          "MyController" 
          > 
         
          {{person. 
          name 
          }} 
         
          <hr/> 
         
          <h5>{{clock}}</h5> 
         
          </div> 
         
          </body> 
         
          </html>

 
          var myApp=angular.module( 
          "AppModule" 
          ,[]); 
         
          myApp.controller( 
          'MyController' 
          , 
          function 
          ($scope){ 
         
          $scope.person={ 
          name 
          : 
          "Ahui" 
          }; 
         
          //申明了一个函数 
         
          var updateClock= 
          function 
          (){ 
         
          $scope.clock=new  
          Date 
          ();         
         
          }; 
         
          //申明一个计时器 
         
          var timer=setInterval( 
          function 
          (){ 
         
          $scope.$.apply(updateClock); 
         
          },1000); 
         
          updateClock(); 
         
          });

AngularJS语法--指令属性

什么是指令属性呢，‘指令属性’就是绑定在DOM元素上的函数，它能够调用方法，定义行为，绑定controller及$scope对象，操做DOM等。当浏览器启动开始解析HTML时，DOM元素上的指令属性就会和其它属性同样被解析。后端

当一个Angular.JS应用启动时，Angular.JS编译器就会遍历DOM树(从有ng-app指令属性开始)，解析HTML寻找这些指令属性的函数，找到以后就会将其收集，排序，按照优先级顺序被执行。(每一个指令属性都有优先级)，这些就是Angular.js应用动态性和响应能力的基础。api

在Angular.JS应用中，咱们用指令属性来将行为绑定到DOM上，指令属性的使用，是一个应用可否拥有动态性，响应能力的关键。

ng-model:

 
          <input ng-model= 
          "name"  
          name 
          = 
          "Name"  
          placeholder= 
          "输入你的名字" 
          /> 
         
          <div> 
         
          {{ 
          name 
          }} 
         
          </div>

咱们能够看到它是动态显示的。经过F12能够发如今下面有个class=”ng-binding”,我猜想应该就是将其绑定起来。

这样实现了动态的绑定，ng-model指令属性被用来将DOM文本输入框的值，跟controller里的

ng-init：是一个在启动时运行的函数(在程序进入运行阶段以前)，它让咱们可以在程序运行前设定初始变量的值:

ng-click：给DOM元素注册一个点击事件的监听器此时DOM元素上有点击事件发生，Angular.js就会执行表达式的内容，并相应地更新View;也能够利用ng-click来调用controller里写好绑定到$scope上的函数。

 
          <h5 ng-controller= 
          "MyController" 
          > 
         
          <button ng-click= 
          "sayHello()" 
          >Say hello</button> 
         
          </h5>

 
          app.controller( 
          "MyController" 
          , 
          function 
          ($scope){ 
         
          $scope.sayHello= 
          function 
          (){ 
         
          alert( 
          "Hello Word!" 
          ); 
         
          } 
         
          });

ng-show/ng-hide：根据赋值表达式的值的真假性，来显示和隐藏它们所属的那一部分DOM；以编程的方式显示或隐藏一个元素。

ng-repeat：此指令遍历一个数据集合的每一个数据元素，加载HTML模版把数据渲染出来，被重复使用的模版元素，就是咱们绑定这个属性的DOM元素，每个使用模版渲染的DOM元素都有本身的scope。

看下面的例子

 
          app.controller( 
          "MyController" 
          , 
          function 
          ($scope){ 
         
          $scope.sayHello= 
          function 
          (){ 
         
          alert( 
          "Hello Word!" 
          ); 
         
          } 
         
          //定义了集合，就是一些json格式 
         
          $scope.roommates=[ 
         
          { 
          name 
          : 
          'Ari' 
          }, 
         
          { 
          name 
          : 
          'Q' 
          }, 
         
          { 
          name 
          : 
          'Sean' 
          }, 
         
          { 
          name 
          : 
          'Anand' 
          }         
         
          ] 
         
          //定义了键值对集合 
         
          $scope.people={ 
         
          'Ari' 
          : 
          'orange' 
          , 
         
          'Q' 
          : 
          'purple' 
          , 
         
          'Sean' 
          : 
          'green' 
         
          } 
         
          });

 
          <ul> 
         
          <li ng-repeat= 
          "person in roommates" 
          >{{person. 
          name 
          }}</li>                
         
          </ul>    
         
          <hr/> 
         
          <ul> 
         
          <li ng-repeat= 
          "(name,color) in people" 
          >{{ 
          name 
          }}喜欢的是{{color}}</li>     
         
          </ul>

这里咱们能够发现其实就是将集合里面的值遍历出来，给人的第一感受就是像foreach()，其实里面应该是同样的。“person in roommates”roommates就是后端给的集合，这里在用person一个一个的输出来。

{{}}：双括号表明数据的显示，叫作模版表达式，就和咱们c#中前台的@{}同样，中间能够写C#代码，这个效果是同样的。

angular.module:定义其angular模块，

 
          var myModule=angular.module( 
          "MyModule" 
          ,[]);

建立了一个叫myModule模块，那么如何去使用它了，咱们看下面的代码，使用其指令系统就能够对此模块进行调用。这里是后面一切的前提，咱们只有在页面上标记了ng-app以后，才能写以后的控制器等一系列操做。

 
          <html ng-app= 
          "MyModule" 
          >

ngClass：能够动态的更新类；

ngBind：能够实现双向的数据绑定；

Scopes：这个关键字就和咱们后端MVC中的model模型同样，在Controller和VIew直接传递数据，是一个把View(一个dom元素)链接到controller上的对象，实际上就是一个js对象。c，v均可以访问它，它在两者直接传递数据信息。每个Angular应用都会有一个$rootScope，是最顶级的scope，对应于含有ng-app指令属性的那个dom元素。

ng-controller：Angular中的控制器。在js文件中定义，就能够直接在html页面中写。以下所示：

 
          <div ng-controller= 
          "MyController" 
          > 
         
          {{person. 
          name 
          }} 
         
          </div>

ng-controller指令给所在的dom元素建立了一个新的

 
          MyModule.controller( 
          'MyController' 
          , 
          function 
          ($scope){ 
         
          $scope.person={ 
         
          name 
          : 
          "ahui" 
         
          }; 
         
          });

只要在有ng-controller=’MyController’属性的DOM元素的任何子元素里访问这个person对象，由于它在 $scope上。

这里全部的scope都遵循原型继承，意味着它们都能访问父scope们，对于任何的属性和方法，若当前scope上找不到那就回溯，到父类找，一直往上回溯。一直到$rootScope上。

注意：上面的是MyModule是咱们以前在js文件中声明的，在HTML页面中也标记了，只有这样页面才会使用指令系统。

ng-click：将DOM元素的鼠标点击事件（mousedown浏览器事件）绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，此时绑定的方法就被调用。

 
          <div ng-controller= 
          "ClickController" 
          > 
         
          <button ng-click= 
          "add(1)"  
          class= 
          "button" 
          > 
          Add 
          </button> 
         
          <button ng-click= 
          "subtract(1)"  
          class= 
          "button" 
          >Subtract</button> 
         
          <h4>值为：{{counter}}</h4>         
         
          </div>

 
          //测试onclick事件 
         
          myApp.controller( 
          "ClickController" 
          , 
          function 
          ($scope){ 
         
          $scope.counter=0; 
         
          $scope. 
          add 
          = 
          function 
          (amount){ 
         
          $scope.counter+=amount; 
         
          }; 
         
          $scope.subtract= 
          function 
          (amount){ 
         
          $scope.counter-=amount; 
         
          }; 
         
          });

不管是按钮仍是连接都会被绑定到包含它们DOM元素的controller全部的$scope对象上。

原型继承：

这里的原型继承实际上就和咱们以前在js中里面的原型继承是同样的道理。

 
          //父类 
         
          myModule.controller( 
          "ParentController" 
          , 
          function 
          ($scope){ 
         
          $scope.person={greeted: 
          false 
          }; 
         
          }); 
         
          //子类，声明了一个方法sayHello()。 
         
          myModule.controller( 
          "ChildController" 
          , 
          function 
          ($scope){ 
         
          $scope.sayHello= 
          function 
          (){ 
         
          $scope.person.greeted= 
          true 
          ;    //原型继承，直接调用了父类的方法 
         
          } 
         
          });

前台的写法：

 
          <div ng-controller= 
          "ParentController" 
          > 
         
          <div ng-controller= 
          "ChildController" 
          > 
         
          <input type= 
          "text"  
          ng-model= 
          "person.name"  
          placeholder= 
          "Name" 
          ></input> 
         
          <a ng-click= 
          "sayHello()" 
          >Say Hello</a> 
         
          </div> 
         
          {{person}} 
         
          </div>

效果就像下面的同样：

咱们能够发现子类修改了父类中的属性，这就是原型继承。

原生支持AJAX

Angular.js原生支持AJAX，这样就具备了与一个或多个服务器来回发送请求的能力，这种应用须要跟服务器浏览，获取数据和更新数据。经过服务$http来支持AJAX；

全部的Angular.js的核心服务都用$前缀

$http：它接受一个设置对象，其中指定了如何建立HTTP请求，它将返回一个承诺，其中提供俩个方法：success方法和error方法。它经过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。

 
          $http({ 
         
          method: 
          'JSONP' 
          , 
         
          url: 
          'http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK' 
         
          }).success( 
          function 
          (data,status,headers,config){ 
         
          //输出正确值 
         
          }).error( 
          function 
          (data,status,headers,config){ 
         
          //输出错误值 
         
          });

AngularJS中的表达式

表达式都运行在调用它们的scope里，因此一个表达式可访问并操做其scope上的一切，由此你可使用表达式遍历其scope的属性，调用scope里的函数，或者对scope中的变量进行数学运算。