在Angular.JS获取数据后更改NG-视图 [英] Change ng-view after get data in Angular.JS

问题描述

我要使用$ HTTP和JSON响应从服务器获取一些数据。 $ http.get（）的路线改变后调用。但下载的数据之前的模板被改变。我的目标是：

• 用户preSS菜单中的超链接，改变路线，


• 显示加载微调（DOM元素是在另一个控制器，该控制器在页面每次）


• 初始化 $ scope.init（）（通过 NG-的init =的init（））的控制器这是我的新模板，从服务器，这也初始化获取数据


• 数据下载，现在我可以隐藏微调和更改可见模板

我怎样才能做到这一点？我的应用程序看起来例如：

使用Javascript：

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'MyCtrl'，函数（$范围，$ HTTP）{
    $ scope.init =功能（）{
       $ HTTP（{方法：GET，网址：'http://ip.jsontest.com/'}).success(function(data）{
           的console.log（数据）;
               $ scope.ip = data.ip;
           }）;
    }
}）;myApp.config（函数（$ routeProvider）{    $ routeProvider.when（'/链接'，{
        控制器：'MyCtrl'，
        templateUrl：embeded.tpl.html
    }）;
}）;
 

HTML

 ＆LT;脚本类型=文/ NG-模板ID =embeded.tpl.html＆GT;
    ＆LT; D​​IV NG控制器=MyCtrlNG-的init =的init（）＆GT;
    您的IP地址为：{{IP}}
    ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;＆LT; D​​IV＆GT;    ＆LT; UL＆GT;
        ＆LT;立GT;＆LT; A HREF =＃/链接＆GT;改变路线＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;    ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

您需要的路由发生之前解决数据，因此，移动你的$ HTTP来配置部分。

这是很好的教程为， http://www.thinkster.io /挑选/ 6cmY50Dsyf / angularjs排解的约定

这是配置的一部分。

  $ routeProvider.when（'/链接'，{
    控制器：'MyCtrl'，
    templateUrl：embeded.tpl.html'，
    解析：{
      数据：功能（$ Q $ HTTP）{
        变种推迟= $ q.defer（）;
        $ HTTP（{方法：GET，网址：'http://ip.jsontest.com/'}).then(function(data）{
          deferred.resolve（数据）;
        }）;
        返回deferred.promise;
      }
    }
 }
 

这是控制器部分

  //`data`从routeProvider解决后，注入
myApp.controller（'MyCtrl'，函数（$范围，$ HTTP，数据）{
  $ scope.ip = data.ip
}）;
 

我觉得在AngularJS答应为任何异步非常重要的概念。处理。
您需要使用这种技术每次你有所回调的时间。

I'm going to get some data from server using $http and JSON response. $http.get() are called after route change. But template are changed before data is downloaded. My goal is:

• User press a hyperlink in menu, that changes a route,
• Shows Loading Spinner (DOM Element is in another controller which is on page everytime)
• Initializing $scope.init() (via ng-init="init()") in controller which is in my new template, this also initializing get data from server
• Data are downloaded, now I can hide spinner and change visible template

How can I do this? My App looks for example:

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>

解决方案

You need to resolve data before routing happens, thus, move your $http to config section.

This is good tutorial for that, http://www.thinkster.io/pick/6cmY50Dsyf/angularjs-resolve-conventions

This is config part.

 $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;
      }
    }
 }

and this is controller part

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

I think promise in AngularJS is very important concept for any async. processing. You need to use this technique every time you have callback.

这篇关于在Angular.JS获取数据后更改NG-视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！