AngularJS在開始時加載局部，而不是在django中何時需要加載？

Question

我在django中有template文件夾，其中包含我的應用程序的所有模板/部分。 我想在開始時將所有我的局部加載到angular的模板緩存中，而不是根據控制器請求。

我有這樣的路由設置：

var myApp = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/landing', {
        templateUrl: '/landing-partial',
        controller: landingController
    }).
    when('/:wkspId/query', {
        templateUrl: '/query-partial',
        controller: queryController
    }).
    otherwise({
        redirectTo: '/landing'
    });
}]);

我想解決類似於Django中的Rails gem（ https://github.com/pitr/angular-rails-templates ）的解決方案。

Answer 1

根據您的構建系統，有些插件可以幫助您解決此問題。

對於GruntJS： https ：//www.npmjs.com/package/grunt-angular-templates

對於Gulp： https ： //www.npmjs.com/package/gulp-angular-templatecache

只要將它們指向您的html文件，它們就會創建一個如下所示的javascript文件：

  angular.module('app').run(["$templateCache", function($templateCache) {
  $templateCache.put("home.html",
    // contents for home.html ... 
  );

並將從那里解析模板，而不是發出http請求來獲取實際文件。 您只需要將此js文件以及您的應用腳本標記一起包括在內，就可以了。

Answer 2

您可以像這樣在index.html中插入模板：

<script type="text/ng-template" id="/landing-partial">
  Content of the template.
</script>
<script type="text/ng-template" id="/query-partial">
  Content of the template.
</script>

之后，您可以在路由器中使用以下模板：

var myApp = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/landing', {
        templateUrl: '/landing-partial',
        controller: landingController
    }).
    when('/:wkspId/query', {
        templateUrl: '/query-partial',
        controller: queryController
    }).
    otherwise({
        redirectTo: '/landing'
    });
}]);

它的工作原理與您提供的模塊相似。 角度引導后，模板將放入$ templateCache，並且可以在任何地方使用。