angularjs changing state issue - javascript

I have my app.js StateProvider configuration setup like below:
State 'dashboard' contains the sidebar and top navigation bar and should be active when the state dashboard.home and dashboard.addclient is active.
app.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'partials/login.html',
controller: 'LoginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'partials/dashboard.html',
controller: 'DashboardController'
})
.state('dashboard.home', {
url: '/home',
templateUrl: 'partials/dashboard.home.html',
controller: 'HomeController'
})
.state('dashboard.addclient', {
url: '/addclient',
templateUrl: 'partials/dashboard.addclient.html',
controller: 'ClientsController'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
The issue is when the user clicks on a link inside the dashboard page it calls a function which changes the state like below:
app.controller('DashboardController', function ($scope, $state) {
$scope.AddClient = function () {
$state.go('dashboard.addclient');
}
});
But for some reason the URL that it is trying to call looks like:
http://localhost/dashboard/partials/dashboard.addclient.html
HTML:
Index contains a view which the Login will get loaded into:
<body>
<div id="view" ui-view></div>
</body>
I so when the user logs in we have another ui-view on the dashboard:
<div id="page-content-wrapper">
<div ui-view></div>
</div>

Looks like your template URLs are relative paths because they don't begin with '/'. This means that if your browser currently has http://localhost/dashboard in the address bar when you change your state to dashboard.addclient it'll just append your template url to the current address. Instead you can try this:
.state('dashboard.addclient', {
url: '/addclient',
templateUrl: '/partials/dashboard.addclient.html',
controller: 'ClientsController'
})

Related

load automaticaly a view without clicking on href with ui-view angularjs

I'm trying to create a nav bar with 3 links
I would like to get page.1 at the first time without clicking on page.1 ui-sref,
i have like html:
<nav>
<a ui-sref="page.1">Search</a>
<a ui-sref="page.2">Results</a>
<a ui-sref="page.3">Detail</a>
</nav>
<ui-view></ui-view>
My states are defined as follows:
angular.module('scrollDemo', ['ui.router'])
.config(function($stateProvider) {
$stateProvider
.state('page.1', {
url: '/page1',
templateUrl: '/Page1.html'
})
.state('page.2', {
url: '/page2',
templateUrl: '/Page2.html'
})
.state('page.3', {
url: '/page3',
templateUrl: '/Page3.html'
});
})
How can i procced ?
you can use $urlRouterProvider.otherwise('/path'); to set the detault path.
angular.module('scrollDemo', ['ui.router'])
.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/page.1');
$stateProvider
.state('page.1', {
url: '/page1',
templateUrl: '/Page1.html'
})
.state('page.2', {
url: '/page2',
templateUrl: '/Page2.html'
})
.state('page.3', {
url: '/page3',
templateUrl: '/Page3.html'
});
})
You seem like you want to immediately go to /page.1 when your application is loaded, what you can do is the following :
angular.module('scrollDemo', ['ui.router'])
.run(function($location) {
$location.path('/page1');
});
This will automatically change the path of your application to the desired one right after everything is loaded.

# appearing in URL for UI.Router

I had an issue a few days ago where I would get a random # inside the URL like:
http://localhost:55462/#/forgotpassword
I asked a question about this and added this inside my app.config section:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Thiss did not remove the # sign but just move it and now the URL looks like this:
http://localhost:55462/#forgotpassword
My current routing looks like:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'partials/login.html',
controller: 'loginController'
})
.state('forgotpassword', {
url: '/forgotpassword',
templateUrl: 'partials/forgotpassword.html',
controller: 'forgotPasswordController'
})
.state('forgotpasswordcode', {
url: '/forgotpasswordcode',
templateUrl: 'partials/forgotpasswordcode.html',
controller: 'forgotPasswordController'
})
.state('forgotpasswordnewpassword', {
url: '/forgotpasswordnewpassword',
templateUrl: 'partials/forgotpasswordnewpassword.html',
controller: 'forgotPasswordController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'partials/dashboard.html',
controller: 'calenderController'
})
.state('dashboard.calender', {
url: '/calender',
templateUrl: 'partials/dashboard.calender.html',
controller: 'calenderController'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
//.otherwise({ redirectTo: '/login', controller: 'loginController' })
});
and when i am redirecting to another page i am using:
$location.path('/forgotpasswordcode');
Can anyone help me out with this issue?
Use $state.go() instead of $location.path(). Make sure to inject $state wherever you want to use it also
$state.go(stateName[,params]) // example $state.go('dashboard.calender')
$state is a service provided by ui-router

