AngularJS 錨點(diǎn)路由的定義

2018-07-26 17:28 更新

要使用錨點(diǎn)路由功能，需要在先定義它。目前，對(duì)于定義的方法，我個(gè)人只發(fā)現(xiàn)在“初始化”階段可以通過(guò) $routeProvider 這個(gè)服務(wù)來(lái)定義。

在定義一個(gè) app 時(shí)可以定義錨點(diǎn)路由：

<html ng-app="ngView">
  ... ...

<div ng-view></div>

<script type="text/javascript">

angular.module('ngView', [],
  function($routeProvider){
    $routeProvider.when('/test',
      {
        template: 'test',
      }
    );
  }
);

</script>

首先看 ng-view 這個(gè) directive ，它是一個(gè)標(biāo)記“錨點(diǎn)作用區(qū)”的指令。目前頁(yè)面上只能有一個(gè)“錨點(diǎn)作用區(qū)”。有人已經(jīng)提了，“多個(gè)可命名”的錨點(diǎn)作用區(qū)的代碼到官方，但是目前官方還沒(méi)有接受合并，我覺(jué)得多個(gè)作用區(qū)這個(gè)功能是很重要的，希望下個(gè)發(fā)布版中能有。

錨點(diǎn)作用區(qū)的功能，就是讓錨點(diǎn)路由定義時(shí)的那些模板， controller 等，它們產(chǎn)生的 HTML 代碼放在作用區(qū)內(nèi)。

比如上面的代碼，當(dāng)你剛打開(kāi)頁(yè)面時(shí)，頁(yè)面是空白的。你手動(dòng)訪問(wèn) /#/test 就可以看到頁(yè)面上出現(xiàn)了 'test' 的字樣。

在 angular.bootstrap() 時(shí)也可以定義：

angular.bootstrap(document.documentElement, [
  function($routeProvider){
    $routeProvider.when('/test',
      {
        template: 'test'
      }
    );
  }
]);


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)