在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
<脚本类型=文/ NG-模板ID =embeded.tpl.html>
< DIV NG控制器=MyCtrlNG-的init =的init()>
您的IP地址为:{{IP}}
< / DIV>
< / SCRIPT>< DIV> < UL>
<立GT;< A HREF =#/链接>改变路线< / A>< /李>
< / UL> < DIV NG-视图>< / DIV>
< / DIV>
您需要的路由发生之前解决数据,因此,移动你的$ 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()
(viang-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屋!