停止重新加载通用模板

Stop a common template from being reloaded

本文关键字：加载 新加载      更新时间：2024-05-11

我有一个Angular应用程序，它依赖于Angular ui路由器。这个应用程序有多个页面，它们共享一个通用模板，例如导航栏：

var app = angular.module('app', ['ngSanitize', 'ngResource', 'ngRoute', 'ui.router'])
    .config(['$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) => {
        $urlRouterProvider.otherwise("/index");
        $stateProvider
            .state('index', {
                url: "/index",
                views: {
                    'navbar': {
                        templateUrl: 'Views/Partials/navbar.cshtml',
                        controller: 'App.Controllers.NavbarController'
                    },
                    'content': {
                        templateUrl: 'Views/index.cshtml',
                        controller: 'App.Controllers.IndexController'
                    }
                }
            })
            .state('settings', {
                url: "/settings",
                views: {
                    'navbar': {
                        templateUrl: 'Views/Partials/navbar.cshtml',
                        controller: 'App.Controllers.NavbarController'
                    },
                    'content': {
                        templateUrl: 'Views/settings.cshtml',
                        controller: 'App.Controllers.SettingsController'
                    }
                }
            });
    }]);

CCD_ 1和CCD_ 2共享相同的模板CCD_。经过测试，我发现，每次为url加载"页面"时，都会重新加载其中的所有视图。

如果导航栏之前已经加载，是否可以避免重新加载导航栏

您应该能够将导航条提取到现有状态的父状态中。这样，导航栏只在输入父状态时加载，并且您应该能够在不影响它的情况下更改共享该父状态的子状态。

虽然有更好的组织方法可以做到这一点，但我的快速而肮脏的方法是将您必须重命名为withnav.index和withnav.settings的状态。然后从中删除导航栏视图并添加以下状态。

$stateProvider
    .state('withnav', {
        abstract: true,
        views: {
            'navbar': {
                templateUrl: 'Views/Partials/navbar.cshtml',
                controller: 'App.Controllers.NavbarController'
            }
        }
    });
相关文章：