Angular ui-route的用法
引入angular和使用angular子路由時需要的依賴模塊angular-ui-route.js。並且在html中將路由要插入的位置寫上。而在js部分中和angular路由一樣在控制台外面寫
<body> <div ui-view></div> </body> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/angular-ui-route.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app = angular.module('app',['ui.router']); app.config(function($stateProvider,$urlRouterProvider){ }); </script>
這是基本的情況，之后我們應該建立一個新的html來寫
<div> <a href="javascript:;" style="padding-right: 20px;">page1</a> <a href="javascript:;" style="padding-right: 20px;">page2</a> <a href="javascript:;" style="padding-right: 20px;">page3</a> </div>
並且將這新寫的html引入到剛開始的網頁中
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.when('','PageTab');
$stateProvider.state('PageTab',{
url: '/PageTab',
templateUrl: 'PageTab.html'//所引入的路徑
})
});
這樣就形成了基本的路由了，之后我們還要在新建幾個新的html來充當第二級路由。並且把第二個改成
<div> <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a> <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a> <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a> <div ui-view></div> </div>
這樣子我們angular的子路由效果就形成了。
不足之處，望大家多多指出