AngularJs路由继承

Anagular的路由如果放在一个文件，代码量太大而且不易查找对应的层级路由。为解决这一问题，我们只是表面的将本在一个文件的代码分化，但其本质还是一个文件，它是用注入的方式将两个文件链接起来。

路由的继承：如下面例子中，'main.show'状态为'main'状态的子状态，'main.show.add'状态、'main.show.edit'状态、'main.show.look'状态、'main.show.welcome'状态为'main.show'状态的子状态

app.js文件

var routerApp = angular.module('RouterApp', [ 'ui.router', 'MainApp']);


routerApp.run(function($rootScope, $state, $stateParams) {
	$rootScope.$state = $state;
	$rootScope.$stateParams = $stateParams;
});


routerApp.config(function($stateProvider, $urlRouterProvider) {
	$urlRouterProvider.otherwise('/index');
	$stateProvider.state('index', {
		url : '/index',
		views : {
			'' : {
				templateUrl : 'main/html/home.html'
			},
			'login@index' : {
				templateUrl : 'login/html/login.html',
				controller : "LoginController"
			}
		}
	}).state('main', {
		url : "/main",
		templateUrl : "main/html/main.html"
			});
	});

mainApp.js文件

var mainApp=angular.module("MainApp",[]);
mainApp.config(function($stateProvider, $urlRouterProvider) {
	
	$stateProvider.state('main.show', {
		url : '/show',
		views : {
			/*'' : {
				templateUrl : 'main/html/main.html'
			},*/
			'header@main' : {
				
				templateUrl : 'main/html/header.html'
			},
			'menu@main' : {
				templateUrl : 'main/html/menu.html',
				controller : 'menuController'
			},
			'show@main' : {
				templateUrl : 'template/module.html'
			}
		}
	}).state("main.show.welcome",{
		url:"/welcome",
		views:{
		 'show@main' : {
				templateUrl : 'main/html/welcome.html'
		  }
		}
	})
	.state("main.show.add",{
		url:"/add",
		views:{
		 'show@main' : {
				templateUrl : 'book/html/addBookForm.html'
		  }
		}
	}).state("main.show.edit",{
		url:"/edit/:id",
		views:{
		 'show@main' : {
				templateUrl : 'book/html/bookEdit.html'
		  }
		}
	}).state("main.show.look",{
		url:"/look/:id",
		views:{
		 'show@main' : {
				templateUrl : 'book/html/bookDetail.html'
		  }
		}
	});
});