angular-ui-router
1.簡單示例
1 <html> 2 <head> 3 <title>ui-router</title> 4 <meta http-equiv="pragma" content="no-cache"> 5 <meta http-equiv="cache-control" content="no-cache"> 6 <meta http-equiv="expires" content="0"> 7 <meta http-equiv="keywords"View Codecontent="keyword1,keyword2,keyword3"> 8 <meta http-equiv="description" content="This is my page"> 9 <!-- 導入JS --> 10 <script type="text/javascript" src="JS/angular.min.js"></script> 11 <script type="text/javascript" src="JS/angular-ui-router.min.js"></script> 12 </head> 13 14 <body > 15 <div ng-app="myApp"> 16 <div ui-view></div> <!-- 視圖 --> 17 </div> 18 </body> 19 20 21 <script type="text/javascript"> 22 //定義模板，並註入ui-router 23 var app = angular.module(‘myApp‘, [‘ui.router‘]); 24 //對服務進行參數初始化，這裏配stateProvider服務的視圖控制 25 app.config(["$stateProvider", function ($stateProvider) { 26 $stateProvider 27 .state("home", { 28 url: ‘/‘, 29 template:‘<div>模板內容......</div>‘ 30 }) 31 }]); 32 </script> 33 34 </html>
<html><head><title>ui-router</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!-- 導入JS --><script type="text/javascript" src="JS/angular.min.js"></script><script type="text/javascript" src="JS/angular-ui-router.min.js"></script></head><body ><div ng-app="myApp"><div ui-view></div><!-- 視圖 --></div></body><script type="text/javascript"> //定義模板，並註入ui-router var app = angular.module(‘myApp‘, [‘ui.router‘]); //對服務進行參數初始化，這裏配stateProvider服務的視圖控制 app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("home", { url: ‘/‘, template:‘<div>模板內容......</div>‘ }) }]); </script></html>
angular-ui-router