Angular 呈现不同的 HTTP 请求 HTML
Angular HTTP Requests to Render Different HTML
所以我在 URL /check
有一个休息端点,它 returns 像这样序列化用户数据:
{
'username' : 'malikb',
'email': 'test@gmail.com',
'first_name': 'Malik',
'usertype': 'C'
}
我已将端点设计为 return 未登录用户的 401 状态代码和已登录用户的 200 状态代码,并且工作正常。但是,我正在尝试使用 Angular 的 $http
服务来推断状态代码和 usertype
键(如果可用)。
本质上,我正在尝试使用 <ng-include>
为登录的匿名用户呈现不同的导航栏,并根据用户类型为登录的用户呈现不同的导航栏。但是,我 运行 遇到的问题是请求是异步的。此外,我包含的 HTML 的 ng-if
和 src
属性似乎会不断评估,从而发送数千个 HTTP 请求。有什么办法可以实现这样的功能吗?
由于性能和额外的复杂性,我不经常使用 ng-if
。
我首先会尝试将所有 ng-if
更改为 ng-hide/show
假设您的 ng-include
html 模板中的所有内容都是正确的,并且它包含 var userData
。我建议尝试这样的事情:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $timeout) {
$http.get("http://blah/check").then(function (response) {
$timeout(function(){
//triggers event loop cycle
$scope.userData = response.data.userData;
},1)
});
});
而您的 html 就像 .
templat.html
<div>
<div ng-show="userData.type=='C'"></div>
<div ng-show="userData.type=='B'"></div>
<div ng-show="userData.type=='A'"></div>
</div>
actual.html
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'templat.html'"></div>
</div>
避免在 HTML 模板中使用异步函数,因为它们会评估每个摘要周期。避免模型和视图的 tangling concerns。视图应该只渲染模型。控制器使用来自视图的用户事件和来自其他地方的事件修改模型。
app.controller('ctrl', function($http) {
var vm = this;
this.$onInit = function() {
vm.userData = { username: 'anonymous' };
$http.get("/check").then(function(response) {
vm.userData = response.data;
});
};
});
<user-navbar ng-hide="vm.userData.username == 'anonymous'></user-navbar>
<anon-navbar ng-show="vm.userData.username == 'anonymous'></anon-navbar>
所以我在 URL /check
有一个休息端点,它 returns 像这样序列化用户数据:
{
'username' : 'malikb',
'email': 'test@gmail.com',
'first_name': 'Malik',
'usertype': 'C'
}
我已将端点设计为 return 未登录用户的 401 状态代码和已登录用户的 200 状态代码,并且工作正常。但是,我正在尝试使用 Angular 的 $http
服务来推断状态代码和 usertype
键(如果可用)。
本质上,我正在尝试使用 <ng-include>
为登录的匿名用户呈现不同的导航栏,并根据用户类型为登录的用户呈现不同的导航栏。但是,我 运行 遇到的问题是请求是异步的。此外,我包含的 HTML 的 ng-if
和 src
属性似乎会不断评估,从而发送数千个 HTTP 请求。有什么办法可以实现这样的功能吗?
由于性能和额外的复杂性,我不经常使用 ng-if
。
我首先会尝试将所有 ng-if
更改为 ng-hide/show
假设您的 ng-include
html 模板中的所有内容都是正确的,并且它包含 var userData
。我建议尝试这样的事情:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $timeout) {
$http.get("http://blah/check").then(function (response) {
$timeout(function(){
//triggers event loop cycle
$scope.userData = response.data.userData;
},1)
});
});
而您的 html 就像 .
templat.html
<div>
<div ng-show="userData.type=='C'"></div>
<div ng-show="userData.type=='B'"></div>
<div ng-show="userData.type=='A'"></div>
</div>
actual.html
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'templat.html'"></div>
</div>
避免在 HTML 模板中使用异步函数,因为它们会评估每个摘要周期。避免模型和视图的 tangling concerns。视图应该只渲染模型。控制器使用来自视图的用户事件和来自其他地方的事件修改模型。
app.controller('ctrl', function($http) {
var vm = this;
this.$onInit = function() {
vm.userData = { username: 'anonymous' };
$http.get("/check").then(function(response) {
vm.userData = response.data;
});
};
});
<user-navbar ng-hide="vm.userData.username == 'anonymous'></user-navbar>
<anon-navbar ng-show="vm.userData.username == 'anonymous'></anon-navbar>