UI router - Set up outside login page

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>

Two states with views views defined for one

I'm trying to modulise my app using angular-ui-router to define a website with 2 states: main and checkout. The main state should haves multiple "section" tags which im trying to define as ui-view items. I can't tell what's wrong with my routes setup but I get a feeling that the main.html is not being loaded. Any advise on whats wrong with my definition... I could avoid using views for the secions and just use ng-include...
routes.js
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/main');
$stateProvider
.state('main', {
url: '/main',
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
views:{
'home': {
templateUrl: 'templates/main.home.html'
},
'about': {
templateUrl: 'templates/main.about.html'
},
'services': {
templateUrl: 'templates/main.services.html'
},
'shop': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})
.state('checkout', {
url: '/checkout',
templateUrl: 'templates/checkout.html',
controller: 'CheckoutCtrl'
});
index.html
<div ui-view id="app-ui-view"></div>
templates/main.html
<section ui-view="home" id="home"></section>
<section ui-view="about" id="about"></section>
<section ui-view="services" id="services"></section>
<section ui-view="shop" id="shop"></section>
Basically the page loads but main or checkout states don't load. How am i nesting things wrong?
By not specifying a parent you map both states to the default ui-view in the index.html. So when accessing main state there won't be any templates linked to the default ui-view, the only one present in the existing html.
so the main state should have this definition:
.state('main', {
url: '/main',
views:{
'': {
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
},
'home#main': {
templateUrl: 'templates/main.home.html'
},
'about#main': {
templateUrl: 'templates/main.about.html'
},
'services#main': {
templateUrl: 'templates/main.services.html'
},
'shop#main': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})

Angular.js redirecting from one abstract state child to another

I'm trying to implement login using Angular.js with Laravel as a back end. I'm using an abstract state for handling the layout. There are 2 abstract states: 1 for public pages and 1 for admin pages. The problem is when I login, when I use $state.go('admin.dash') or $window.location.href = '#/admin/dash' it redirects me to the page but the sidebar isn't loaded. It only loads when I access the page directly or do a full page refresh on the browser.
Here's what my loginController looks like:
(function(){
angular.module('starter.controllers')
.controller('LoginController', ['$scope', 'UserService', '$state', '$window', LoginController]);
function LoginController($scope, UserService, $state, $window){
var me = this;
me.loginUser = function(user){
UserService.login(user).then(function(data){
$window.location.href = ('#/admin/dash'); //also tried $state.go
});
};
};
})();
And here's what the app configuration for the states look like:
.config(function($stateProvider, $urlRouterProvider) {
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/layouts/tabs.html"
})
.state('home.login', {
url: '/login',
views: {
'home-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginController'
}
}
})
.state('admin', {
url: "/admin",
abstract: true,
templateUrl: "templates/layouts/admin-menu.html"
})
.state('admin.dash', {
url: '/dash',
views: {
'menuContent': {
templateUrl: 'templates/admin/dash.html'
}
}
});
So basically I'm trying to redirect from the home state to the admin state. When I checked on chrome dev tools the HTML is actually loaded, but I don't know why the sidebar just wont show up:
Here's a screenshot when I use $state.go or $window.location.href:
And here's how it looks like when I access it directly:

Categories