How to handle static url anchors in Angularjs - javascript

How to handle the situation when you enter an URL for example http://localhost/#!/somepage/ but the problem is that AngularJS doesn't handle it and doesn't load the page, otherwise if you go to somepage through the index file it works correctly.
I use ui-router and my routing script looks like:
angular.module('WEBAPP', ['ui.router', 'bw.paging'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.when('', '/');
var states = [
{
name: 'home',
url: '/',
templateUrl: 'application/partials/home_header.html'
},
{
name: 'somepage',
url: 'somepage/',
templateUrl: 'application/partials/somepage.html',
},
{
name: '404',
url: '404/',
templateUrl: 'application/partials/404.html'
},
]
states.forEach(function (state) {
$stateProvider.state(state);
});
});
How to do the right routing, I want, when I enter url in browser http://localhost/#!/somepage/ AngularJS automatically redirect to that page.

Try it without the for each.I might be wrong but i Think when you are using for each in here only the last state gonna bind the $stateprovider instead of binding all the states. try it like this.
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'application/partials/home_header.html'
})
.state('somepage', {
url: 'somepage/',
templateUrl: 'application/partials/somepage.html',
})
.state('404', {
url: '404/',
templateUrl: 'application/partials/404.html'
})
edited
change the url this url: 'somepage/'
to this url: '/somepage'
and when you are calling remove the ! mark in the url.just http://localhost/#/somepage is enough.
var states = [
{
name: 'home',
url: '/',
templateUrl: 'application/partials/home_header.html'
},
{
name: 'somepage',
url: '/somepage',
templateUrl: 'application/partials/somepage.html',
},
{
name: '404',
url: '/404',
templateUrl: 'application/partials/404.html'
},
]
states.forEach(function (state) {
$stateProvider.state(state);
});

Use this
angular.module('WEBAPP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'application/partials/home_header.html'
}).when('/somepage', {
templateUrl: 'application/partials/somepage.html'
}).otherwise({
templateUrl: '/home'
});
});

Related

UI Router nested views

I've tried with various anwsers without any luck.
I have this two ui-views:
<div ui-view class="expand"></div> //Inside index.html
<div ui-view></div> //Inside home.html
And this is my routing:
$stateProvider
.state('home', {
url: '/',
views: {
'#': {
templateUrl: 'app/components/home/home.html',
controller: 'HomeCtrl'
}
}
})
.state('clients', {
url: '/clients',
views: {
'#home': {
templateUrl: 'app/components/clients/clients.html',
controller: 'ClientsCtrl'
}
}
})
I've tried putting names on the view and calling them in different ways but clients.html never gets display even though the route url changes.
I'm not entirely familiar with the view syntax that you're using with $stateProvider. I'll give you two versions, the first will seem very similar to your example and the second is more aligned with best practices.
$stateProvider
.state('base', {
abstract: true,
url: '',
templateUrl: 'views/base.html'
})
.state('login', {
url: '/login',
parent: 'base',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('dashboard', {
url: '/dashboard',
parent: 'base',
templateUrl: 'views/dashboard.html'
})
Best practice version:
(function () {
'use strict';
angular
.module('app.core')
.config(stateConfig)
.run(errorHandler);
stateConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
getZipCodes.$inject = ['googleMapService'];
errorHandler.$inject = ['$rootScope', 'logger'];
function stateConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('core', {
url: '/',
templateUrl: 'app/core/core.html',
controller: 'CoreController',
controllerAs: 'vm',
resolve: {
getZipCodes : getZipCodes
}
})
}
/** #desc: Ping the back-end for a JSON object that will be converted into an array of NYC zip codes */
function getZipCodes(googleMapService) {
return googleMapService.getZipCodes();
}
/** #desc: $stateChangeError handler */
function errorHandler($rootScope, logger) {
$rootScope.$on('$stateChangeError', function (error, event) {
if (error) { logger.error('Error while changing states', error); }
if (event) { logger.error('The event that caused the error', event); }
})
}
})();

AngularJS, ocLazyLoad and ui-router: How to load on demand without centralize 'state' on the main app.js class

I'm very new on ui-router and ocLazyLoad and probably this question could be easy to resolve but the fact that I'm writing here its because I did not have luck searching on blogs. My app is running nice with ocLazyLoad now.
This is my configuration on my main app.js class:
angular.module('me', [
'ui.router',
'oc.lazyLoad',
'me.partials.footer',
'me.partials.header'
])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/ini')
$stateProvider
.state('ini', { // Login
url: '/ini',
templateUrl: 'views/ini/ini.html'
})
.state('signin', {
url: '/signin',
templateUrl: 'views/signin/signin.html'
})
.state('home', {
url: '/home',
templateUrl: 'views/home/home.html',
resolve: {
home: function($ocLazyLoad) {
return $ocLazyLoad.load(
{
name: "views.home",
files: [
"views/home/home.js",
]
}
);
}
}
})
.state('home.profile', {
url: '/profile',
templateUrl: 'views/profile/profile.html'
})
.state('home.board', {
url: '/board',
templateUrl: 'views/board/board.html'
});
}]);
Now I wish to stop put more states on the same class otherwise my app.js will be huge in a couple of months. So I've removed some states from here to my other module, called 'home-module':
home.js
angular
.module('views.home', [{
name: "views.home.controller",
files: ["views/home/home-controller.js"]
}
])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home/home.html',
resolve: {
home: function($ocLazyLoad) {
return $ocLazyLoad.load(
{
name: "views.home",
files: [
"views/home/home.js",
]
}
);
}
}
})
.state('home.profile', {
url: '/profile',
templateUrl: 'views/profile/profile.html'
})
.state('home.board', {
url: '/board',
templateUrl: 'views/board/board.html'
});
}]);
BUT I'm getting this error: Could not resolve 'home.board' from state 'ini' which makes totally sense because the file home.js it's not being loaded before. How can I resolve this?.
Writing all my app states on my unique main app.js class it's the only way?
it is error of state. not resolve.
i prefer use ocLazyLoad from my controllers. in there we have a lot more control
.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('views/home/home.js');
});

