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.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()。您的角度应用程序将通过在您的html中包含指令来实例化所需的控制器：

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

AngularJS模板化并使其更快？

1 个答案: