Develop Reference

AngularJS - $stateProvider when user put wrong URL

I'm new angularjs student.
I'm using state provider in my project, i don't want to change this. Because the code is done.
Here is my code:
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/SecondMain', '/SecondMain/OtherPageOne')
.when('/Main', '/Main/PageOne')
.otherwise("/notfound")
$stateProvider
.state('Main', {
abstract: true,
url: "/Main",
templateUrl: "/templates/Common/Main.html"
})
.state('SecondMain', {
abstract: true,
url: "/SecondMain",
templateUrl: "/templates/Common/SecondMain.html"
})
.state('notfound', {
url: "/NotFound",
templateUrl: "/templates/Common/NotFound.html"
})
.state('Main.PageOne', {
url: "/Main/PageOne",
templateUrl: "/templates/Main/PageOne.html"
})
.state('Main.PageTwo', {
url: "/Main/PageTwo",
templateUrl: "/templates/Main/PageTwo.html"
})
.state('SecondMain.OtherPageOne', {
url: "/SecondMain/PageOne",
templateUrl: "/templates/SecondMain/OtherPageOne.html"
})
.state('SecondMain.OtherPageTwo', {
url: "/SecondMain/PageTwo",
templateUrl: "/templates/SecondMain/OtherPageTwo.html"
})
angular
.module('inspinia')
.config(config)
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
}
I want a logic like this: If the user put:
/Main/PageThree
This page does not exist, but the user start URL with
/Main
so that he need to go to -> /Main/PageOne
if the user put:
/Ma/PageOne
/Ma does not exist, the user starts URL totally wrong, so that he goes to -> /Notfound Basically if the user put /Main/WRONG_LINK, he go to /Main/PageOne . And if he does not start with /Main, he go to NotFound.
Can anyone help me please?
Thanks a lot!!!

You are missing this configuration
$urlRouterProvider.otherwise('/NotFound');
Just add this line if no matching route is found then it will redirect you to the /NotFound url