URL Route Parameters in AngularJS ui-router

I want to be able to reload just the nested view of my application and attached a route parameter on so that I can have URL routing in my application. I cannot figure out how to do this, I initially had it working with a query like this:
$location.search('userId', user._id);
//http://localhost:9000/#/user/?userId=123456789
My desired URL is below, with the userId = 123456789
http://localhost:9000/#/user/123456789
My app.js file
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'views/layout.html'
},
'top#index' : {
templateUrl: 'views/top.html',
controller: function($scope, $state) {
$scope.userLogOut = function() {
$state.go('login');
};
}
},
'left#index' : { templateUrl: 'views/left.html' },
'main#index' : { templateUrl: 'views/main.html' }
}
})
.state('index.user', {
url: 'user:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
.state('index.user.detail', {
url: '/',
views: {
'detail#index' : {
templateUrl: 'views/user/details.html',
controller: 'DetailCtrl'
}
}
})
In my controller:
$state.reload('index.user.detail', {userId: $scope.user._id});
As you are using ui-router you can use $state.go('index.user', { userId: {{yourid}} });
To allow the query string parameter to work using ui-router write your state like this,
.state('index.user', {
url: 'user/?userId=:param',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
That would allow this to work,
//http://localhost:9000/#/user/?userId=123456789
Without the query string parameter (your desired URL) would be this,
.state('index.user', {
url: 'user/:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
http://localhost:9000/#/user/123456789

Cannot change state from url bar with ui-router

When I try to go directly to an url like mysite.com/#!/about I always get redirected to the home state. I have a menu with ui-sref links which are working fine. It's working fine with ngRoute but I have nested states so I cannot switch... As you can see I'm not doing anything special... You can check the complete source here: https://github.com/misterch0c/SL-frontend
.config(function($locationProvider, $stateProvider, $urlRouterProvider, $popoverProvider, envServiceProvider, ngDialogProvider) {
$locationProvider.hashPrefix('!');
$stateProvider
.state('home', {
url: 'home',
views: {
'': {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
},
'filters#home': {
templateUrl: 'views/filters.html',
controller: 'FiltersCtrl'
},
}
})
.state('about', {
url: 'about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
});
angular.extend($popoverProvider.defaults, {
placement: "bottom",
});
})
.run(['$state',
function($state) {
$state.transitionTo('home');
}]);
Try to define your url (of each state) with leading slash '/'
$stateProvider
.state('home', {
url: '/home',
...

Trouble in redirecting page in nodejs

I am working on a nodejs application in which main js file controlling states is
angular.module('dreamflow', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('dashboard', {
url: '',
name: 'dashboard',
templateUrl: '/browser/views/dashboard.html'
})
.state('dashboard.processCreation', {
url: '/processCreation',
name: 'processCreation',
parent: 'dashboard',
templateUrl: '/browser/views/processCreation.html'
})
.state('dashboard.formCreation', {
url: '/formCreation',
name: 'formCreation',
parent: 'dashboard', //mandatory
templateUrl: '/browser/views/formCreation.html'
});
}
]);
I am working on page processCreation. where i am creating a process and then i have to redirect to formCreation page for this i am using
$location.url = ('/formCreation');
but it is not able to redirect it?

Categories