AngularJS 启程二

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
 </head>
 <body ng-app="uniqApp">
   <div ng-controller="firstCtr">
     <p>{{123}}</p>
     <p>{{param}}</p>
   </div>
   <script type="text/javascript" src="./angular.js"></script>
   <script type="text/javascript">
     angular.module('uniqApp',[])
            .controller('firstCtr',['$scope',function(a){
                a.param='abc';
            }])
   </script></body>
</html>
angular 第一个完整小例子
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="uniqApp">
 <div ng-controller="firstCtrl">
  <p>{{123}}</p>
  <p>{{param}}</p>
 </div>
 <div ng-controller="secondCtrl">
    <p>{{param}}</p>
 </div>
 
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
   angular.module('uniqApp',[])
          .controller('firstCtrl',['$scope',function($scope){
            $scope.param='abc';
          }])
          .controller('secondCtrl',['$scope',function(foo){
             foo.param='bar';
          }]);
 </script>
</body>
</html>
例子二
<!DOCTYPE html>
<html lang="en">
<head>
 <title>计算器示例</title>
 
</head>
<body ng-app="topApp">
 <div ng-controller="calculator">
  <p><h2>计算总价</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <p>{{getTotal()}}</p>  
 </div>
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
  angular.module('topApp',[])
         .controller('calculator',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.getTotal=function($scope){
                    return this.count*this.price;
               }
         }]);
 </script>
</body>

</html>
例子三
<!DOCTYPE html>
<html lang="en">
<head>
 <title>计算器示例</title>
 
</head>
<body ng-app="topApp">
 <div ng-controller="calculator">
  <p><h2>计算总价</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <p>{{getTotal()}}</p>  
 </div>
 
  <div ng-controller="calculatorMan">
  <p><h2>计算总价（手动）</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <button ng-click="getTotal()" style="display:block">计算</button>
  <p>{{totalPrice}}</p>  
 </div>
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
  angular.module('topApp',[])
         .controller('calculator',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.getTotal=function($scope){
                    return this.count*this.price;
               }
         }])
         .controller('calculatorMan',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.totalPrice=20;
               $scope.getTotal=function($scope){
                    this.totalPrice = this.count*this.price;
               }
         }]);;
 </script>
</body>

</html>
例子四
<!DOCTYPE html>
<html lang="en">
<head>
 <title>计算器示例</title>
 
</head>
<body ng-app="topApp">
 <div ng-controller="calculator">
  <p><h2>计算总价(自动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <p>{{getTotal()}}</p>  
 </div>
 
  <div ng-controller="calculatorMan">
  <p><h2>计算总价(手动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <button ng-click="getTotal()" style="display:block">计算</button>
  <p>{{totalPrice}}</p>  
 </div>
 <div ng-controller="repeatCtrl">
  <ul>
   <li ng-repeat="person in persons">
     {{person.userName+'-------'+person.age}}
   </li>
  </ul>
 </div>
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
  angular.module('topApp',[])
         .controller('calculator',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.getTotal=function($scope){
                    return this.count*this.price;
               }
         }])
         .controller('calculatorMan',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.totalPrice=20;
               $scope.getTotal=function($scope){
                    this.totalPrice = this.count*this.price;
               }
         }])
         .controller('repeatCtrl',['$scope',function(repeatScope){
                repeatScope.persons=[{userName: 'kobe',age : 39},
                             {userName: 'kobe2',age : 39},
                             {userName: 'kobe3',age : 39},
                             {userName: 'kobe4',age : 39},
                             {userName: 'kobe5',age : 39},
                             {userName: 'kobe6',age : 39},
                             {userName: 'kobe7',age : 39}
                ]
         }]);
 </script>
</body>

</html>
例子四加入遍历
<!DOCTYPE html>
<html lang="en">
<head>
 <title>计算器示例</title>
 
</head>
<body ng-app="topApp">
 <div ng-controller="calculator">
  <p><h2>计算总价(自动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <p>{{getTotal()}}</p>  
 </div>
 
  <div ng-controller="calculatorMan">
  <p><h2>计算总价(手动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <button ng-click="getTotal()" style="display:block">计算</button>
  <p>{{totalPrice}}</p>  
 </div>
 <div ng-controller="repeatCtrl">
  <ul>
   <li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
   </li>
  </ul>
 </div>
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
  angular.module('topApp',[])
         .controller('calculator',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.getTotal=function($scope){
                    return this.count*this.price;
               }
         }])
         .controller('calculatorMan',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.totalPrice=20;
               $scope.getTotal=function($scope){
                    this.totalPrice = this.count*this.price;
               }
         }])
         .controller('repeatCtrl',['$scope',function(repeatScope){
                repeatScope.persons=[{userName: 'kobe',age : 39},
                             {userName: 'kobe2',age : 39},
                             {userName: 'kobe3',age : 39},
                             {userName: 'kobe4',age : 39},
                             {userName: 'kobe5',age : 39},
                             {userName: 'kobe6',age : 39},
                             {userName: 'kobe7',age : 39}
                ]
         }]);
 </script>
</body>

</html>
例子五看看其他index,even,odd作用
<!DOCTYPE html>
<html lang="en">
<head>
 <title>计算器示例</title>
 
