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?
Related
I have AngularJS(1.4.9) project that is build with usage of ui-router and have few states like this:
.state('overview', {
url: '/overview',
parent: 'dashboard',
templateUrl: 'views/dashboard/overview.html'
})
.state('settings', {
url: '/settings',
parent: 'dashboard',
templateUrl: 'settings/views/index.html',
controller: "SettingsCtrl"
})
Now I want to add want to integrate ng-admin(0.9.1) to it. I have tested it as standalone app with standalone html as described in docs and it works. But I couldn't find a way to add it to current project.
You will have to change your app parent state with ng-admin like below
// from
myApp.config(function ($stateProvider) {
$stateProvider.state('send-post', {
parent: 'main',
url: '/sendPost/:id',
params: { id: null },
controller: sendPostController,
controllerAs: 'controller',
template: sendPostControllerTemplate
});
});
// to
myApp.config(function ($stateProvider) {
$stateProvider.state('send-post', {
parent: 'ng-admin', // <= this has changed
url: '/sendPost/:id',
params: { id: null },
controller: sendPostController,
controllerAs: 'controller',
template: sendPostControllerTemplate
});
});
For reference please check updated document ng-admin
My 'just works' solution is to add to main project states external link of ng-admin:
.state('database', {
onEnter: function($window) {
$window.open('/ng-admin/ng-admin.html', '_self');
}
})
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'
});
});
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');
});
I am using angularjs ui-router for a cordova app. I am trying to reuse a ui-view template (left-panel) for multiple states. This ui-view is for almost all the states except one state. I tried to refer many tutorials but still not able to implement what I want. Here is my code in app.js:
var angularApp = angular.module('angularApp', [
'ui.router',
]);
angularApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root', {
abstract: true,
views: {
'left-panel': {
templateUrl: 'templates/common-left-panel.html',
},
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'templates/home.html',
}
}
})
.state('root.settings', {
url: 'settings',
views: {
'container#': {
templateUrl: 'templates/settings.html',
}
}
})
.state('root.category', {
url: 'category/:catId',
views: {
'container#': {
templateUrl: 'templates/category-nodes.html',
controller: 'ListCatNodesCtrl'
}
}
})
});
This is in index.html
<div ui-view="left-panel"></div>
<a ui-sref="root.settings">Settings</a>
<div ui-view="container"></div>
With this code, the home page is rendered properly. But when I click on the settings link, there isn't any change in screen or url. In rendered DOM, I get <a ui-sref="root.settings" href="#settings">Settings</a>. The same holds for category page as well. Basically I am developing an android app using cordova and angularjs. Loads of thanks in advance.
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',
...