Question

我将使用$ http和JSON响应从服务器获取一些数据。路线改变后调用$http.get()。但是在下载数据之前会更改模板。我的目标是：

用户按菜单中的超链接，即更改路线
显示加载微调器（DOM元素位于每次在页面上的另一个控制器中）
在我的新模板中的控制器中初始化$scope.init()（通过ng-init="init()"），这也初始化从服务器获取数据
下载数据，现在我可以隐藏微调器并更改可见模板

我该怎么做？我的应用程序查找示例：

使用Javascript：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $http) {
    $scope.init = function() {
       $http({method: 'GET', url: 'http://ip.jsontest.com/'}).success(function(data) {
           console.log(data);
               $scope.ip = data.ip;
           });
    }
});

myApp.config(function($routeProvider) {

    $routeProvider.when('/link', {
        controller: 'MyCtrl',
        templateUrl: 'embeded.tpl.html'
    });
});

HTML：

<script type="text/ng-template" id="embeded.tpl.html">
    <div ng-controller="MyCtrl" ng-init="init()">
    Your IP Address is: {{ip}}
    </div>
</script>

<div>

    <ul>
        <li><a href="#/link">change route</a></li>
    </ul>

    <div ng-view></div>
</div>

Answer 1

您需要在路由发生之前解析数据，因此，请将$ http移至配置部分。

这是一个很好的教程，http://www.thinkster.io/pick/6cmY50Dsyf/angularjs-resolve-conventions

这是配置部分。

 $routeProvider.when('/link', {
    controller: 'MyCtrl',
    templateUrl: 'embeded.tpl.html',
    resolve: {
      data: function ($q, $http) {
        var deferred = $q.defer();
        $http({method: 'GET', url: 'http://ip.jsontest.com/'}).then(function(data) {
          deferred.resolve(data);
        });
        return deferred.promise;
      }
    }
 }

这是控制器部分

//`data` is injected from routeProvider after resolved
myApp.controller('MyCtrl', function($scope, $http, data) { 
  $scope.ip = data.ip
});

我认为AngularJS中的承诺对于任何异步都是非常重要的概念。处理。每次回调时都需要使用这种技术。

Answer 2

我不会为你做这一切，但我会指出你正确的方向。

首先，您需要ngRoute模块。

var myApp = angular.module('myApp', ['ngRoute']);

JS文件：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>

现在您的路线将正常工作，您无需在控制器中调用特殊的init功能，因为当与ng-view一起使用时，它们会在每次路线更改时实现。

对于微调器，您可以使用$httpProvider向所有ajax请求添加一些拦截器。在拦截器内，您可emit $rootScope上的某些事件，然后在特定的自定义属性指令中收听，例如spinner会发生魔法;）

在Angular.JS中获取数据后更改ng-view

2 个答案: