`
rensanning
  • 浏览: 3553318 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量：38233
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量：607654
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量：682841
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量：89568
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量：402165
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量：69772
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量：91865
社区版块
存档分类
最新评论

AngularJS实例入门

 
阅读更多
AngularJS ：Google的前端JS框架。

版本：v1.2.16

(1)基本构造 
<!DOCTYPE html>
<!-- ng-app指令标记了AngularJS脚本的作用域(可在局部使用比如div) -->
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>基本构造</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      // 定义HTML中ng-controller指定的同名函数
      function SampleController($scope) {
        // 借助于参数$scope为页面输出数据
        $scope.message = 'Hello World!';
      }
    //-->
    </script>
  </head>
  <body>
    <!-- ng-controller指令指定控制器 -->
    <h1 ng-controller="SampleController">
      <!-- 用{{}}输出内容 -->
      <p>{{message}}
      <p>{{5 * 3}}
    </h1>
  </body>
</html>


(2)输出数据 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>输出数据</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.simple = '使用简化写法输出内容';
        $scope.directive = '使用指令输出内容';
      }
    //-->
    </script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <p>{{simple}}</p>
      <p ng-bind="directive"></p>
      <!-- 
      ng-bind 和 {{}} 的区别：
      http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular
      -->
    </div>
  </body>
</html>


(3)显示/隐藏 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>显示/隐藏</title>
    <script src="angular.min.js"></script>
  </head>
  <body>
    <div>
      <!-- ng-show的值为true时显示，false时隐藏 -->
      <div ng-show="true"> Visible </div>
      <div ng-show="false"> Invisible </div>
    </div>
  </body>
</html>


(4)表单校验 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
      }
    //-->
    </script>
  </head>
  <body>
    <form novalidate name="myForm" ng-controller="SampleController">
      <input type="text" name="id" ng-model="user.id" required ng-maxlength="6"/>
      <span ng-show="myForm.id.$error.required">Required</span>
      <span ng-show="myForm.id.$error.maxlength">Too long！</span><br/>
      <input type="text" name="pass" ng-model="user.pass" required ng-minlength="5"/>
      <span ng-show="myForm.pass.$error.required">Required</span>
      <span ng-show="myForm.pass.$error.minlength">Too short！</span>
    </form>
  </body>
</html>


(5)表单 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.text = 'TextBox';
        $scope.checkbox = true;
        $scope.radio = 'FUGA';
        $scope.select = 'foo';
      }
    //-->
    </script>
  </head>
  <body>
    <form ng-controller="SampleController">
      <!-- ng-model指令用来捆绑$scope和输入项 -->
      <input type="text" ng-model="text" />
      <input type="checkbox" ng-model="checkbox" />
      <input type="radio" name="hoge" value="HOGE" ng-model="radio" />HOGE
      <input type="radio" name="hoge" value="FUGA" ng-model="radio" />FUGA
      <select ng-model="select">
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
      </select>
      <!-- 用{{}}实时输出内容 -->
      <hr>你输入了： {{text}}
    </form>
  </body>
</html>


(6)事件监听 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>事件监听</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.click = function() {
          $scope.message = 'click button!';
        };
      }
    //-->
    </script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <button ng-click="click()">Button</button>
      <p>{{message}}</p>
    </div>
  </body>
</html>


(7)循环输出 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>循环输出</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.items = [
          {key: 'hoge', value: 'HOGE'},
          {key: 'fuga', value: 'FUGA'},
          {key: 'piyo', value: 'PIYO'}
        ];
      }
    //-->
    </script>
  </head>
  <body>
    <ul ng-controller="SampleController">
      <!-- ng-repeat指令所在的标签会被循环输出 -->
      <li ng-repeat="item in items">
        {{item.key}} : {{item.value}}
      </li>
    </ul>
  </body>
</html>


(8)循环输出（顺位） 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>循环输出（顺位）</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.items = [
          {key: 'hoge', value: 'HOGE'},
          {key: 'fuga', value: 'FUGA'},
          {key: 'piyo', value: 'PIYO'}
        ];
      }
    //-->
    </script>
  </head>
  <body>
    <ul ng-controller="SampleController">
      <!-- $index标示现在输出的顺位（以0开始） -->
      <li ng-repeat="item in items">
      {{$index + 1}} {{item.key}} : {{item.value}}
      </li>
    </ul>
  </body>
</html>


(9)循环输出（操作item） 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>循环输出（操作item）</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.items = [
          {key: 'hoge', value: 'HOGE', score: 78.5},
          {key: 'fuga', value: 'FUGA', score: 88.5},
          {key: 'piyo', value: 'PIYO', score: 68.5}
        ];
      }

      function ItemController($scope) {
        $scope.increment = function() {
          $scope.item.score++;
        }
      }
    //-->
    </script>
  </head>
  <body>
    <ul ng-controller="SampleController">
      <li ng-repeat="item in items" ng-controller="ItemController">
      {{$index + 1}} {{item.key}} : {{item.value}} : {{item.score}}
      <button ng-click="increment()">+1</button>
      </li>
    </ul>
  </body>
</html>


(10)设置CSS类 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>设置CSS类</title>
    <script src="angular.min.js"></script>
    <style>
      .red { color: red; }
      .blue { color: blue; }
      .solid-border { border: 1px solid black; }
      .dotted-border { border: 1px dotted black; }
      li { margin-top: 10px; }
    </style>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.hoge = 'red solid-border';
        $scope.isRed = true;
        $scope.isDotted = true;
      }
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <ul>
      <!-- ng-class指令通过Angular表达式设置CSS类
        字符串的时候，空格隔开多个class
        可以直接使用数组表示多个class
        对象的时候，通过{class名:是否显示}来设置
      -->
      <li ng-class="hoge">hoge</li>
      <li ng-class="['blue', 'solid-border']">fuga</li>
      <li ng-class="{'red': isRed, 'dotted-border': isDotted}">piyo</li>
    </ul>
  </body>
</html>


(11)给src/href绑数据 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>给src/href绑数据</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.url = 'http://www.baidu.com';
        $scope.imageFileName = 'bdlogo.gif';
      }
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <!-- src/href绑数据时需要使用ng-src/ng-href -->
    <img ng-src="./{{imageFileName}}" />
    <a ng-href="{{url}}">link</a>
  </body>
</html>


(12)修改Model同时更新view显示 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>修改Model同时更新view显示</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        // 初始显示
        $scope.message = 'hoge';
        // 点击后显示
        $scope.change = function() {
          // 通过$scope显示的值可以直接修改后自动刷新显示
          $scope.message = 'change!!';
        }
      }
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <h1>{{message}}</h1>
    <button ng-click="change()">change!!</button>
  </body>
</html>


(13)通过$watch监视数据的变化 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>通过$watch监视数据的变化</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.hoge = 0;
        $scope.fuga = 0;
        $scope.sum = 0;

        // 同时监视多个值的变化
        //  第一个参数（watchFn）：返回监视的值,可以是Angular表达式也可以是函数
        //  第二个参数（watchAction）：值变化时执行的Angular表达式也可以是函数
        $scope.$watch('hoge + fuga', 'sum = hoge + fuga');
      }
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
      hoge : <input type="number" ng-model="hoge" /><br />
      fuga : <input type="number" ng-model="fuga" /><br />
      <p>总计 : {{sum}}</p>
  </body>
</html>


(14)定义Module 
<!DOCTYPE html>
<html ng-app="myModule"><!-- ng-app指令设置Module名 -->
  <head>
    <meta charset="UTF-8">
    <title>定义Module</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        // 创建一个module，如果已经存在该module将会被覆盖
        // 单纯获取一个module使用angular.module('myModule')
        var myModule = angular.module('myModule', []);

        myModule.controller('SampleController', function($scope) {
          $scope.message = 'module';
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <h1>{{message}}</h1>
  </body>
</html>


(15)注入service实例 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>注入service实例</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        var myModule = angular.module('myModule', []);

        // 为Module登录Service（任意Class）
        //   第一个参数：service名
        //   第二个参数：service构造函数
        myModule.service('sampleService', SampleService);

        // controller中和登录过的service名相同的参数会被自动注入service实例
        myModule.controller('SampleController', function($scope, sampleService) {
          $scope.message = sampleService.method();
        });

        function SampleService() {
          this.method = function() {
            return 'sample service';
          };
        }
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <h1>{{message}}</h1>
  </body>
</html>


(16)实例化复杂的Service 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>实例化复杂的Service</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        var myModule = angular.module('myModule', []);

        // Service实例生成很复杂的时候使用factory()
        myModule.factory('sampleService', function() {
          return {
            method: function() {
              return 'sample service created by factory.'
            }
          };
        });

        myModule.controller('SampleController', function($scope, sampleService) {
          $scope.message = sampleService.method();
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <h1>{{message}}</h1>
  </body>
</html>


(17)Module的常用方法 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>Module的常用方法</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .service('myService', function() {
          this.method = function() {
            console.log('myService.method()');
          };
        })
        .provider('myProvider', function() {
          var _name;
          this.setName = function(name) {
            _name = name;
          };
          this.$get = function() {
            return {name: _name};
          };
        })
        .constant('myConstant', 'HOGE')
        .constant('myConstantObj', {name: 'Fuga'})
        .value('myValue', 'PIYO')
        .config(function(myProviderProvider, myConstant, myConstantObj) {
          console.log('config');

          myProviderProvider.setName('myProvider.name');

          console.log('myConstant = ' + myConstant + ', myConstantObj.name = ' + myConstantObj.name);
          myConstantObj.name = 'FUGA';
        })
        .run(function(myService, myProvider, myConstant, myConstantObj, myValue) {
          console.log('run');

          myService.method();
          console.log(myProvider.name);
          console.log('myConstant = ' + myConstant + ', myConstantObj.name = ' + myConstantObj.name+ ', myValue = ' + myValue);
        });
      })();
    //-->
    </script>
  </head>
  <body>
  </body>
</html>


(18)过滤器 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($scope) {
        $scope.money = 1000;

        $scope.array1 = ["hoge", "fuga", "piyo"];
        $scope.array2 = [
          "hoge",
          "fuga",
          {a: "hoge"},
          {a: "fuga"},
          {b: {c: "hoge"}},
          {b: {c: "fuga"}},
        ];

        $scope.physicists = [
          {firstName: 'Johannes', lastName: 'Kepler'},
          {firstName: 'Galileo',  lastName: 'Galilei'},
          {firstName: 'Thomas',   lastName: 'Young'},
          {firstName: 'Michael',  lastName: 'Faraday'},
          {firstName: 'Edward',   lastName: 'Morley'},
          {firstName: 'Niels',    lastName: 'Bohr'}
        ];

        $scope.isEvenNumber = function(number) {
          return number % 2 == 0;
        };

        $scope.contains = function(actual, expected) {
          return actual.indexOf(expected) != -1;
        };

        $scope.date = new Date();

        $scope.values = [
          {name: 'taro',    age: 15, height: 165},
          {name: 'takeshi', age: 12, height: 155},
          {name: 'taichi',  age: 15, height: 160},
          {name: 'takuya',  age: 17, height: 170}
        ];
      }
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
      <!-- {{value | filter}} -->
      <h1>{{money | currency}}</h1>

      <!-- {{ filter_expression | filter : expression : comparator }} -->
      <pre>{{array1 | filter:"g" | json}}</pre>
      <pre>{{array2 | filter:"h" | json}}</pre>

      <!-- filter中使用对象属性 -->
      <ul>
        <li ng-repeat="physicist in physicists | filter:{firstName:'e', lastName: 'l'}">
          {{physicist.firstName}} {{physicist.lastName}}
        </li>
      </ul>

      <!-- filter中使用函数 -->
      <p>{{[1, 2, 3, 4, 5] | filter:isEvenNumber}}</p>

      <!-- 定义比较器 -->
      <p>{{["a", "A", "ab", "c"] | filter:"a":true}}</p>
      <p>{{["a", "A", "ab", "c"] | filter:"a":false}}</p>
      <p>{{["a", "A", "ab", "c"] | filter:"a":contains}}</p>

      <!-- 设置各种各样的输出形式 -->
      <p>{{1000 | currency:"￥"}}</p>

      <p>{{1000 | number:3}}</p>

      <p>{{"HOGE" | lowercase}}</p>
      <p>{{"fuga" | uppercase}}</p>

      <p>{{date | date:"yyyy/MM/dd HH:mm:ss.sss"}}</p>

      <!-- 表达式中使用属性名的字符串 -->
      <ul>
        <li ng-repeat="value in values | orderBy:['age', 'height']">
          {{value.name}}({{value.age}})({{value.height}} cm)
        </li>
      </ul>
  </body>
</html>


(19)自定义过滤器 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      var module = angular.module('myModule', []);

      module.filter('myFilter', function() {
        return function(value, param1, param2) {
          return param1 + value + param2;
        };
      });
    //-->
    </script>
  </head>
  <body>
      <h1>{{"hoge" | myFilter:"<":">"}}</h1>
  </body>
</html>


(20)JS代码中使用过滤器 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>JS代码中使用过滤器</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        var myModule = angular.module('myModule', []);

        myModule.controller('SampleController', function($scope, $filter) {
          var filter = $filter('json');
          var str = filter({name: 'Taro', age: 17});
          $scope.str = str;
          console.log(str);
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
  {{str}}
  </body>
</html>


(21)自定义指令 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        // 定义指令
        .directive('myHoge', function() {
          return {
            template: '<u>message = {{message}}</u>'
          };
        })
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge';
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
      <h1 my-hoge>some string</h1>
  </body>
</html>


(22)指令名的各种使用方法 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>指令名的各种使用方法</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            template: '<u>message = {{message}}</u>'
          };
        })
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge';
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <!-- 以下用法都正确 -->
    <h1 my-hoge>some string</h1>
    <h1 my:hoge>some string</h1>
    <h1 my_hoge>some string</h1>
    <h1 data-my-hoge>some string</h1>
    <h1 data-my:hoge>some string</h1>
    <h1 data-my_hoge>some string</h1>
    <h1 x-my-hoge>some string</h1>
    <h1 x-my:hoge>some string</h1>
    <h1 x-my_hoge>some string</h1>
  </body>
</html>


(23)指令的形式 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>指令的形式</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            restrict: 'E', // E-元素 A-属性 C-样式 M-注释
            template: '<h1>hoge</h1>'
          };
        })
        .directive('myFuga', function() {
          return {
            restrict: 'A',
            template: 'fuga'
          };
        })
        .directive('myPiyo', function() {
          return {
            restrict: 'CA',
            template: 'piyo'
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <my-hoge></my-hoge>
    <h1 my-fuga></h1>
    <h1 class=my-piyo></h1>
    <h2 my-piyo></h2>
  </body>
</html>


(24)替换指令的DOM元素 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>替换指令的DOM元素</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            restrict: 'E',
            replace: true,
            template: '<h1>hoge</h1>'
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <my-hoge></my-hoge>
  </body>
</html>


(25)嵌入式模板 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>嵌入式模板</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            // <script>的ID
            templateUrl: 'hogeTemplate'
          };
        })
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge';
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <div my-hoge></div>
  </body>
</html>

<!--  嵌入式模板 -->
<script type="text/ng-template" id="hogeTemplate">
  <h2>message = {{message}}</h2>
</script>


(26)独立模板文件 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>独立模板文件</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            // 通过XMLHttpRequest调入
            // ！！！不支持file:///协议，需要Web服务器！！！
            templateUrl: 'sample1-26-tpl.html'
          };
        })
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge';
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <div my-hoge></div>
  </body>
</html>

<h2>message = {{message}}</h2>


(27)标签内元素嵌入模板 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>标签内元素嵌入模板</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            transclude: true,
            template: '<div>Tag data = <span ng-transclude></span></div>'
          };
        })
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge';
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
    <h1 my-hoge>hoge</h1>
  </body>
</html>


(28)解析指令前的处理 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>解析指令前的处理</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            // 显示指令内容前的处理 
            //  $element：指令所在元素 $attr：指令所在元素的属性
            compile: function($element, $attr) {
              console.log('compile');
              console.log('$attr.id = ' + $attr.id);
              $element.append('<li>four</li>');
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <ul my-hoge id="list">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
  </body>
</html>


(29)compile只能被执行一次 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>compile只能被执行一次</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            restrict: 'E',
            compile: function($element, $attr) {
              // 跟指令的实例个数无关，即使处于循环之中也只执行一次
              console.log('compile');
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <ul>
      <li ng-repeat="i in [1, 2, 3]">
        <my-hoge />
      </li>
    </ul>
  </body>
</html>


(30)link可以被执行多次 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>link可以被执行多次</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            restrict: 'E',
            link: function($scope, $element, $attr) {
              // link每个指令的实例执行一次
              console.log('link');
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <ul>
      <li ng-repeat="i in [1, 2, 3]">
        <my-hoge />
      </li>
    </ul>
  </body>
</html>


(31)同时使用compile和link 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>同时使用compile和link</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myHoge', function() {
          return {
            restrict: 'E',
            compile: function($element, $attr) {
              console.log('compile');

              // compile的返回值就是link函数
              return function($scope, $element, $attr) {
                console.log('link');
              };
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <ul>
      <li ng-repeat="i in [1, 2, 3]">
        <my-hoge />
      </li>
    </ul>
  </body>
</html>


(32)指令的默认scope 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>指令的默认scope</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .controller('SampleController', function($scope) {
          $scope.message = 'sample controller';
        })
        .directive('myHoge', function() {
          return {
            restrict: 'E',
            link: function($scope) {
              // 默认是父元素所对应的scope，可以直接使用或修改数据
              console.log('$scope.message = ' + $scope.message);
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <my-hoge />
    </div>
  </body>
</html>


(33)指令自己的scope（继承自父元素） 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>指令自己的scope（继承自父元素）</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        var parentScope;

        angular.module('myModule', [])
        .controller('SampleController', function($scope) {
          $scope.message = 'sample controller';
          parentScope = $scope;
        })
        .directive('myHoge', function() {
          return {
            restrict: 'E',
            scope: true,// 设置成true，继承父元素的scope但是一个新的scope
            link: function($scope) {
              // 这里的scope就不是父元素的scope，追加修改scope的数据不会对父元素造成影响
              console.log('($scope === parentScope) = ' + ($scope === parentScope));// false
              console.log('$scope.message = ' + $scope.message);
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <my-hoge />
    </div>
  </body>
</html>


(34)指令自己的scope（和父元素无关） 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>指令自己的scope（和父元素无关）</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        var parentScope;

        angular.module('myModule', [])
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge fuga piyo';
          $scope.func = function() {
              return 'HOGE FUGA PIYO';
          };
          parentScope = $scope;
        })
        .directive('myHoge', function() {
          return {
            restrict: 'A',
            scope: {
              msg: '=myMessage', // =<属性名> 单纯的字符串
              str: '@myString',  // @<属性名> 字符串中可以使用{{}}
              func: '&myFunc'    // &<属性名> 函数
            }, // scope是一个对象的时候，跟父元素的scope将无关
            link: function($scope) {
              // 这里的scope是一个新的对象
              console.log('($scope === parentScope) = ' + ($scope === parentScope));// false
              console.log('$scope.message = ' + $scope.message); // undefined

              console.log('$scope.msg = ' + $scope.msg);
              console.log('$scope.str = ' + $scope.str);
              console.log('$scope.func() = ' + $scope.func());
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <div ng-controller="SampleController">
      <div my-hoge my-message="message" my-string="message, {{message}}" my-func="func()"></div>
    </div>
  </body>
</html>


(35)指令自己的scope（和父元素无关）-省略属性名 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>指令自己的scope（和父元素无关）-省略属性名</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        var parentScope;

        angular.module('myModule', [])
        .controller('SampleController', function($scope) {
          $scope.message = 'hoge fuga piyo';
          $scope.func = function() {
            return 'HOGE FUGA PIYO';
          };
          parentScope = $scope;
        })
        .directive('myHoge', function() {
          return {
            restrict: 'A',
            scope: {
              myMessage: '=',// scope对象的属性名和指令的属性名相同的时候，可以省略
              myString: '@',
              myFunc: '&'
            }, 
            link: function($scope) {
              console.log('($scope === parentScope) = ' + ($scope === parentScope));// false
              console.log('$scope.message = ' + $scope.message); // undefined

              console.log('$scope.msg = ' + $scope.myMessage);
              console.log('$scope.str = ' + $scope.myString);
              console.log('$scope.func() = ' + $scope.myFunc());
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <div ng-controller="SampleController">
        <div my-hoge my-message="message" my-string="message, {{message}}" my-func="func()"></div>
    </div>
  </body>
</html>


(36)标签内多个指令间的调用 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>标签内多个指令间的调用</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .directive('myParent', function() {
          return {
            // 指令间调用的话，被调用侧使用controller
            controller: function() {
              this.method = function() {
                console.log('Parent Controller');
              };
            }
          };
        })
        .directive('myChild', function() {
          return {
            // 调用侧require调用的指令名
            //  <指令名> 该指令不存在的时候抛异常
            //  <@指令名> 该指令不存在的时候忽略
            //  <^指令名> 查找父元素的该指令，比如<my-parent> <my-child /> </my-parent>
            require: 'myParent',
            // link的第4个参数指定被调用侧的controller
            link: function($scope, $element, $attr, cntroller) {
              cntroller.method();
            }
          };
        });
      })();
    //-->
    </script>
  </head>
  <body>
    <div my-parent my-child> </div>
  </body>
</html>


(37)操作URL 
<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <title>操作URL</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      function SampleController($location, $filter) {
        var str = 'absUrl() = ' + $location.absUrl() + '\r\n'
                + 'url() = ' + $location.url() + '\r\n'
                + 'protocol() = ' + $location.protocol() + '\r\n'
                + 'host() = ' + $location.host() + '\r\n'
                + 'port() = ' + $location.port() + '\r\n'
                + 'path() = ' + $location.path() + '\r\n'
                + 'search() = ' + $filter('json')($location.search()) + '\r\n'
                + 'hash() = ' + $location.hash() + '\r\n';
        console.log(str);
      };
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
  </body>
</html>


(38)setTimeOut处理 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>setTimeOut处理</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .run(function($timeout) {
          var promise = $timeout(function() {
            console.log('hoge');
          }, 1000);

          console.log('fuga');

          promise.then(function() {
            console.log('piyo');
          });
        });
      })();
    //-->
    </script>
  </head>
  <body>
  </body>
</html>


(39)日志处理 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>日志处理</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .config(function($logProvider) {
          $logProvider.debugEnabled(false);
        })
        .run(function($log) {
          $log.log('log');
          $log.debug('debug');
          $log.info('info');
          $log.warn('warn');
          $log.error('error');
        });
      })();
    //-->
    </script>
  </head>
  <body>
  </body>
</html>


(40)捕获异常 
<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <meta charset="UTF-8">
    <title>捕获异常</title>
    <script src="angular.min.js"></script>
    <script language="JavaScript">
    <!--
      (function() {
        angular.module('myModule', [])
        .config(function($provide) {
          $provide.decorator('$exceptionHandler', function($delegate) {
            // 发生异常时的处理
            return function(exception, cause) {
              console.log('intercept');
              $delegate(exception, cause);
            };
          });
        })
        .controller('SampleController', function($scope) {
          notExists.method();
        });
      })();
    //-->
    </script>
  </head>
  <body ng-controller="SampleController">
  </body>
</html>



AngularJS相关书籍：


参考：
http://www.angularjshub.com/
https://www.ng-book.com/
http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5
  • 大小: 4.4 KB
  • 大小: 4 KB
  • 大小: 3.7 KB
  • 大小: 3.9 KB
  • 大小: 4.6 KB
  • 大小: 3.8 KB
  • 大小: 4 KB
  • 大小: 4.1 KB
  • 大小: 4.6 KB
  • 大小: 5.5 KB
  • 大小: 6.6 KB
  • 大小: 5.2 KB
  • 大小: 4.3 KB
  • 大小: 3.8 KB
  • 大小: 4.2 KB
  • 大小: 6.1 KB
  • 大小: 10.2 KB
  • 大小: 10 KB
  • 大小: 4 KB
  • 大小: 3.7 KB
  • 大小: 4.1 KB
  • 大小: 5.5 KB
  • 大小: 4.6 KB
  • 大小: 12.2 KB
  • 大小: 3.6 KB
  • 大小: 4.3 KB
  • 大小: 3.8 KB
  • 大小: 8.3 KB
  • 大小: 8.3 KB
  • 大小: 8.5 KB
  • 大小: 8.5 KB
  • 大小: 8.9 KB
  • 大小: 10 KB
  • 大小: 10 KB
  • 大小: 8.3 KB
  • 大小: 10.2 KB
  • 大小: 8.4 KB
  • 大小: 8.7 KB
  • 大小: 11.9 KB
  • 大小: 3.8 KB
  • 大小: 114.5 KB
分享到：
| PhoneGap和Cordova的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AngularJs入门学习实例

    **AngularJS 入门学习实例** AngularJS 是一个强大的前端JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（Model-View-Controller）架构模式简化了开发过程，提供数据绑定、依赖注入、模块化等功能...

    AngularJS入门教程之表格实例详解

    AngularJS 实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; &lt;div ng-app=myApp ng-controller=customersCtrl&gt; &lt;t

    AngularJS 中文版 入门 基础 教程

    **AngularJS 中文版 入门 基础 教程** AngularJS 是一款由Google维护的开源JavaScript框架，主要用于构建动态web应用。它通过MVC（Model-View-Controller）架构模式，使得前端开发更加模块化，提高了开发效率。本...

    AngularJS入门教程中SQL实例详解

    在本入门教程中，我们将深入理解如何在AngularJS应用程序中使用SQL，以及如何通过HTTP服务从服务器获取由SQL查询处理的数据。 AngularJS是一个流行的前端JavaScript框架，它提供了一个强大的数据绑定和依赖注入机制...

    AngularJS实战.pdf 中文完整版

    AngularJS实战通过理论与实践相结合的方式，精选了92个简洁、实用的实例，用由浅入深、逐层推进的方式，详细地展示了Angular作为前端Web页面开发新利器的方方面面。通过本书的学习，读者不仅可以全面了解并掌握整个...

    AngularJS入门小Demo

    你只需在需要的地方声明依赖，AngularJS 会自动提供实例。 9. **表达式**：AngularJS 表达式允许在 HTML 中直接嵌入 JavaScript 代码，以计算值或执行操作。比如 `{{ variable }}` 用于显示变量的值。 10. **模板*...

    AngularJS 2.0入门权威指南

    学习 Angular 2 当越来越多的 web app 使用 Angular 1构建的时候，更快更强大的 Angular 2 将会很快成为新的标准。 Angular的新约定使得它更容易去学习、更...运行实例是学习一个 Angular app 如何实现的最快的方式。

    angularjs入门已经常用的小插件

    **AngularJS 入门与常用小插件详解** AngularJS，作为一款强大的前端JavaScript框架，由Google维护，广泛应用于构建动态Web应用。它通过MVC（Model-View-Controller）架构模式，使得开发者能够更有效地组织和管理...

    AngularJs 60分钟入门基础教程

    在这份60分钟入门基础教程中，会涵盖AngularJs的核心概念，包括Directive（指令）、Data Binding（数据绑定）、Filter（过滤器）和Module（模块）。掌握这些概念将有助于理解AngularJs框架的架构。 首先，AngularJs...

    AngularJS入门教程之服务(Service)

    例如，如果你要使用内置的$location服务，你需要在控制器的函数参数中声明$location，这样AngularJS就会在运行时自动为你注入$location服务的实例。 值得注意的是，从AngularJS 1.4.x版本开始，ng-app指令被移除，...

    AngularJS入门教程之MVC架构实例分析

    本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考，具体如下： MVC应用程序架构最早于1970年起源于Smalltalk语言，后来在桌面应用程序开发中使用较为广泛，如今在WEB开发中也非常流行。MVC的核心思想是將...

    AngularJS入门教程之数据绑定原理详解

    ### 数据绑定的实例 - **ng-model**：ng-model用于实现表单输入和应用数据之间的双向绑定。当用户在输入框中输入数据时，ng-model会自动更新对应的数据模型。反之，当数据模型更新时，ng-model也会更新输入框中的...

    AngularJS入门教程之Select(选择框)详解

    AngularJS是一个流行的前端JavaScript框架，由Google团队开发，用以构建动态Web应用程序。其中，Select（选择框）控件是用户交互中常用的元素之一，它允许用户从一组选项中进行选择。AngularJS通过ng-options指令...

Magicbox
Global site tag (gtag.js) - Google Analytics