when('/contact', {
templateUrl: './Contact.html',
controller: 'ContactController'
}).
otherwise(
{
redirectTo: '/home'
});
I am having templateurl like this. When I try to execute, My template url is not working. I have attached link to my application Angular TemplateURL . Please help me on how to fix the issuse.
Is it showing a 404 error? If yes, then check the path that it tried for finding your partials. Make sure that the path you have mentioned is correct. It is relative to the index. It should be pages/'pagename'.html
when('/contact', {
templateUrl: 'pages/Contact.html',
controller: 'ContactController'
})
Firstly you should first understand how relative path works. So, here it follows:
/ means the root of the current drive
./ means the current directory
../ means the parent of the current directory.
As you have used :templateUrl: './Contact.html', it will try to look into the current directory.
So you have to change the path of your template URL's like this:
when('/contact', {
templateUrl: './pages/Contact.html',
controller: 'ContactController'
}).
otherwise(
{
redirectTo: '/home'
});
Related
I have a litte problem with routing again.
I want to use angular routing but content of page no in "template" but link to html file.
What I have:
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
template: "<h1>Index</h1>"
})
.when("/about", {
templateUrl: "abc.html"
})
.otherwise({
redirectTo: "/"
});
});
And "templateUrl" doesn't work.
It throws: Error: [$compile:tpload] Failed to load template: abc.html (HTTP status: -1 )
I use <div data-ng-view></div>
Path to "abc.html" is
root
index.html
scripts
app.js
config.js
abc.html
So I use scripts/abc.html and "abc.html" and it do not work.
The problem is that angular can't locate your abc.html page. Is it in the root folder? if its in /templates/abc.html try putting that in "templateUrl" – jarasss just now edit
Your syntax should be:
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
template: "<h1>Index</h1>"
})
.when("/about", {
templateUrl: "scripts/abc.html"
})
.otherwise({
redirectTo: "/"
});
});
When you are using the templateUrl you will have to add the relative path to the html.
Make sure that the html page exists in your path.
I have an xml file and i tried to give routing as follows,
state('blog.bloglist', {
url: '/blog-list',
templateUrl: 'feed.xml',
controller: "blogListCtrl"
}).
but this shows errors,can some one please help me.
what type of document is feed.xml? what is said in error? perhaps, you dont mentioned the path to templateUrl correctly or templateUrl file is not a valid html-structured file. sample routing example is like this:
.state('dashboard', {
url: "/dashboard.html",
templateUrl: "views/dashboard.html",
controller: "DashboardController"
} //...
I'm writing a simple product information management app using angular js. To keep my app as modular as possible i've split it into multiple modules with one module "pim" as startpoint. For each module I want to have a different route, so that it is easy to plug in a new module or remove it without having to maintain a huge route in the pim module config.
Currently I have two routes (the first route):
(function(){
angular
.module("pim")
.config(router)
function router($routeProvider){
$routeProvider
.when("/",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/info",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/alcohol",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
});
}
})();
The second route
(function(){
angular
.module("alcohol")
.config(router)
function router($routeProvider){
$routeProvider
.when("/alcohol/list",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
})
.when("/alcohol/info",{
templateUrl: "view/alcohol.info.html",
controller: "alcoholController"
});
}
})();
As you can see /alcohol has a templateUrl and a controller, the same as /alcohol/list, but i want to know if there is a simple (standard) way to change to another URL for example /alcohol/list, so that I do not have to repeat the templateUrl and controller and keep this information in the alcohol module, where it belongs.
For example
.when("/alcohol",{
routeTo: "/alcohol/list"
})
Thank you for your help
SOLVED
The option to redirect exists, did not look in the $routeProvider documentation well enough:
.when("/alcohol",{
redirectTo:"/alcohol/list"
});
The code above works
You can use $routeProvider's redirectTo route map.
.when("/alcohol", {
redirectTo: "/alcohol/list"
});
Read more: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
I know you guys are going to say "It's duplicated" but it doesn't work for me.
I'm doing exactly the same thing and here's what happens.
This is my config code:
portfolioApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller: 'portfolioController',
templateUrl: 'partials/home.htm'
})
.otherwise({redirectTo: '/home'});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
});
The URL without the locationProvider and setting path to "/" instead of "/home" would be:
http://localhost:8080/portfolio/#/
Okey, i would like to remove the hashtag and the "portfolio" path so that way it would be:
http://localhost:8080/home
With the config i've posted, it does it (the first time i refresh). But what happens? happens that if I refresh the page again with the new path... i get a 404 Tomcat Error.
In the first refresh when i write localhost:8080/portfolio and the path gets converted into "/home", I get in the console an error saying that the "partials/home.htm" can't be found 404.
So either way, it can't read my partial, and then when I refresh everything is broken.
How can I solve this? what am I doing wrong?
Make sure your including these to scripts in the header of your HTML document Where you are implementing your module. The two provided below are for implementing the most current version of angular as well as the most current version of the angular route script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
Make sure your injecting ngRoute into your module, here's an example of mine:
angular.module('controller', ['ngRoute','ngResource', 'ngCookies', 'ngSanitize'])
Here is an example of my config block, make sure you inject both routeProvider and locationProvider:
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '../partials/member.php',
controller: 'Member',
access: 'member'
})
.when('/leaderboard', {
templateUrl: '../partials/leaderboard.html',
controller: 'Leaderboard',
access: 'member'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}])
If your doing all of this and it still doesn't work post a plunker of your code. Thanks.
I have a simple app in AgularJS. I need to load view in route
$routeProvider.when('/articles/:url', {
templateUrl: 'partials/article.html',
controller: ArticleCtrl
});
But if i click on
Page reloads and after reload Angular try to load partials/article.html view, but fails on error "NetworkError: 404 Not Found - http://localhost:3000/clanky/partials/article.html"
I know that I can use "../partials/article.html" insted "partials/article.html", but I mean that isn't the core of problem.
There are my routes:
blog.config([
'$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'partials/main.html',
controller: MainCtrl
});
$routeProvider.when('/login', {
templateUrl: 'partials/login.html',
controller: LoginCtrl
});
$routeProvider.when('/backend', {
templateUrl: 'partials/backend.html',
controller: BackendCtrl
});
$routeProvider.when('/articles/:url', {
templateUrl: 'partials/article.html',
controller: ArticleCtrl
});
return $routeProvider.otherwise({
redirectTo: '/'
});
}
]);
P.S.
If I try go to the any other route, for example, login, it partialy works, but reload is still here.
Thanks for yours answers
seems that I've got the same problem as you.
I don't know how to handle this but I think that's because the page was reloaded.
When you are not setting the html5Mode to true, then will be # at the url, and if you reload the page, the # will track the information to the $scope to work with the htmlHistory api so that the app can work properly even with the page refresh.
But once you set the html5Mode to true, then there's no # to store any $scope information, and when the page reload, angular can not found the accordingly scope so it return 404.
You can check $location section on angularjs guide, it has a section explaining why this happen.
Page reload navigation
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
Hope this can be helpful for you, and if you got any better answer, please let me know, I'm also waiting for the right way to solve it.
Start your templateUrl with a slash:
templateUrl: '/partials/article.html'
instead of
templateUrl: 'partials/article.html'