AngularJS双向数据绑定案例

angularJS常用属性

ng-app：可在任何元素上使用， 代表angular应用的作用域

什么是双向数据绑定

更新模型，视图自动更新，更新视图，模型自动更新

步骤：    1.导入AngularJS的相关jar包        angular.js        angular.min.js(基本功能，只需要导入这个jar包)        从angularJS1.2版本后，路由功能被单独分离出来，如果要使用路由功能需要导入下面这个jar包（此案例可不引）        angular-route.js        angular-route.min.js        {上面两个jar均都有min版和没有min版，区别在于，min版删除了代码中的空格等空字符，在磁盘上占据的内存较没有min版的要小，如果只是开发，只需要导入min版即可，如果要看源代码，最好导没有min版}    2.创建一个新的html页面    3.在界面导入AngularJs的核心包            4.在标签中完成以下代码编写        
             
     
            
                  
                  
      
                
                       hello, {
      {
      myModel}}            
      
        
     
    5.运行程序，可获得这样的效果   
   
            6.在文本框中输入数据，可获得如下结果     
      
             这里特别注意几个问题：       
        
         ng-app后面没有属性，不要写成ng-app=”“，如果写成这样，双向数据绑定的效果就无法实现 
         {
           {}}中的数据，是ng-model后面写的属性名 
         ng-app是angularJS的入口，所以div必须在标有ng-app的标签内，如果写出去了,或者没有写ng-app，就无法实现功能 如下列这种方式就无法实现效果： 
                  
         
     
        
              
          
     
    
     
        
              hello, {
            {
            myModel}}    
     
       
         
          AngularJS基于模块化的MVC案例         
           
            必须在ng-app后面给上属性名，并且要给定控制器ng-controller=”控制器名称” 
            设置完成之后，可以在script标签中，通过angular.module()初始化模块 
            之后可以定义控制器—— 
                   模块名.controller("控制器名",["$scope...",function($scope) {
              }])或模块名.controller("控制器名",function($scope) {
               })         
            
             1 
                    
           
            以下是实例 
                       
            
        
        
         
            
                      
                  
         
        
         
            
                      hello, {
               {
               myModel}}        
         
    
        
             
            
             实现效果：           AngularJS事件绑定案例           
        
        
    
         
        
                  
                  
                  
              
         
    
         
        
                  hello, {
                  {
                  myModel}}    
         
        
           
               
                效果如下：  点击清空输入框按钮后：             AngularJS集合数据遍历显示案例             
                 
                  循环遍历：ng-repeat，需要对谁循环就在哪个元素上添加这个属性 
                                 
        
                 
          
            
序号
            
商品编号
            
商品名称
            
价格
           
                                    
                        
{ {$index + 1}}
            
{ { product.id}}
            
{ { product.name}}
            
{ { product.price}}
           
             
        
                 
                  
                   1 
                   2 
                   3 
                   4 
                   5 
                   6 
                   7 
                   8 
                   9 
                   10 
                   11 
                   12 
                   13 
                   14 
                   15 
                   16 
                   17 
                   18 
                   19 
                   20 
                   21 
                   22 
                   23 
                   24 
                   25 
                   26 
                   27 
                   28 
                   29 
                   30 
                   31 
                   32 
                   33 
                   34 
                   35 
                   36 
                   37 
                   38 
                   39 
                              效果如下:             AngularJS路由             
                 
                  什么是AngularJS的路由 是协助搭建单页面工程的开源前端框架，通过MVC模式使得开发与测试变得更容易 
                  AngularJS的路由案例 
                             1.导入AngularJS的相关jar包    angular.js    angular.min.js(基本功能，只需要导入这个jar包)    从angularJS1.2版本后，路由功能被单独分离出来，如果要使用路由功能需要导入下面这个jar包（此案例需要使用路由，所以需要引入这个jar包）    angular-route.js    angular-route.min.js2.编写页面布局，因为angularJS路由是基于Ajax方式，所以将angularJS加载变化部分div,指定ng-view(表示切换不同路由页面)3.编写路由配置    在定义模块的时候需要将ngRoute模块当作依赖加载进去：angular.module("ng-app后跟得属性名", ["ngRoute"]);实现代码：    
        
        
         
head
        
                 
         JavaEE        
         Android        
         Ios    
        
    
        
    
        
    
        
        
         
foot
    
        
                 
                  
                   实现结果如下：  点击第二行标签，第三行的数据就会相应的改变