angular中的路由

推荐一个http://zeus.softweek.net/item-slt-1.html

AngularJS框架中的ng-route中的路由不支持多视图工作,

也就是说项目中只能有一个" ng-view",就算写了多个也只能有一个运作.

也许是发现了angular这个不足所以开发者以插件的形式提供了另一种路由方式---"ng-route".

这就是我们今天将要讲解的内容.

1:引用相关文件,搭建环境

  <script src="lib/angular/angular-1.4.9/angular.js"></script>
  <script src="lib/angular/angular-ui-router.min.js"></script>

2:基本路由

index.html

导航

     <ul class="nav navbar-nav  "> 
   <span style="white-space:pre">	</span> <li ><a ui-sref-active="active" ui-sref="projects">Projects</a></li> 
<span style="white-space:pre">	</span><li><a ui-sref-active="active" ui-sref="assets">Assets</a></li> 
<span style="white-space:pre">	</span><li><a ui-sref-active="active" ui-sref="reports">Reports</a></li> 
     </ul> 

ui-sref-active 查看当前激活状态并设置 Class

视图

    <div ui-view="settingView"></div>  

router.js

angular.module('myApp', [ 'ui.router'])
 // configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {  
/* $urlRouterProvider.otherwise('/projects');*/ 设置默认路由
    $stateProvider
      .state('projects', { //对应页面中的"ui-sref"指定的名称
                 url: '/projects',   //显示在url中的名称
                 views: {"main": {templateUrl: 'home/projects.html'} }
        })   
        .state('assets', {
                url: '/assets',
                 views: {"main": {templateUrl: 'home/assets.html'} }
        })
         .state('reports', {
                url: '/reports',
                 views: { //项目中有多个视图时候 要用这个属性指定此链接触发的内容将要放到哪个视图中.
                 "main": {templateUrl: 'home/reports.html'} }
        })

        ;
});

以上是最基本的路由.我们在这里姑且叫它“主要菜单”。

现在的效果是：我点击其中一个的时候，页面的内容被各自的htm替换 了。

这个效果就像我们平常用的a标签效果是一样的，切换不同的a链接，页面内容被替换。

那么问题就来了，现在有个需求是想我点击主要菜单的时候，再点击“setting”按钮（右边倒数第三个），

不想setting的内容替换reports的内容。

如果链接如下

<a ui-sref-active="active" ui-sref="reports">Reports</a>"

<a ui-sref="setting" ><i class="fa fa-cog"></i></a>".

视图如下

<div ui-view="mainView"></div> 

<div ui-view="settingView"></div>  

结果：

做不到我要的效果，因为尽管我用不同的视图了，页面内容还是给各自的htm替换了。

比如我点击“reports”-----mainView视图有内容，

我点击“setting”-----settingView有内容，mainView的内容却消失了。

所以做这个效果的时候，我用了 TAB

请看我前面的文章：

angular Tabs (ui.bootstrap.tabs)

下面我们再来看看另外一个例子

angular.module('uiRouterSample.setting', [ 'ui.router' ])
.config(
[
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $stateParams,
	$urlRouterProvider) {
	$stateProvider
	.state(
	'setting_home',
	{
			url : '/settingHome',
			views : {
			'settingdetailView' : {
			templateUrl : 'setting/setting_table/setting_home.html'
			}
			}
	})
	.state(
	'setting_item',
	{
			url : '/settingItem/:itemId',
			views : {
			'settingdetailView' : {
			templateUrl : function(
			$stateParams) {
			return 'setting/setting_table/'
			+ $stateParams.itemId
			+ '.html'
			}
			}
			}
	})

} ]);

有控制器的写法

angular.module('uiRouterSample.setting', [ 'ui.router' ])
.config(
[
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $stateParams,
	$urlRouterProvider) {
	$stateProvider
	.state(
	'setting_home',
	{
			url : '/settingHome',
			views : {
			'settingdetailView' : {
			controller:"ctrSettingmenu",
			templateUrl : 'setting/setting_table/setting_home.html'
			}
			}
	})
	.state(
	'setting_item',
	{
			url : '/settingItem/:itemId',
			views : {
			'settingdetailView' : {
		     	   controller: ['$scope', '$stateParams', 'utils',
		          function ($scope, $stateParams, utils) {
		  	  return  $stateParams.itemId+"Ctr"
		          }
		        ],
			templateUrl : function(
			$stateParams) {
			return 'setting/setting_table/'
			+ $stateParams.itemId
			+ '.html'
			}
			}
			}
	})

} ]);