AngularJS 單視圖 view

index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

<code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"en"</code> <code>ng-app</code><code>=</code><code>"single_view"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../jslib/angular.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../jslib/angular-route.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"app.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>h1</code><code>&gt;below is the view information ... &lt;/</code><code>h1</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>div</code> <code>ng-view/&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

app.js

<code>angular.module(</code><code>'single_view'</code><code>, [</code><code>'ngRoute'</code><code>]).</code>

<code>  </code><code>config([</code><code>'$routeProvider'</code><code>, </code><code>function</code><code>($routeProvider) {</code>

<code>  </code><code>$routeProvider</code>

<code>  </code><code>.when(</code><code>'/detail/:detailId'</code><code>, {templateUrl: </code><code>'view/detail.html'</code><code>,controller: Detail})</code>

<code>  </code><code>.otherwise({templateUrl: </code><code>'view/hello.html'</code><code>});</code>

<code>}]);</code>

<code>function</code> <code>Detail($scope, $routeParams) {</code>

<code>  </code><code>$scope.detailId = $routeParams.detailId;</code>

<code>}</code>

view/detail.html

<code>&lt;</code><code>h3</code><code>&gt;this is the detail information page ... &lt;/</code><code>h3</code><code>&gt;</code>

<code>&lt;</code><code>h3</code><code>&gt;the detail id is `detailId`&lt;/</code><code>h3</code><code>&gt;</code>

view/hello.html

<code>&lt;</code><code>h3</code><code>&gt;this is the hello page ... &lt;/</code><code>h3</code><code>&gt;</code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1657758