javascript - AngularJS 模板并使其更快？

Question

我想使用AngularJS结合Django来制作单页应用程序。一般来说，我有索引页面(搜索)和详细信息页面以及更多子页面。

这就产生了一个问题。我有一个 Controller (详细信息，它正在获取有关所选对象的信息)和其他 Controller 用户，该主 Controller 使用 $controller 功能。

看起来像:

.controller('BuildingDetailsCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location',
   function($scope, $routeParams, buildingsRepository, $location) {

        $scope.details = null;
        $scope.menu = templatesFolder + "buildings/menus/";
        $scope.currentUrl = $location.url();
        $scope.loading = true;

        buildingsRepository.getDetails($routeParams.slug).then(function(res) {
            $scope.details = res.data[0];
            $scope.loading = false;
        });

        $scope.alert = {"type": null, "message": null};

  }])

  .controller('SecondCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location', '$controller',
   function($scope, $routeParams, buildingsRepository, $location, $controller) {

        $controller('BuildingDetailsCtrl', {$scope: $scope, $routeParams: $routeParams, buildingsRepository: buildingsRepository, $location: $location})
        $scope.partial = templatesFolder + "buildings/details/info.html";
  }])

和我的网址:

config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/', {templateUrl: templatesFolder + "buildings/index.html", controller: 'UserBuildingsCtrl'});
  $routeProvider.when('/details/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingInfoCtrl'});
  $routeProvider.when('/test/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'SecondCtrl'});
  $routeProvider.when('/contact/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingContactCtrl'});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

在那个 details.html 页面上，我有一个菜单，但加载时出现问题，每次我从 InfoCtrl 更改为 SecondCtrl 时，我的菜单都会刷新，我可以看到(不到半秒)。真烦人。

有什么方法可以阻止加载这些模板，只加载部分模板，但要更改 URL(我需要从复制的 URL 等访问它)？

Answer 1

您可以embed您的模板在已渲染的页面中作为 text/ng-template 类型的脚本:

<script type="text/ng-template" id="details.html">
  <p>hello world</p>
</script>

Here是一个笨蛋。

<小时/>

您不需要在 Controller 中调用$controller()。您的 Angular 应用程序将通过在 html 中包含指令来实例化所需的 Controller ，如下所示:

<div ng-controller="BuildingDetailsCtrl">
   ...
</div>