If its index then add else remove class in body tag
app.js
angular.module('app', [
'ui.router',
'ngAnimate'
])
.config(
[ '$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state("app", {
url: "",
templateUrl: 'tmpl/app.html'
})
.state('app.about', {
url: '/about',
templateUrl: 'tmpl/aboutus.html'
})
.state('app.result', {
url: '/result',
templateUrl: 'tmpl/search_result.html'
})
}
]
);
index.html
<body class="home" ng-class="" >
Add class if its Home page abc.com/ else remove the added class, ex: abc.com/#/about
Thanks in advance
Kanagan
There are many options could create a controller for the body to handle this or do this with a directive or service. The easiest option would be to use $rootScope.
angular.module('app', [
'ui.router',
'ngAnimate'
])
.run(['$rootScope',function($rootScope){
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
//console.log(toState);
$rootScope.home = (toState.name == 'app');
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state("app", {
url: "",
templateUrl: 'tmpl/app.html'
})
.state('app.about', {
url: '/about',
templateUrl: 'tmpl/aboutus.html'
})
.state('app.result', {
url: '/result',
templateUrl: 'tmpl/search_result.html'
})
}]);
then in the html...
<body class="home" ng-class="{'my-home-class':$root.home}">
I didn't test this. If it doesn't work do a console.log on toState and see what the value is on different pages and adjust the code as needed.
UPDATE
I created a plunker with a functional example. I'm not sure what is in your app.html, but the way you have this set up I'd advise adding another state for app.home which I created in my example.
Related
I got some err when i try to create external module, i think that is something wrong with my nested state in nested.js
The err said:Error: State 'admin.quyensudung' has a 'views' object. It cannot also have "view properties" at the state level. Move the following properties into a view (in the 'views' object): controller
Please help me fix this bug and tell me the reason i got this bug thank too much
app.js:
var app = angular.module('app', [
'ui.router',
'ngCookies',
'quyensudung',
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/admin');
$stateProvider
.state('admin', {
url: '/admin',
templateUrl: 'admin/home/index.html'
}])
nested.js
var quyensudung = angular.module('quyensudung', [])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html'
},
},
controller: 'quyensudungController',
})
}])
Error: State 'admin.quyensudung' has a 'views' object. It cannot also have "view properties" at the state level. Move the following properties into a view
Just move controller: 'quyensudungController', into views -> "container#"
Instead:
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html'
},
},
controller: 'quyensudungController',
})
Should be:
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html',
controller: 'quyensudungController'
},
}
})
Ref: Nested-States-and-Nested-Views
I have a config function in each module file like below
in app.js
config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.otherwise({redirectTo: '/home'});
}]);
in home.js
config(['$routeProvider','ChartJsProvider',
function ($routeProvider,ChartJsProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
now I want to write a $routeProvider.whenLoggedIn function like
config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.whenLoggedIn=function(){
console.log('Do something');
}
$routeProvider.otherwise({redirectTo: '/home'});
}]);
when I wrote code like code below
$routeProvider.whenLoggedIn('/profile', {
templateUrl: 'home/profile.html',
controller: 'ProfileCtrl'
});
I want to call the function whenLoggedIn. Please let me know how to write whenLoggedIn function in common place instead writing this function in every module config function
You need to add $stateProvider in app.config
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true).hashPrefix('*');
$urlRouterProvider.otherwise('/account/login');
$stateProvider
.state('account', {
abstract: true,
url: '/account',
cache: false,
template: '<div ui-view></div>',
})
//login
.state('account.login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'app/Account/login.html',
})
//forgot password
.state('account.forgotpassword', {
url: '/forgotpassword',
controller: 'ForgotPswdCtrl',
templateUrl: 'app/Account/forgotpassword.html',
})
}])
I am trying to modify the blur-admin project adding a login page with its own controller.
So I created a controller folder inside the pages folder called demoadmin.login.
The login is working well, but now, I want to show it outside the dashboard, I mean as standalone page.
Currently it is showing the following:
But I want to show it outside:
This is my app.js file:
'use strict';
angular.module('bluradmin', [
'ngAnimate',
'ui.bootstrap',
'ui.sortable',
'ui.router',
'ngTouch',
'toastr',
'ui.slimscroll',
'angular-progress-button-styles',
'ngStorage',
//'smart-table',
//"xeditable",
//'ngJsTree',
'bluradmin.theme',
'bluradmin.pages',
'bluradmin.login'
]).run(function ($localStorage) {
console.log($localStorage);
});
And my pages.module.js was modified:
(function () {
'use strict';
angular.module('bluradmin.pages', [
'ui.router',
'bluradmin.pages.dashboard'
])
.config(routeConfig);
/** #ngInject */
function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
$urlRouterProvider.otherwise('/login');
}
})();
How can I set up the ui-router to obtain this behaviour?
At your index.html:
<div ui-view>
</div>
At your app.html
<div class="row main" ui-view>
</div>
Then your config:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
})
.state('app', {
url: '/app',
templateUrl: 'templates/app.html'
})
.state('someOtherState', {
parent: 'app',
url: '/someUrl',
templateUrl: 'templates/someTemplate.html'
})
$urlRouterProvider.otherwise('/login');
Define an abstract view/state for the App, and define another one separated view with the login. Something like this:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: 'menu.html'
})
.state('app.home', {
url: 'home',
views: {
'page-view': {
templateUrl: 'home.html',
}
}
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
}
})
Inside the menu.html yo should have something like this:
<div ui-view="page-view"></div>
I am making a very basic angular app using ui-router, and I have 3 "modules" right now, which are home, login, and register. Here is how I have defined them:
'use strict';
var app = angular.module('exampleApp', [
'ui.router',
'ngAnimate',
'ui.bootstrap'
]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: './main/home/home.html',
controller: './main/home/home-controller.js'
})
.state('login', {
url: '/login',
templateUrl: './main/login/login.html',
controller: './main/login/login-controller.js'
})
.state('register', {
url: '/register',
templateUrl: './main/register/register.html',
controller: './main/register/register-controller.js'
})
})
However, I think I am doing the controller: portion wrong. I want to define each controller for each "module", and I'm not sure how to go about doing that.
Here's my file structure -
First define your controller.
angular.module('exampleApp').controller('loginCtrl', function () {
// ctrl task goes here.
});
Mapping controller to a route.
$stateProvider.state('login', {
url: '/login',
templateUrl: 'path/to/login.html',
controller: 'loginCtrl'
})
i'am using AngularJS with ui-router, this is my current app.js configuration.
'use strict';
angular.module('nodeserverApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/user/main',
controller: 'MainCtrl'
})
.state('dashboard', {
url: '/user/dashboard',
templateUrl: 'partials/user/dashboard/main',
controller: 'UserDashboardDashboardCtrl',
authenticate: true
})
.state('dashboard.welcome', {
url: '/welcome',
parent: 'dashboard',
templateUrl: 'partials/user/dashboard/welcome'
})
.state('dashboard.account', {
url: '/account',
templateUrl: 'partials/user/dashboard/account',
controller: 'UserDashboardAccountCtrl'
})
.state('dashboard.address', {
url: '/address',
templateUrl: 'partials/user/dashboard/address/index'
})
.state('dashboard.address.view', {
url: '/view',
templateUrl: 'partials/user/dashboard/address/view',
controller: 'UserDashboardAddressViewCtrl'
})
.state('dashboard.address.new', {
url: '/new',
templateUrl: 'partials/user/dashboard/address/new',
controller: 'UserDashboardAddressNewCtrl'
})
.state('login', {
url: '/user/login',
templateUrl: 'partials/user/login',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/user/signup',
templateUrl: 'partials/user/signup',
controller: 'SignupCtrl'
})
.state('settings', {
url: '/user/settings',
templateUrl: 'partials/user/settings',
controller: 'SettingsCtrl',
authenticate: true
});
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
// Intercept 401s and 403s and redirect you to login
$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
return {
'responseError': function(response) {
if(response.status === 401 || response.status === 403) {
$location.path('/user/login');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
}]);
})
.run(function ($rootScope, $state, Auth) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !Auth.isLoggedIn()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
});
as you can see, dashboard requires authentication, how can i make it's children inherit the authenticate like dashboard.welcome , dashboard.address.view etc. with out the need to specify each one?
I know this is pretty old, but for future Googlers, note that the data property is inherited by child states, so you can place something like this authenticate flag in the parent. These modifications to your should do the trick:
For $stateProvider:
.state('dashboard', {
url: '/user/dashboard',
templateUrl: 'partials/user/dashboard/main',
controller: 'UserDashboardDashboardCtrl',
data: {
authenticate: true
}
})
For angular.module:
.run(function ($rootScope, $state, Auth) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.data.authenticate && !Auth.isLoggedIn()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
});
I hope this link will help, this is a great article from Frederik Nakstad about the Single Page Auth for AngularJS, sorry but not able to provide you the detail codes
http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/