I am using ui-router in my web application. On one of my views I have a canvas which I am drawing to using a 3rd party library. This library attempts to dynamically load images (HTTP GET). My problem is ui.router's $urlRouterProvider is handling the routing and therefore all image requests are resulting in a 404 error.
How is this typically handled in an AngularJS application? Is there a way to ignore specific routes?
My route configuration looks like this:
app.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
//
// Now set up the states
$stateProvider
.state('main', {
url: "/",
templateUrl: "partials/main.html"
})
.state('login', {
url: "/login",
controller: 'LoginCtrl',
templateUrl: "partials/login.html"
})
.state('signup', {
url: '/signup',
controller: 'SignupCtrl',
templateUrl: 'partials/signup.html'
})
});
I'd like to ignore any routes matching '/assets/*' and allow those requests to pass right through to the server.
This is typically dealt with at the server level (Express here):
app.use express.static(path.join(__dirname, "assets"))
So that any url with "/js/app.js" will be rendered as an asset. It shouldn't be something angular has to deal with. I've got a very similar $stateProvider that I grabbed off of some boilerplate and there's no special case for assets in the $stateProvider.
Do you have script or img tags inside of a controller or view boundary? That could explain what you are seeing.
Related
I am using AngularJS ui route for routing I want to remove # (hash from URL). I am using this code and also using (base href="/") in my index.html file. It's working fine but when I refresh the page like (http://0.0.0.0:3000/athletepersonalinfo) it's giving me an error.
.config(function($stateProvider,$locationProvider) {
$locationProvider.html5Mode({ enabled: true, requireBase: false })
$stateProvider
.state('/', {
url: '',
templateUrl:HTML.HOME,
controller: 'homeController as home'
})
.state('home', {
url: '/',
controller: 'homeController as home',
templateUrl: HTML.HOME
})
.state('athletepersonalinfo', {
url: '/athletepersonalinfo',
controller: 'athleteProfileInfo',
templateUrl: HTML.ATHLETE_PERSONAL_INFO,
authenticate: true
})
When you hit refresh the server actually tries to find if the given route has been defined /athletepersonalinfo. To actually remove the # from the url you will have to include a get(/*) route which would always return your index.html page. This route should be after all other routes. Now what this means is your index.html will be served whenever no routes is defined than in your client side angular will handle which view to load. Few points to note when making such chages
Since any unresolved get could return your index.html make sure your routes are meaningful like all your assets start with /assets/ path, all your api calls start with /api/ .
The benefit in doing so is if you get a 404 on some assets or an api call you would still get your index.html which is wrong. But with this approach all you need to do is set a route something like this
app.get('/:url(api|assets)/*',function(req,res){
res.status(400).send("Not Found")
});
app.get('/*',function(req,res){
res.sendFile('index.html');
});
Make sure the * route is defined after all other routes else you will keep getting index.html for every request.
Hope this helps.
My url looks like this
http://127.0.0.1:50884/index.html#/home
This is index page. I am using angular ui-router to change to various views like but url comes with # tag like this:
http://127.0.0.1:50884/index.html#/mobileOperator
http://127.0.0.1:50884/index.html#/contentExpertise
Question :
Is there a way to remove/clean # tag from url.. to show the url path like below:
http://127.0.0.1:50884/index.html/home
http://127.0.0.1:50884/index.html/contentExpertise
I tried html5mode but it give angular error in console.
Error: [$location:nobase] http://errors.angularjs.org/1.5.0-rc.2/$location/nobase
K/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:6:421
pf/this.$get<#http://127.0.0.1:50884/js/angular-v1.5.min.js:110:96
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
s/</<#http://127.0.0.1:50884/js/angular-v1.5.min.js:52:121
n#http://127.0.0.1:50884/js/angular-v1.5.min.js:7:364
s/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:52:90
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
e/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:38:458
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
K#http://127.0.0.1:50884/js/angular-v1.5.min.js:71:447
la#http://127.0.0.1:50884/js/angular-v1.5.min.js:60:266
R#http://127.0.0.1:50884/js/angular-v1.5.min.js:58:229
R#http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
R#http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
N#http://127.0.0.1:50884/js/angular-v1.5.min.js:56:263
Ac/c/</<#http://127.0.0.1:50884/js/angular-v1.5.min.js:21:99
sf/this.$get</m.prototype.$eval#http://127.0.0.1:50884/js/angular-v1.5.min.js:140:363
sf/this.$get</m.prototype.$apply#http://127.0.0.1:50884/js/angular-v1.5.min.js:141:83
Ac/c/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:21:57
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
Ac/c#http://127.0.0.1:50884/js/angular-v1.5.min.js:20:1
Ac#http://127.0.0.1:50884/js/angular-v1.5.min.js:21:274
de#http://127.0.0.1:50884/js/angular-v1.5.min.js:20:83
#http://127.0.0.1:50884/js/angular-v1.5.min.js:306:372
n.Callbacks/i#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27060
n.Callbacks/j.fireWith#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27828
.ready#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29619
J#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29804
"
Please help
By default, AngularJS will route URLs with a hashtag.
It is very easy to get clean URLs and remove the hashtag from the URL using $locationProvider in AngularJS.
You need to inject $locationProvider into your config section of module and use the HTML5 History API like this.
e.g.
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('about', {
url: '/aboutus',
templateUrl: 'aboutus.html'
});
$locationProvider.html5Mode(true);
});
Also don't forget to put a <base href="/"> tag inside index.html section.
In order for html5 mode to work you must define a baseurl like:
<base href="whatever/" />
See w3schools for more information: http://www.w3schools.com/tags/tag_base.asp
For some reason my ui-sref links are not updating and allowing me to change state on my app.
Can someone please tell me what i have done wrong? I have attached a plunkr link for the full code
App.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
'use strict';
// defaults to home
$urlRouterProvider.otherwise('/home');
// states
$stateProvider
.state('app', {
url: '',
abstract: true,
templateUrl: 'app.html',
controller: 'AppController'
})
.state('app.home', {
url: '/home',
templateUrl:'home.html',
controller: 'HomeController'
})
.state('app.settings', {
url: '/settings',
templateUrl: 'settings.html',
controller: 'SettingsController'
});
}]);
http://plnkr.co/edit/m77wrOU0sMLG0fmicTaK
If i navigate to /home, this works and if i go to /settings that also works. but the links are not generated on my pages?
Also, if i want to have multiple layouts, say i would like an admin layout and a normal user layout, maybe the admin layout would hide a few items on the page and show others, would this be best to be done using routing? I have about 6 different parts of the page, currently not setup as views, but i wonder if this is the route i should go down?
Is there anything wrong with having more than 1 abstract state in your stateProvider, or is that stupid?
I have created a project with index.html with certain links to other pages. My routing works as intended but I'm wondering what's the best approach to go with when it comes to links on other pages.
To clarify it:
My index.html page has routes:
Feed
Bblog
Marketplace
Recruiting
Adverts
Now what I'm curious about is how do I for example route links inside these pages.
For example, my Bblog page has tabs which I want to be opened inside the same page. Now for example whenever I click some tab link, it redirects me to my index.html since my .otherwise route is set to /.
Not sure what engine or library you're using for your routing. Though I faced the same requirement not too long ago.
We're using ui-router for our routing. It's very similar to Angulars routing.
A snippet from our routing table contains something similar to this.
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/index',
})
.state('orders', {
url: '/orders',
templateUrl: '/views/orders',
})
.state('orderdetail', {
url: '/orders/detail/:id',
templateUrl: '/views/orderdetail',
})
.state('orderdetail.address', {
url: '/:addressId',
templateUrl: '/views/orderdetail',
})
Essentially you use the .dot notation to separate nested views. So the orderdetail.address is nested inside the orderdetail
This means that the routing above will go something allow you to see an overview of order details at /orders/detail/myOrderId and drill further in to, say, an address by visiting /orders/detail/myOrderId/myaddressId
If you're using ui-router then you will get more info on nested views on this link
If you're using angular ngRoute then the [ngRoute][3] docs and supporting plunker demonstrate how to stack up the routes.
So (from the plunker) -
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
this will give you /book/myBookId and /book/myBoodId/ch/myChapterId
I'm trying start developing angular apps with yeoman. It may sounds stupid, but I have a problem with creating routes using yo:angular route.
When I create new route using:
yo:angular route foo
yeoman creates:
app/scripts/controllers/foo.js (controller)
app/views/foo.html (view)
app/test/spec/controllers/foo.js (testing the controller)
in app.js it creates:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
so everything should work fine. Unfortunately the route doesn't work - when I try open
http://localhost:9000/foo
I get following error:
Cannot GET /foo
The idea of routes in yeoman looks pretty easy and I'm not sure where the problem is.
Did you enable HTML5 mode in your Angular application? If not, the URL would be:
http://localhost:9000/#/foo
And if you have enabled HTML5 mode in your Angular application, you have to make sure whatever server you're using has been configured to handle all routes as they were the root of the application.