AngularJS路由:获取包含数据的模板

angularjs routing: get template with data

本文关键字:数据 包含 路由 获取 AngularJS      更新时间:2023-09-26

>我有以下路由配置

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/list.html',
        controller: 'contactListCtrl'
      }).
      when('/new', {
        templateUrl: 'app/partials/form.html',
        controller: 'contactAddCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

我的主页('/')只是加载了许多联系人,它的联系人列表Ctrl就像

myApp.controller('contactListCtrl', function($scope, $http) {
    $http.get("list")
            .then(function(response) {
              $scope.contact_list = response.data;  
            });
});

因此,当我在浏览器上加载主页时,它会加载模板,然后向服务器发送另一个请求("/list")以获取联系人(json)。 因此,浏览器向服务器发送 2 个请求

在 AngularJS 开发中同时发送 2 个请求以获取模板和数据是否正常?是否有任何解决方法可以仅发送 1 个请求来获取模板和数据?

如果在这种情况下我需要发送 2 个请求,并且假设我必须在主页中加载 5 个模板,那么我必须再发送 5 个请求以将数据(来自数据库)绑定到每个模板?

您可以在路由中使用解析,这会加载数据,然后加载模板。您可以在此处查看解决方案 http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx