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.
Related
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
I've just encountered a problem which seems to have occurred due to me changing the folder structure of my app (but I think this is a "red herring"). I have a small AngularJS application and to tidy things up I moved one section of functionality to its own folder. I updated all <script> tag references, all view templateUrl values in my $stateProvider section... I don't get an 404 errors, all controllers and views are loaded but I have noticed that in my app I can't directly link to a specific URL (I could before). The URL I wish to directly/deep link to is http://myapp.com/an/membership
When I type this into the browser I get a GET http://myapp.com/an/membership/ 403 (Forbidden) error. The route has 4 child states / urls. I can deep link to all these. To make things worse if I have a link in my app (using ui-sref) I can link to my state / url with no problems... here is my state / routing code... I have added some comments to explain my problem...
/* This is the parent state of my membership state !! */
.state('sfm.in', {
abstract: true,
url: '/an/',
templateUrl: '/an/views/member-home/member-home-wrapper.html'
})
/* here the url is http://myapp.com/an/membership - I can link to it using ui-sref but can't deep link, I get a "403 forbidden", everything loads as expected (not sure if I need the abstract). */
.state('sfm.in.membership', {
url: 'membership',
templateUrl: '/an/membership/views/membership.html',
controller: 'MembershipCtrl',
abstract: true
})
/* this child state is a default and has the same URL as the parent - http://myapp.com/an/membership*/
.state('sfm.in.membership.advantages', {
url: '',
templateUrl: '/an/membership/views/membership-advantages.html'
})
/* No problem with deeplinking - http://myapp.com/an/membership/payment */
.state('sfm.in.membership.payment', {
url: '/payment',
controller: 'MembershipPaymentCtrl',
templateUrl: '/an/membership/views/membership-payment.html'
})
/* No problem with deeplinking http://myapp.com/an/membership/account */
.state('sfm.in.membership.account', {
url: '/account',
controller: 'MembershipAccountCtrl',
templateUrl: '/an/membership/views/membership-account.html'
})
/* No problem with deeplinking http://myapp.com/an/membership/data */
.state('sfm.in.membership.data', {
url: 'data',
controller: 'MembershipDataCtrl',
templateUrl: '/an/membership/views/membership-data.html'
});
I have correctly set up the $locationProvider.html5Mode in my app (as I can deeplink, type the url in the browser for other URLS).
Can anyone see a problem here? * UPDATE * I have added the parent state in the routing example, please see my comment from the first answer!
You forgot '/' in your first state:
.state('sfm.in.membership', {
url: '/membership',
templateUrl: '/an/membership/views/membership.html',
controller: 'MembershipCtrl',
abstract: true
})
This seems strange but I think the problem was the browser prepending the url when I type it in. I finally changed the code thus... but there is no real change here... I think the browser was the problem . In the meantime I changed the URL but cleaning the history / cache would have also solved the problem.
.state('sfm.in.membership', {
abstract: true,
url: 'member-ship',
templateUrl: '/an/membership/views/membership.html'
})
.state('sfm.in.membership.advantages', {
url: '',
templateUrl: '/an/membership/views/membership-advantages.html'
})
.state('sfm.in.membership.payment', {
url: '/payment',
controller: 'MembershipPaymentCtrl',
templateUrl: '/an/membership/views/membership-payment.html'
})
.state('sfm.in.membership.account', {
url: '/account',
controller: 'MembershipAccountCtrl',
templateUrl: '/an/membership/views/membership-account.html'
})
.state('sfm.in.membership.data', {
url: '/data',
controller: 'MembershipDataCtrl',
templateUrl: '/an/membership/views/membership-data.html'
})
In my application i use animation and ui-route
my app route like this
$stateProvider
.state('app', {
abstract: true,
url: '/{lang:(?:he|en)}/',
template: '<ui-view/>'
}).state('app.home', {
url: '',
templateUrl: "Assets/app/templates/home.html",
controller: 'homeController'
})
.state('app.activity', {
url: "activity",
templateUrl: "Assets/app/templates/gallery.html",
controller: 'galleryController'
})
The animate work just when i moved from language he to language en,
but when i moving to one of the other page (inside the language) like from home to activity page the animation does not work.
How can i make the animation to work either for "sub pages"
thanks
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.
This is my AngularJS code
angular
.module('portfolio', [
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '../home.php'
})
.state('news', {
url: '/news',
templateUrl: '../newsload.php'
})
.state('gallery', {
url: '/gallery',
templateUrl: '../gallery.php'
})
.state('contact', {
url: '/contact',
templateUrl: '../contact.php'
})
.state('about', {
url: '/about',
templateUrl: '../about.php'
})
}])
on page News i have some jquery animations, tranisitions, etc,.. and it doesnt work because (i think) jquery loads before angular even populates my site...
The thing is I dont even know if AngularJS is the right way for what I want to achieve, I just saw it online and was impressed on how fast it is.
What should I do?