AngularJS实例入门

最新推荐文章于 2026-01-03 20:57:28 发布

原创最新推荐文章于 2026-01-03 20:57:28 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #嵌入式 #前端 #ViewUI

JavaScript 同时被 2 个专栏收录

8 篇文章

订阅专栏

实例入门

3 篇文章

订阅专栏

AngularJS ：Google的前端JS框架。

版本：[b]v1.2.16[/b]

[color=blue][b](1)基本构造[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1871/3448c46c-bf49-3a81-9ca9-35fe79c9ffd5.png[/img]
[color=blue][b](2)输出数据[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1873/bc07ab86-7291-3abc-af34-68494bd88866.png[/img]
[color=blue][b](3)显示/隐藏[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1875/9f70a9c1-9a5f-3fbb-a68f-9dbc4f35d454.png[/img]
[color=blue][b](4)表单校验[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1877/719d16be-c285-3a24-9cb6-063c2ecc77b0.png[/img]
[color=blue][b](5)表单[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1879/cb5660ed-bd14-3be5-af00-04ad68a66902.png[/img]
[color=blue][b](6)事件监听[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1881/8735352a-ada8-3f6b-8c63-c39a2e45fcc0.png[/img]
[color=blue][b](7)循环输出[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1883/c53c6fe2-e296-3138-9463-bf65657132f8.png[/img]
[color=blue][b](8)循环输出（顺位）[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1885/0d08199d-7b5a-36b9-adae-dd143640df16.png[/img]
[color=blue][b](9)循环输出（操作item）[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1887/17950ec6-af59-303b-af43-255a61601522.png[/img]
[color=blue][b](10)设置CSS类[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1889/49cb34ed-3fff-3e29-80e9-8b6e84d36409.png[/img]
[color=blue][b](11)给src/href绑数据[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1891/bd0ba9fc-7e76-37b9-8ae2-47e3781da9e3.png[/img]
[color=blue][b](12)修改Model同时更新view显示[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1893/6a7ad9ff-76ad-3652-a9c7-8cb33959af6f.png[/img]
[color=blue][b](13)通过$watch监视数据的变化[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1895/b01ee07f-f84d-3dec-bdbf-5bc6594796b5.png[/img]
[color=blue][b](14)定义Module[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1897/f1c0be7e-4745-30b7-a4b4-c0927b3964e9.png[/img]
[color=blue][b](15)注入service实例[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1899/e6dd484e-4e3d-3f24-bf06-3df9b6882f83.png[/img]
[color=blue][b](16)实例化复杂的Service[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1901/d0c84afd-b216-36b0-8dfb-05d8203d33c0.png[/img]
[color=blue][b](17)Module的常用方法[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1903/7f28c65a-0290-3e23-84ca-2d0d861cb9d5.png[/img]
[color=blue][b](18)过滤器[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1905/b0646950-376f-3687-888a-312da192babf.png[/img]
[color=blue][b](19)自定义过滤器[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1907/a4ca2293-106a-303d-80c1-1843816e05f0.png[/img]
[color=blue][b](20)JS代码中使用过滤器[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1909/5e2c966e-57ae-3366-820a-adf654c6ba77.png[/img]
[color=blue][b](21)自定义指令[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1911/24927ba8-db2e-3f73-a8f7-4a6598f5537c.png[/img]
[color=blue][b](22)指令名的各种使用方法[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1913/82ac65af-536a-3525-a25f-36c92e717860.png[/img]
[color=blue][b](23)指令的形式[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1915/0c3cc738-7dcf-3b0d-b413-b6952eadadf8.png[/img]
[color=blue][b](24)替换指令的DOM元素[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1917/ad548a62-7aa8-3ca4-9b4f-c21942d3cae6.png[/img]
[color=blue][b](25)嵌入式模板[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1957/251272dc-282a-3820-8dd6-4277c12c6530.png[/img]
[color=blue][b](26)独立模板文件[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1921/12f7d5c0-be2c-3a41-aa07-df0ebd2a2053.png[/img]
[color=blue][b](27)标签内元素嵌入模板[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1923/54fb894b-a3e2-38b8-bd8d-8b877853f91a.png[/img]
[color=blue][b](28)解析指令前的处理[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1925/da79abee-30aa-3847-a4c1-79132949bbc7.png[/img]
[color=blue][b](29)compile只能被执行一次[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1927/122f2405-d74f-368d-8ae1-250214fb260d.png[/img]
[color=blue][b](30)link可以被执行多次[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1929/53921d5e-c154-3204-b2b1-49907b8dd73b.png[/img]
[color=blue][b](31)同时使用compile和link[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1933/b5287436-6d88-3f1d-a296-1c5e128f2def.png[/img]
[color=blue][b](32)指令的默认scope[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1935/10007053-488a-3e9b-9ce8-ce6c64869025.png[/img]
[color=blue][b](33)指令自己的scope（继承自父元素）[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1937/5a613755-5bc8-3a73-ac44-ddf8e0e75610.png[/img]
[color=blue][b](34)指令自己的scope（和父元素无关）[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1939/36e08045-7d12-36dd-b460-a055675b867b.png[/img]
[color=blue][b](35)指令自己的scope（和父元素无关）-省略属性名[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1941/943bb58d-d675-342c-bce5-325f09b36026.png[/img]
[color=blue][b](36)标签内多个指令间的调用[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1943/3e4096c0-4674-3b84-8db8-5a333483a031.png[/img]
[color=blue][b](37)操作URL[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1945/5dc3354e-b881-3316-b847-a74590e2b1e0.png[/img]
[color=blue][b](38)setTimeOut处理[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1947/b9c6c4b1-df30-3d62-befc-e72ac2441929.png[/img]
[color=blue][b](39)日志处理[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1949/c5f10948-d268-3ad3-9bd2-8b5612d5662d.png[/img]
[color=blue][b](40)捕获异常[/b][/color]

<!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>

[img]http://dl2.iteye.com/upload/attachment/0097/1951/f7a7c6c9-4e57-363b-a7a5-485d9eb0ceb4.png[/img]

AngularJS相关书籍：
[img]http://dl2.iteye.com/upload/attachment/0102/8773/017477de-62b8-3a3d-9168-f73952f6dd21.jpg[/img]

参考：
[url=http://www.angularjshub.com/]http://www.angularjshub.com/[/url]
[url=https://www.ng-book.com/]https://www.ng-book.com/[/url]
[url=http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5]http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5[/url]