1. 程式人生 > >AngularJS單頁面路由配置恩,理解了就很簡單啦

AngularJS單頁面路由配置恩,理解了就很簡單啦

gif htm con function ner 創建 app 插入 樣式

利用route實現單頁面跳轉功能

技術分享

利用angularJS開發流程

1)配置好angularJS開發環境

2)利用 yo angular projectname創建項目目錄

3)刪除掉系統自動生成的一些自己工程不需要的頁面和腳本

4)修改index.html,在

<!-- Add your site or application content here -->

以上註釋下面寫自己的樣式內容,關鍵是

<div class="container-fluid" id="main" style="float:left;width: calc(100% - 240px);">
<div ng-view=""></div>

</div>

ng-view這個div是占位符,利用路由和模板功能將會在這個位置插入各個頁面的html片段

5)需要幾個頁面,就先利用yo angular:route routename創建出幾個路由來,yo會自動生成對應的html和js文件,然後在對應的文件中添加相應內容即可
6)註意函數作用域,哪個頁面的function,也就是所謂的指令,就要在自己所對應的指令js文件中編寫。

AngularJS單頁面路由配置恩,理解了就很簡單啦