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

【问题标题】：Change ng-view after get data in Angular.JS在 Angular.JS 中获取数据后更改 ng-view
【发布时间】：2014-11-03 20:13:07
【问题描述】：

我将使用 $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>

【问题讨论】：

你看过这个帖子吗？ stackoverflow.com/questions/17144180/…
是的，但这不是我需要的。
为什么不简单地在构造控制器时发送http请求，并有一个像<div ng-show="ip">...</div>这样的视图（即在接收到数据之前它不会显示任何内容）？
我宁愿改变页面结构。我认为 ng-view 不是最适合您的解决方案。也许您可以使用 ngInclude 来更改您需要在页面中更新的内容。 url 在您的应用程序逻辑中是否发生了重大变化？你使用一些 url 参数吗？

标签： javascript html angularjs

【解决方案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 中的 promise 对于任何异步都是非常重要的概念。加工。每次回调时都需要使用此技术。

【讨论】：

就是这样！但我只有一个问题。是否可以在解析对象中使用 ngResource？
问题是“ngResource 是否返回承诺？”。如果是return MyResource.get({id: $route.current.params.id});，如果不是return MyResource.get({id: $route.current.params.id}).promise;。
我的问题是，ngResource 是否可以用于解析约定:) 只是 $http.get() 我想使用 MyRes.get()
正如这里所说，stackoverflow.com/a/16759067/454252, return MyRes.get().$promise;
是的，但我不需要在某个地方定义我的资源（就像在控制器中一样）？看起来：Controllers.controller('dashboardCtrl', ['$scope', 'DashboardRes', function($scope, Res) {...}]);。我的资源看起来是：app.factory('DashboardRes', ['$resource', function($resource) {...});，没有创建新变量。

【解决方案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 魔法发生的地方 ;)

【讨论】：