我刚刚创建了一个AngularJS应用程序。
这是我的index.html文件。
<html ng-app="MyApp">
<head>
<!-- CSS files import -->
</head>
<body class="{{bodylayout}}">
<div ng-view></div>
</body>
<--! JS imports
aungular.js
app.js
login.js
register.js
-->
</html>
app.js
'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/forgotPassword', {
templateUrl: 'forgotpassword.html',
controller: 'forgotController'
})
.when('/home', {
templateUrl: 'views/home.html',
})
.otherwise({
redirectTo: '/login'
});
// $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
我有登录页面login.html、注册页面register.html和忘记密码页面forgotpassword.html,还有主页home.html。每一个页面都有独立的控制器,存在不同的文件中,分别为login.js、register.js、forgot.js和home.js。
login.js
'use strict';
angular.module('myApp').controller('LoginController', function($scope, $location, $window) {
$scope.user = {};
$scope.loginUser=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin123")
{
$location.path( "/home" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
同样地,我在其他控制器中有提交方法。我的希望是,当视图为登录、注册或忘记密码时,主体类应为“login-layout”。因此,在主体中我放置了“class = {{bodylayout}}”。我知道可以使用全局变量来设置值。但我不知道如何设置。
在app.js中,我尝试过这个:
angular.module('myApp').factory("myService", function(){
return {
sharedObject: { data: 'login-layout' }
};
});
但是不知道如何使用它。
$rootScope.bodylayout = ''
或$rootScope.bodylayout = '其他值'
。 - Tasnim Reza$rootScope.bodylayout = myService.sharedObject.data;
,没有从控制器传递任何值。 而且我想在每个控制器中更改页面的标题。 - CodersharedObject: { data: 'login-layout', data2: 'another-layout' }
,然后在另一个控制器中使用$rootScope.bodylayout = myService.sharedObject.data2
。 - Tasnim Reza