我是angularJS的新手。我写了一些导航代码,这是完美的工作。但是当我将MetroPreLoader集成到angularJs服务中时,它就会停止工作。它会更改浏览器URL,但视图不会更新。如果我从我的服务中删除MetroPreLoader,那么它将再次运行。
这是我的代码:
服务:
voiceAppControllers.factory('appService', function ($http, $log, $window) {
return {
showWaitBar : function() {
MetroPreLoader.setup({
logoUrl: "Content/Images/logo.png",
logoWidth: "100px",
logoHeight: "100px",
multipleBGColors: ["#CA3D3D", "#F58A16", "#32A237", "#A110E6"],
delay: "Unlimited"
});
MetroPreLoader.run();
},
hideWaitbar : function() {
MetroPreLoader.close();
}
};
})
控制器:
voiceAppControllers.controller('loginController', ['$scope', '$http', '$location', '$timeout', 'appService', 'notificationService',
function ($scope, $http, $location,$timeout, appService, notificationService) {
var onSuccess = function () {
notificationService.pushNotifaction("service update successfully.");
};
var onError = function () {
notificationService.pushNotifaction("service update fail.");
};
$scope.login = function () {
var credentials = "grant_type=password&username=" + $scope.loginModel.Username + "&password=" + $scope.loginModel.Password;
console.log(credentials);
appService.showWaitBar();
$http({
method: 'POST',
url: appService.loginUrl,
data: credentials,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function (data) {
console.log(data.access_token);
appService.updateAuthInfo(data.userName, data.access_token);
appService.hideWaitbar();
$location.path(appService.routes.dahboard);
})
.error(function () {
appService.clearAuthInfo();
appService.hideWaitbar();
$location.path(appService.routes.login);
notificationService.pushNotifaction("Login Fail. Wrong username and password.");
});
};
}
]);
当我评论appService.showWaitBar()
和appService.hideWaitbar()
时,它的工作正常。
我肆无忌惮地想念一些东西,但不知道是不是。
Thnaks。
更新1:
我的App.js是:
var voiceAppControllers = angular.module('voiceAppControllers', []);
var voiceApp = angular.module('voiceApp', ['ngRoute', 'voiceAppControllers', 'kendo.directives']);
voiceApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/organization', {
templateUrl: 'Templates/OrganizationTemplate.html',
controller: 'organizationController'
}).when('/service', {
templateUrl: 'Templates/ServiceTemplate.html',
controller: 'serviceController'
}).when('/login', {
templateUrl: 'Templates/LoginTemplate.html',
controller: 'serviceController'
}).when('/Dashboard', {
templateUrl: 'Templates/DashboardTemplate.html',
controller: 'dashboardController'
}).
otherwise({
redirectTo: '/login'
});
}]);
登录视图是:
<div ng-controller="loginController">
<form name="loginFrom" novalidate ng-submit="login(loginFrom)">
<input type="hidden" ng-model="loginModel.Id" />
<h1>Login</h1>
<label>Need Some Text</label>
<div>
<label>username :</label>
<div class="input-control text">
<input type="text" placeholder="Your username" required ng-model="loginModel.Username" />
</div>
</div>
<div>
<label>password :</label>
<div class="input-control password">
<input type="password" placeholder="Your password" required ng-model="loginModel.Password" />
</div>
</div>
<div class="offset3">
<input class="primary" type="submit" value="UPDATE" ng-disabled="loginFrom.$invalid" />
</div>
</form>
</div>
我的仪表板视图是:
<div ng-controller="dashboardController">
<h1>Dashboard</h1>
<input type="button" value="Next" />
</div>