关于ng-router嵌套使用和总结

那是某个下午的review代码的过程。js中有一段html,像是这样。

var html = '<div>...此处还有很多html代码....</div>'

我的同事想我提出，js里有这么多html,看的非常扎眼。应该将这些代码放在另外的一个地方，然后调用这个文件就好了。

虽然这段html代码不长，但是想想也是非常有道理（都是老司机啊）

于是我就下班反思了下如何实现

首先这个页面就是ng-router实现的

类似于这样



content 已经使用了ui-router 通过上面的nav控制。

index.html

<nav>
    <ul>
        <li ui-sref='index'>home</li>
        <li ui-sref='picture'></li>
        <li ui-sref='blog'></li>
    </ul>
<nav>
<main vi-main></main>

js

app.run(['$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
]);

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider
        .otherwise('/');
    $stateProvider
        .state('home', {
            url: '/',
            views: {
                "@": {
                    templateUrl: './home.html',
                    controller: 'HomeController'
                }
            },
            title: '首页'

        })
        .state('picture', {
            url: '/picture',
            views: {
                "@": {
                    templateUrl: 'picture.html',
                    controller: 'PictureController'
                }
            }
        })
        .state('blog', {
            url: '/:id',
            views: {
                "@": {
                    templateUrl: 'blog.html',
                    controller: 'blogController',
                    controllerAs: 'vm'
                }
            }
        })
}]);

但是此刻我希望home一打开，里面还有可以默认加载的页面

home.html

      <div ui-view="homeA"></div>
      <div ui-view="homeB"></div>

app.run(['$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
]);

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider
        .otherwise('/');
    $stateProvider
        .state('home', {
            url: '/',
            views: {
                "@": {
                    templateUrl: './home.html',
                    controller: 'HomeController'
                },
                 "homeA@": {
                    templateUrl: './home.html',
                    controller: 'HomeAController'
                },
                 "homeB@": {
                    templateUrl: './home.html',
                    controller: 'HomeBController'
                },
            },
            title: '首页'

        })
        .state('picture', {
            url: '/picture',
            views: {
                "@": {
                    templateUrl: 'picture.html',
                    controller: 'PictureController'
                }
            }
        })
        .state('blog', {
            url: '/:id',
            views: {
                "@": {
                    templateUrl: 'blog.html',
                    controller: 'blogController',
                    controllerAs: 'vm'
                }
            }
        })
}]);

更棒的ui-router https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

然后第二天改好了给同事看，同事又给了一种templateCache

html

<div ng-include=" 'templateId.html' "></div>

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

更多关于templateCache使用 https://docs.angularjs.org/api/ng/service/$templateCache