This answer is inspired by this answer.
First of all, you will have to make the Main state non-abstract, so that it can be visited. Then, you can write config related to where you want to redirect (for example, I've used redirectTo with the state):
$stateProvider
.state('Main', {
redirectTo: "Main.PageOne",
url: "/Main",
templateUrl: "/templates/Common/Main.html"
})
// ... Rest of code
So, whenever the URL is changed to /Main, this state will get activated. The second config will be to create a listener for $stateChangeStart event as follows:
angular
.module('inspinia')
.config(config)
.run(function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params, { location: 'replace' })
}
});
});
Now, if a URL like /Ma/* is hit, it automatically be redirected to /NotFound. And if a URL like /Main is hit, it will redirect to /Main/PageOne.
You can follow up on further discussion on this link for any kind of troubleshooting.

Clearly read the statements below
Why are you using this line?
when('/Main', '/Main/PageOne')
For your redirection problem, have a look at the below state
.state('Main', {
abstract: true,
url: "/Main",
templateUrl: "/templates/Common/Main.html"
})
abstract: true ==> This denotes that this particular state is an abstract which can never be activated without its child.
SOURCE: ui-router js code. Refer the below snippet
Since you have this main state as abstract, you are redirected to the otherwise.
Hope this

How to deal with specific route state url parameters on AngularJS or Ionic? How to do route state override on specific parameters？

My question is simple, but I couldn't find solution anywhere else.
For example I have a normal route state with parameter,
.state('page', {
url: '/page/:pageid',
templateUrl: 'templates/pages.html',
controller: 'pagesCtrl'
})
However for example, if I have 1000 pages, but for the Number 1 and Number 999 pages I have to use another template. How could I simply do this? Something like
.state('page', {
url: '/page/:pageid',
templateUrl: 'templates/pages.html',
controller: 'pagesCtrl'
})
.state('page', {
url: '/page/1',
templateUrl: 'templates/page1.html',
controller: 'pagesCtrl'
})
.state('page', {
url: '/page/999',
templateUrl: 'templates/page999.html',
controller: 'pagesCtrl'
})
Will this work？I tested, the later 2 options are not overriding the original state with parameter.
If I wish to use the same controller, how to load the 1 and the 999 as the pageid parameter in the controller?

Definitely you shouldn't have two more state for separate template. You should use single generic state which will take templateUrl with the help of passed state parameter.
Code
.state('page', {
url: '/page/:id',
templateUrl: function($stateParams){
var template = $stateParams.id.indexOf([1, 1000]) > -1?'pages.html'
:'page'+$stateParams.id+'.html';
return 'templates/'+template ,
}
controller: 'pagesCtrl'
})

angularjs - ui-router - can we preload nested state?

I have this in my app.js:
$stateProvider
.state('actionplans', {
url: "/actionplans",
templateUrl: "pages/actionplans.html",
//controller : 'ActionplansCtrl'
})
.state('actionplans.planning', {
url: "/planning",
templateUrl: "pages/actionplans.planning.html",
//controller : 'ActionplansCtrl'
})
.state('actionplans.summary', {
url: "/summary",
templateUrl: "pages/actionplans.summary.html",
//controller : 'ActionplansCtrl'
})
How can I default load nest view action 'actionplans.summary.html' when called actionplans.html?

There is a working example
The way which will
load some view inside of a parent - and stay on parent
allow child change it when navigating to child
is called Multiple named views:
.state('actionplans', {
url: "/actionplans",
views: {
'': {
templateUrl: "pages/actionplans.html",
//controller : 'ActionplansCtrl'
},
'#actionplans': {
templateUrl: "pages/actionplans.summary.html",
//controller : 'ActionplansCtrl'
}
}
})
.state('actionplans.planning', {
url: "/planning",
templateUrl: "pages/actionplans.planning.html",
//controller : 'ActionplansCtrl'
})
.state('actionplans.summary', {
url: "/summary",
templateUrl: "pages/actionplans.summary.html",
//controller : 'ActionplansCtrl'
})
What we did above, is that we used views : {} object to define two views. First is targeting the index.html (the '') the second is targeting this state view target for children ( the '#actionplans').
views: {
'': { // index.html
...
},
'#actionplans': { // this targets the unnamed view for children
Read more about absolute names here
Another way, is to define some default redirection, but that will disable parent state as a real target (e.g. here Redirect a state to default substate with UI-Router in AngularJS)

Here discuss about AngularJS Routing Using UI-Router, you will get enough idea about nested view and multiple view.
https://scotch.io/tutorials/angular-routing-using-ui-router

I found a simple solution here.
$urlRouterProvider.when('/actionplans', '/actionplans/summary');//<-- Add in this line
$stateProvider
.state('actionplans', {
url: "/actionplans",
abstract: true,/// <-- Add in this line
templateUrl: "pages/actionplans.html",
})
.state('actionplans.planning', {
url: "/planning",
templateUrl: "pages/actionplans.planning.html",
})
.state('actionplans.summary', {
url: "/summary",
templateUrl: "pages/actionplans.summary.html",
})
This will load nest view actionplans.summary.html by default when you call /actionplans. My apology that I did not make this clearer in my question so I post the answer here hopefully it will help someone else with the similar scenario.

How to remove Ionic Framework tabs bar+ buttons and simplify routing?

I have an existing app with tabs bar and buttons at the bottom.
I hope to remove tabs completely and simplify the routing. Is it possible?
Im not looking for css or ionic appearence changes like suggested here. This merely hides the bar but routing isnt simplified.
My current routing:
.state('tab', {
url: '/tab', //anyway to remove this?
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'AuthCtrl'
})
.state('tab.posts', { //ideally no more tabs.something
url: '/posts',
views: {
'tab-posts': {
templateUrl: 'templates/tab-posts.html',
controller: 'PostsCtrl'}}
})
.state('tab.newpost', {
url: '/newpost',
views: {
'tab-posts': {
templateUrl: 'templates/tab-newpost.html',
controller: 'NavCtrl'}}
})
.state('tab.posts.view', {
url: '/posts/:postId',
views: {
'tab-posts#tab': {
templateUrl: 'templates/tab-showpost.html',
controller: 'PostViewCtrl'}}
})
I hope to simplify routing by removing the tab abstract state. Cos right now, it can get rather confusing with the view names and all.
I removed tabs state but app returned blank. Same for deleting the html file URL line.
When I revamped the naming convention, the program no longer works (blank screen) but yet devtools doesnt throw any errors.

Angular Js + Ionic: How to add additional view?

This is the situation:
I am using Angular Js into Ionic framework to make a mobile app.
I start up the project using the tabs boilerplate. I have three tabs right now: Login - Friends - Map.
I want to add an additional view, named 'member area', that is accessible after the login pass succesfully, but i am not able to do.
In the initial setup of the ionic tabs project, each view is defined as state.
This is the code:
angular.module('starter', ['ionic','AngularGM', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform){
$ionicPlatform.ready(function(){
if(window.StatusBar){
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab',{
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginController'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'mapController'
}
}
});
$urlRouterProvider
// if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');
});
This is what have tried to do:
1. Adding memberArea as .when
$urlRouterProvider
.when('/memberArea', {
templateUrl: 'main/memberArea',
controller: 'memberAreaController'
})
// if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');
});
But in doing this the app crash with this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: invalid 'handler' in when()
2. Adding memberArea as a state:
.state('memberArea', {
url: '/memberArea',
views: {
'memberArea': {
templateUrl: 'templates/memberArea.html',
controller: 'memberAreaController'
}
}
});
But is not working, accessing the url #/memberArea gives a blank page (no error in console)
3. Add memberArea as a tab:
.state('tab.memberArea', {
url: '/memberArea',
views: {
'tab-memberArea': {
templateUrl: 'templates/memberArea.html',
controller: 'memberAreaController'
}
}
});
and add the tab itself:
<!-- memberArea -->
<ion-tab title="memberArea" icon="icon ion-home" href="#/tab/memberArea">
<ion-nav-view name="tab-memberArea"></ion-nav-view>
</ion-tab>
In this way is working.. but is a tab and shouldn't be there the view.
If i remove this HTML for the tab menu, then the view is not accessible anymore from the URL address.
This is the question:
How can i properly define an additional view in Angular js + Ionic (with tabs) ?
Thank you very much!

If you don't want to handle the MemberArea as a tab, you should use the following syntax:
.state('memberArea', {
url: '/memberArea',
templateUrl: 'templates/memberArea.html'
}
);

If you place a . before the item in the states, you are saying it should inherit the parent.
For example tab.member will mean member inherits from tab.
Also if you use a stateProvider, you can no longer write the format as a urlProvider as per your example 1. It would have to be like your last line, otherwise. ....etc.
I would think a controller is still required, regardless if its on tab or not. (Correct me if Im wrong).

If u want to properly define an additional view not as a tab, then you should follow option 2, adding memberArea as a state:
.state('memberArea', {
url: '/memberArea',
templateUrl: 'templates/memberArea.html'
}
);
Use ui-sref='memberArea' instead of href in the element, on clicking of which you will show MemberArea.
And just check if this view location is available to the app.