my Angular Code for stateProvider
.state('profile',{
url: '/profile',
templateUrl: 'Templates/profile.html',
controller: 'profileCtrl'
})
.state('profile.details',{
url: '/:id',
templateUrl: 'Templates/profile.details.html',
controller: 'profileCtrl'
})
when i write this in chrome bar
http://localhost/site/profile/1
Apache Response is
The requested URL /site/profile.html/1 was not found on this server.
but if i click on ui-sref link it's open well
Because you're using client side routing, it is responsability of whatever server side technology you're using (Node.js, Rails, Django, ASP.NET...) to have a * (catch all) route that would accept everything and just render the same thing (your HTML with the bundle.js) and let the client to decide what to render.
Related
The ui-router in our angular application always appends "#app" to the URLs in our app, which clearly is not desired behaviour. This also has the side-effect, that when you use the browser navigation (back and forward), you'll need two clicks to actually switch the page.
AngularJS version: 1.2.29
ui-router version: 0.2.10
The browser history looks like so:
http://localhost:8080/app/#/modulename
http://localhost:8080/app/#/modulename#app <- unnecessary step
http://localhost:8080/app/#/anothermodule
http://localhost:8080/app/#/anothermodule#app <-unnecessary step
... and so on.
We already tried switching to ui-router's html5mode, but this just omits the first hash-sign in the URL and doesn't have any effect on anything else.
This is our stateProvider
$stateProvider
.state('app', {
abstract: true,
url: '/',
// parent: true,
templateUrl: CONFIG.baseUrl + '/js/modules/Core/View/app.html',
})
.state('access.404', {
url: '/404',
templateUrl: 'tpl/page_404.html'
});
I'm using AngularJS for my front end web framework and was wondering how I can change the routing of my states so that when i go to my website, it would say (for example) abc.com rather than abc.com/home. I am using StateProvider to switch between views and this as default home url
state('home', {
url: '/home',
templateUrl: 'pages/home.html',
}).
$urlRouterProvider.otherwise('/home');
I have this in my index.html
<div ui-view></div>
I want to keep my home page content in a separate file from index.html, yet always not show that url so I would not see "/home" at all whenever I use the website. How can I do this?
state('home', {
url: '/',
templateUrl: 'pages/home.html',
})
$urlRouterProvider.otherwise('/');
You need to change the URL in the route definition to / instead of /home.
I'm using angularjs ui-router with this stateProvider:
.state("admin", {
abstract:true,
url: "/admin",
templateUrl: "/app/template/adminabstract.html",
controller: "AdminAbstractController"
})
.state("admin.view1", {
url: "/view1",
templateUrl: "/app/template/adminview1.html",
controller: "AdminView1Controller"
}).state("admin.view2", {
url: "/view2",
templateUrl: "/app/template/adminview2.html",
controller: "AdminView2Controller"
})
Here is the current localhost link:
http://localhost:52058/index.html#/admin/view2
It works just fine in localhost, however when I publish to the server it no longer works. Here is what the link looks like on the server:
http://specific.com/appname/otheridentifier/index.html#/admin/view2
For my app to work when it is published I think I need to change my ui-router config or state provider so my localhost is
http://localhost:52058/index.html#/appname/otheridentifier/admin/view2
Am I on the right track? What do I need to do to make this work?
Since your website doesn't look like its in the root of the site you cant do
templateUrl: "/app/template/adminview1.html"
the / is saying look at the root of this website so it looks at
http://specific.org/app/template
you would want to change your template address to
templateUrl: "/appname/otheridentifier/app/template/adminview1.html"
I am writing a CRUD app with AngularJS + UI Router.
I want to be able to parse the current location in the browser URL and determine if a ui-router state should be applicable for the current url.
In these sample routes, is there some way to do the if and unless clauses?
(url in browser address bar is http://example.com/notes/1/edit_me)
$stateProvider.state("root", {
url: "",
unless: $location.matches(/\edit_me/)
})
$stateProvider.state("edit", {
url: "/edit",
if: $location.matches(/\edit_me/)
//
})
UPDATE 1
The reason I want to do the above:
Say I am at http://example.com/notes. The routes is
$stateProvider.state("root", {
url: "",
})
However, with the same above ui.route state, when I am at url http://example.com/notes/edit, the root is now "/notes/edit" instead of "/notes"
UPDATE 2
#adam, more explanation of what I am trying to accomplish:
I will try to explain: in your code, for your home state, the (ui.router's) url is / (aka hash syntax #!/)
However, the URL in browser address bar looks like http://example.com/notes/ in one case and http://example.com/notes/edit in another case. (note that the URLs do not contain any #! portion since we have just navigated to the page)
Now the home's / is going to match in both cases of above URL.
But since the second URL ends in notes/edit, I want that the home for this URL should be #!/edit, and not #!/.
Basically I am trying to mix server-side rendered pages (/notes and /notes/edit are rendered by server, not AngularJS)
and client side routing so that no matter which URL we are at, the client can figure out which (ui.router) route applies to the current URL.
Make sense?
Sorry i don't really understand your needs but here's an example of use of ui-router:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/index.html',
controller: 'MainCtrl'
})
$stateProvider
.state('edit', {
url: '/edit',
templateUrl: 'app/edit/edit.html',
controller: 'EditCtrl'
})
$stateProvider
.state('edit.note', {
url: '/note',
templateUrl: 'app/edit/note.html',
controller: 'NoteCtrl'
});
$urlRouterProvider.otherwise('/');
i'm not sure if a copy paste will work, but try to adapt it with your case. Hope it will help.
Edit:
I'm afraid that i can't help you more than that. The design of your app with rendered page without angular sounds really special.
Have you tried the example i provide you? If yes, hav you simply format the url by addind
" #!/ " where you need it.
For example:
$stateProvider
.state('edit', {
url: '#!/edit', //or something like, url:'/#!/edit'
templateUrl: 'app/edit/edit.html',
controller: 'EditCtrl'
});
Check this link also may be it will help you:https://github.com/angular-ui/ui-router/issues/372
ui-sref may help you
But the place to see usefull example for ui-router it's his own doc.
https://github.com/angular-ui/ui-router
and here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router
My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?
If you are using ui-router, then you can define states without specifying urls like
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'Controller3'
})
.state('state2', {
templateUrl: "state2.html",
controller: 'Controller2'
})
.state('state3', {
templateUrl: "state3.html",
controller: 'Controller3'
})
});
So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').