I'm working on multiple angular apps that I have to nest (like a web portal). My main app got a router where I define some states.
$stateProvider
.state('state1', {
url: "/state1",
views: {
"area": { templateUrl: "area1.html"}
}
});
And my other apps work like this too. I'd like to make a specific script that would be called if the state called in the main app is unknown by the main router, so I could to get the url and views in another router.
For example, if the main app call the state state2 that is unknown by my first router, it will look for it in a second router which define it.
I looked for a solution using the resolve option of ui-router but I'm not sure it could work this way.
Feel free to ask for more details. I did my best to make it short and understandable :)
Documentation on Otherwise()
app.config(function($urlRouterProvider){
// if the path doesn't match any of the urls you configured
// otherwise will take care of routing the user to the specified url
$urlRouterProvider.otherwise('/index');
// Example of using function rule as param
$urlRouterProvider.otherwise(function($injector, $location){
... some advanced code...
});
})
Hope this code help you as your need:
var myApp = angular.module('myApp', []);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/state1');
$urlRouterProvider.when("", "/state1");
$stateProvider
.state('state1', {
url: '/state1',
templateUrl: 'state1.php'
}
})
.state("state2", {
url: "/state2",
templateUrl: 'state2.php'
});
});
Related
I am currently working on a web development project and I am having a problem in implementing UI-router (AngularJS).
I want to set a default state when the page loads and also default state for the child view.
If I use abstract:true method that is not the solution because when I want to again active that state it won't be possible.
Hope this will give you answer to your Question
var App = angular.module('TechdefeatApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/")
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/components/home/homeView.html",
controller:"homeController"
})
.state('member', {
url: "/member/:seo_url",
templateUrl: "app/components/member/memberView.html",
controller:"memberController"
})
.state('category', {
url: "/category/:seo_url",
templateUrl: "app/components/category/categoryView.html",
controller:"categoryController"
})
}]);
you need to use at $urlRouterProvider service,
first inject this service, after that write
$urlRouterProvider.otherwise('/otherwise').
Pay attention that the /otherwise url must be defined on a state as usual:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
good luck!
For some reason, I can't seem to route to the add screen. What am I doing wrong? Here's my app.js
var moviesApp = angular.module('moviesApp', ['ngRoute']);
moviesApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'MoviesController'
})
.when('/add', {
templateUrl: 'partials/add.html',
controller: 'MoviesController'
})
.when('/edit', {
templateUrl: 'partials/edit.html',
controller: 'MoviesController'
});
});
Here's the anchor tag:
Add Movie
Which is contained within my home.html template which is a part of index.html.
The app doesn't crash...it just doesn't do anything.
Any thoughts on what I'm doing wrong?
It may be because of the change in the default hash-prefix in angularjs version 1.6. What you have written works in the given context: Proof
You can confirm this is the case by changing:
Add Movie
to:
Add Movie
If it works look at for possible solutions at:
AngularJS: ngRoute Not Working
If you want to make i behave as you expect (version 1.5) you could choose soultion 3 from the link:
3. Go back to old behaviour from 1.5 - set hash prefix manually
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
set up a route start event to help debug the problem
.run(function ($rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
console.log(event);
console.log(current);
console.log(next);
console.log('$routeChangeStart: ' + next.originalPath)
});
});
just add this to the end of your route config
Just as a side note I would use a state provider over a route provider. State providers let you define a hierarchy. It's a little harder to work with but much more flexible.
I need to change an existing AngularJS application from using URLs in the format:
example.com/thePage/#/section/1/subsection/1
To making the section & subsection parameters readable by the server with a format like so:
example.com/thePage?section=1&subsection=1
The environment does not offer something like mod_rewrite, so I need to change the routing in Angular to make it handle & generate these URLs. I believe I can do this using $locationProvider.html5Mode(true); however I’m not sure how to proceed from there. I’ve tried updating the existing routing to something like the below, however it fails to return a view (as if the routing isn’t working.
$stateProvider
.state('section', {
abstract: true,
url: '?section',
views: {
'header': {
template: '<h3></h3>'
},
'main': {
templateUrl: constants.baseUrl + 'views/section.html',
controller: 'sectionCtrl',
resolve: {
section: ['sectionervice', '$stateParams',
function (sectionervice, $stateParams) {
return sectionervice.getsection($stateParams);
}],
subsection: ['sectionervice', '$stateParams',
function (sectionervice, $stateParams) {
return sectionervice.getsubsection($stateParams);
}]
}
}
}
})
.state('section.detail.subsection', {
url: '&subsection=:sectionId',
views: {
'main': {
templateUrl: constants.baseUrl + 'views/section.detail.subsection.html',
controller: 'DictionaryCtrl'
}
}
});
It seems that $stateProvider may only work with the forward-slash(/) parameter delimiter. Is there another way to achieve this?
In the ui-router website has a simple example of you trying to do.
Maybe you can do the same thing, see the RouteProvider and StateProvider settings.
url: http://angular-ui.github.io/ui-router/sample/app/app.js
In the server side you can retrieve the url, so you can get your parameters.
[Edit]
About $locationProvider.html5Mode(true); you can do this and do the settings in route and state providers too, that don't interfere in functionality
The sample demo of the angular ui router has this link for the start page:
full url of 'ui-router' is / or http://angular-ui.github.io/ui-router/sample/#/
full url of 'about' is /about or http://angular-ui.github.io/ui-router/sample/#/about
When I was using durandalJS there was a limitation that the default url is just "/" there can be no "/ui-router".
Has the angular ui router plugin the same limitation?
The default route for ui-router can be whatever you want it to be, there is no limitaion like in DurandalJS. Just use:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
This is the official documentaion of ui-router, however I could not find the otherwise technique in there: https://github.com/angular-ui/ui-router/wiki
#apohi: ui-router is not angular-route. Your reply is adressing the wrong module.
You can do it this way:
angular.module('MyApp', ['ui.router']).config([
'$stateProvider', function ($stateProvider) {
$stateProvider.state('default', {
controller: 'MyController',
templateUrl: 'path/to/index.html',
url:''
})
)];
That way whenever the url is on the root of your site ui-router will capture it on a state that matches, in this case, 'default'.
use the $urlRouterProvider and its otherwise function:
angular.module('MyApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('default', {
controller: 'MyController',
templateUrl: 'path/to/template.ng.html',
url:'/default'
})
$urlRouterProvider.otherwise('/default')
})];
See here there is an "otherwise" option for a default route.
If you are talking about default route PARAMETERS, then there is an answer here.
You can use $urlRouterProvide.otherwise. This will work if you try to navigate to a route url that has not been defined.
Taken from here.
function configurUIRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('myhomepage',
{
abstract: false,
url: '/myhomepageurl',
templateUrl: "some-path/staff-admin.html",
controller: 'HomeController'
});
$urlRouterProvider.otherwise('/myhomepageurl'); // User will be taken to /myhomepageurl if they enter a non-matched entry into URL
}
The simplest way of all
add $urlRouterProvider service in config(function($urlRouterProvider))
and then
app.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('employeesState'); //default route
$stateProvider.state('employeesState', function(){
//state configuration here
}) //employees state
$stateProvider.state('cutomersState', function(){
//state configuration here
})
}
name any of the state in otherwise function to which you want as your default state/route
Essentially how can I detect whether a specific route has been linked to from within an Angular application or accessed directly from a user typing that URL into the address bar from within the configuration phase?
I know I can listen for the $locationChangeSuccess event like follows:
$Scope.$on('$locationChangeSuccess', function(evt, newUrl, oldUrl) {
// -- do something with oldUrl --
});
on either $Scope or $rootScope but these instances are not available during the configuration phase.
Maybe I am making this more complicated than it needs to be but any help would be much appreciated.
Update
To give some context. Some of the routes in my application load the associated template into a modal window instead of into a standard view. I am using ui-router with the basic configuration below:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'index.html'
});
$stateProvider.state('foo', {
url: '/foo',
views: {
'': {
template: '='
},
modal: {
templateUrl: 'modal.html'
}
}
});
}
]);
And the main template:
<div class="main" ui-view></div>
<div ui-view="modal"></div>
This works fine if the user accessed /foo via a link (ui-sref="foo") however the problem I have is that if the /foo route is entered directly into the address bar the underlying template does not exist obviously. I could manually set it if the page is accessed in this way instead. So if I can tell where the request has come from then I can set the template accordingly but it needs to be done in the configuration phase above (at least I think it does).
Note that if I were set the template explicitly it would be reloaded on each request to /foo which is not the desired result.
I can propose a solution, but i'm not sure it will make sense in the context of your application.
You could have the foo route be a sub route of the index route:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'index.html'
});
$stateProvider.state('index.foo', {
url: '/foo',
views: {
'modal#': {
templateUrl: 'modal.html'
}
}
});
});
<div ui-view></div>
<div ui-view="modal"></div>
The 'downside' of this method is that if you need to reuse the modal in any other part of the application, you need to redefine the state declaration for each of the top level state you need them in.
If you find a better solution, please ping this answer, as i'm trying to solve a very similar problem.