使用 AngularJS 路由时避免额外的 HTTP 请求

Question

当使用 AngularJS 路由时，脚本将发送额外的 HTTP 请求来加载视图。但是，如果用户使用的是指向该路由的直接链接，那么我们如何避免发出额外的请求呢？ IE。使用单个请求而不是视图的第二个请求从服务器加载所有内容？

编辑：

我需要明确我的意思。

如果用户访问 website.com#/second，其中 second 是具有相应视图的路由，那么 AngularJS 中的路由系统将使用 HTTP 请求加载该视图。但是，如果用户没有访问该网站的任何先前页面，我不希望发生此 HTTP 请求。相反，应该发生的是服务器在模板中包含该视图。 IE。不需要获取视图，因为服务器已经包含它。

换句话说，我怎样才能停止路由系统？我可以使用 if 语句，但我应该把它放在哪里？

在我写这篇文章的时候，我假设一个好地方是在路由处理函数中。

sampleApp.config(['$routeProvider',

    function($routeProvider) {  
        var firstVisit = true;
        if(!firstVisit){

            $routeProvider.
              when('/', {
                templateUrl: 'sections/main.php',
                controller: 'main_controller'
            }).
              when('/second', {
                templateUrl: 'sections/second.php',
                controller: 'second_controller'
            }).
              otherwise({
                redirectTo: '/'
            });   

        }
        firstVisit = false;

    }]);

编辑 2：

它没有工作。我希望路由函数依赖于变量的值。

Answer 1

您可以使用 $templateCache 角度提供程序加载所有角度模板。 因此，您可以使用 templateUrl 选项（在您的指令中或只是在您的路由中），它会在您的缓存中检索好的模板。

例如：

angular.module('template', [])
    .run(['$templateCache', function($templateCache) {
        $templateCache.put('folder/template.html', '<div>your template</div>');
    }]);


angular.module('YourApp', ['template'])
    .config(['$routeProvider', function($routeProvider) {

        $routeProvider
        .when('/route', {
            templateUrl: 'folder/template.html',
            controller: 'MyController'
        });
    }]);

但是，您必须将 html 转换为 javascript 字符串才能使用它。 Gulp 和 Grunt 上的一些插件可以为您完成。

希望对你有帮助