AngularJS模板化并使其更快？

Question

I want to use AngularJS in combination with Django to make single-page application. In general, I have index page (search) and details page with more sub-pages.

And that makes a problem. I have one controller (for details and it is getting info about object which is chosen) and other controllers user that main controller using $controller function.

It looks like:

.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";
  }])

and my urls:

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: '/'});
}]);

On that details.html page, I have one menu, but problem is loading, and everytime I change from, for example, InfoCtrl to SecondCtrl, my menu is being refreshed and I can see that (less than half second). It is irritating.

Is there any way to prevent loading of those templates, to load just partial, but with changing URL (I need it to be accessed from copied url etc)?

Answer 1

You can embed your template in the already-rendered page as a script of type text/ng-template :

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

Here is a plunk.

---

You should not need to call $controller() in your controller. You angular app will instance the controller needed by including a directive in your html like this:

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