AngularJs路由继承

来源：互联网发布：中国网络购物发展现状编辑：程序博客网时间：2024/05/29 18:24

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'  }}});});

0 0