AngularJS 錨點定義的業(yè)務(wù)處理

簡單來說，當(dāng)一個錨點路由定義被匹配時，會根據(jù)模板生成一個 $scope ，同時相應(yīng)的一個 controller 就會被觸發(fā)。最后模板的結(jié)果會被填充到 ng-view 中去。

從上面的例子中可以看到，最直接的方式，我們可以在模板中雙向綁定數(shù)據(jù)，而數(shù)據(jù)的來源，在 controller 中控制。在 controller 中，又可以使用到像 $scope ， $routeParams 這些服務(wù)。

這里先提一下另外一種與錨點路由相關(guān)的服務(wù)， $route 。這個服務(wù)里錨點路由在定義時，及匹配過程中的信息。比如我們搞怪一下：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/a',
      {
        template: '{{ title }}',
        controller: function($scope){
          $scope.title = 'a';
        }
      }
    );

    $routeProvider.when('/b',
      {
        template: '{{ title }}',
        controller: function($scope, $route){
          console.log($route);
          $route.routes['/a'].controller($scope);
        }
      }
    );
  }
);

回到錨點定義的業(yè)務(wù)處理中來。我們可以以字符串形式寫模板，也可以直接引用外部文件作為模板：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/test',
      {
        templateUrl: 'tpl.html',
        controller: function($scope){
          $scope.title = 'a';
        }
      }
    );
  }
);

tpl.html 中的內(nèi)容是：

{{ title }}

這樣的話，模板可以預(yù)定義，也可以很復(fù)雜了。

現(xiàn)在暫時忘了模板吧，因為前面提到的，當(dāng)前 ng-view 不能有多個的限制，模板的渲染機(jī)制局限性還是很大的。不過，反正會觸發(fā)一個 controller ，那么在函數(shù)當(dāng)中我們可以盡量地干自己喜歡的事：

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/test',
      {
        template: '{{}}',
        controller: function(){
          $('div').first().html('<b>OK</b>');
        }
      }
    );
  }
);

那個空的 template 不能省，否則 controller 不會被觸發(fā)。