</head>
<body ng-app="topApp">
 <div ng-controller="calculator">
  <p><h2>计算总价(自动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <p>{{getTotal()}}</p>  
 </div>
 
  <div ng-controller="calculatorMan">
  <p><h2>计算总价(手动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <button ng-click="getTotal()" style="display:block">计算</button>
  <p>{{totalPrice}}</p>  
 </div>
 <div ng-controller="repeatCtrl">
  <ul>
   <li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
   </li>
  </ul>
 </div>
 <div ng-controller="toggleCtrl">
  <p ng-show="isTrue" ng-bind="param"></p>
  <p ng-hide="isTrue" ng-bind="param2"></p>
  <button ng-click="switchToggle()">切换按钮</button>
 </div>
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
  angular.module('topApp',[])
         .controller('calculator',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.getTotal=function($scope){
                    return this.count*this.price;
               }
         }])
         .controller('calculatorMan',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.totalPrice=20;
               $scope.getTotal=function($scope){
                    this.totalPrice = this.count*this.price;
               }
         }])
         .controller('repeatCtrl',['$scope',function(repeatScope){
                repeatScope.persons=[{userName: 'kobe',age : 39},
                             {userName: 'kobe2',age : 39},
                             {userName: 'kobe3',age : 39},
                             {userName: 'kobe4',age : 39},
                             {userName: 'kobe5',age : 39},
                             {userName: 'kobe6',age : 39},
                             {userName: 'kobe7',age : 39}
                ]
         }])
         .controller('toggleCtrl',['$scope',function(toggleScope){
            toggleScope.isTrue=true;
            toggleScope.param='这是真的';
            toggleScope.param2='这是假的';
            toggleScope.switchToggle=function(){
                toggleScope.isTrue=!toggleScope.isTrue;
            }
         }])
         ;
 </script>
</body>

</html>
指令大集合，ng-bind,ng-show,ng-hide
<!DOCTYPE html>
<html lang="en">
<head>
 <title>计算器示例</title>
 <style>
 .oddClass{
    background:red;
 }
 .evenClass{
    background:green;
 }
 </style>
</head>
<body ng-app="topApp">
 <div ng-controller="calculator">
  <p><h2>计算总价(自动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <p>{{getTotal()}}</p>  
 </div>
 
  <div ng-controller="calculatorMan">
  <p><h2>计算总价(手动)</h2></p>
  <p><label>数量</label><input type="number" ng-model="count"></p>
  <p><label>单价</label><input type="number" ng-model="price"></p>
  <button ng-click="getTotal()" style="display:block">计算</button>
  <p>{{totalPrice}}</p>  
 </div>
 <div ng-controller="repeatCtrl">
  <ul>
   <li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
   </li>
  </ul>
 </div>
 <div ng-controller="toggleCtrl">
  <p ng-show="isTrue" ng-bind="param"></p>
  <p ng-hide="isTrue" ng-bind="param2"></p>
  <button ng-click="switchToggle()">切换按钮</button>
  <div style="180px;height:200px;" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="eventStyle"></div>
  <ul>
   <li ng-class="{oddClass:$odd,evenClass:$even}" ng-repeat="person in persons" ng-bind="{{person.userName+'---------'+person.age}}">
   </li>
  </ul>
 </div>
 <script type="text/javascript" src="./angular.js"></script>
 <script type="text/javascript">
  angular.module('topApp',[])
         .controller('calculator',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.getTotal=function($scope){
                    return this.count*this.price;
               }
         }])
         .controller('calculatorMan',['$scope',function($scope){
               $scope.count=2;
               $scope.price=10;
               $scope.totalPrice=20;
               $scope.getTotal=function($scope){
                    this.totalPrice = this.count*this.price;
               }
         }])
         .controller('repeatCtrl',['$scope',function(repeatScope){
                repeatScope.persons=[{userName: 'kobe',age : 39},
                             {userName: 'kobe2',age : 39},
                             {userName: 'kobe3',age : 39},
                             {userName: 'kobe4',age : 39},
                             {userName: 'kobe5',age : 39},
                             {userName: 'kobe6',age : 39},
                             {userName: 'kobe7',age : 39}
                ]
         }])
         .controller('toggleCtrl',['$scope',function(toggleScope){
            toggleScope.isTrue=true;
            toggleScope.param='这是真的';
            toggleScope.param2='这是假的';
            toggleScope.switchToggle=function(){
                toggleScope.isTrue=!toggleScope.isTrue;
            }
            toggleScope.persons=[{userName:'tom',age:40},
                                {userName:'tom2',age:40},
                                {userName:'tom3',age:40},
                                {userName:'tom4',age:40},
                                {userName:'tom5',age:40}
            ];
            toggleScope.eventStyle={background:'red'};
            toggleScope.enter=function(){
                    toggleScope.eventStyle={background:'green'}
            }
            toggleScope.leave=function(){
                    toggleScope.eventStyle={background:'red'}
            }
         }])
         ;
 </script>
</body>

</html>
ng-class,ng-style,ng-mouseenter,ng-mouseleave
如果有来生，一个人去远行，看不同的风景，感受生命的活力。。。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Frank99/p/9065970.html