AngularJS 模板化并使其更快？

Question

我想结合 AngularJS 和 Django 来制作单页应用程序。一般来说，我有索引页面（搜索）和包含更多子页面的详细信息页面。

这就产生了问题。我有一个控制器（有关详细信息，它正在获取有关所选对象的信息）和其他控制器用户使用 $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.htmlpage 上，我有一个菜单，但加载时出现问题，每次我从 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()。您的 Angular 应用程序将通过在您的 html 中包含这样的指令来实例化所需的控制器：

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