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.
Related
I am having an issue with using html5Mode with ngRoute not quite like issues others have had with the same thing. Here is the most relevant section of my code:
(function () {
var config = function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: 'common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationId', {
templateUrl: 'locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
/* $locationProvider.html5Mode({
enabled: true,
requireBase: false
}); */
};
angular
.module('loc8r', ['ngRoute', 'ngSanitize'])
.config(['$routeProvider', '$locationProvider', config]);
})();
The issue arises specifically with the route for /location/:locationId. With html5Mode on, an attempt to load a URI like http://127.0.0.1:3000/location/5a27ab691c5e0a989c0634da results in a blank page. Curiously, my logging output from Node tells me that the template and controller are both being accessed. Even more curiously, if I change the route from /location/:locationId to just /:locationId and load a URI like http://127.0.0.1:3000/5a27ab691c5e0a989c0634da, then the page will load. But the only way to get /location/:locationId to work is to leave html5Mode disabled and then go to http://127.0.0.1:3000/#!/location/5a27ab691c5e0a989c0634da. But that's ugly. How can I get html5Mode working in this case?
If necessary, I can push all my most recent changes to GitHub and then provide the full code.
Have you set up base attribute in index.html file?
Check: How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?
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'
});
So I'm fresh into AngularJS, trying to build my first application. And I'm stuck at routing. The first line works, which is just to load a view when the site is entered, but the next one is just telling me "Object not found".
Now I'm a true noob. I'm just running this on a plain MAMP stack.
This is the code I've written in JS:
angular.module("Portfolio", ['ngRoute', 'ngProgress']);
angular.module("Portfolio").config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/assets/pages/home.php',
controller: 'MainController'
}).when('/test', {
templateUrl: "assets/pages/test.php",
controller: 'MainController'
});
$locationProvider.html5Mode(true);
});
I'm certain that there's no mistake in HTML, since the rest of the code works just fine.
So what did I do wrong here? Thanks.
angular.module("Portfolio", ['ngRoute', 'ngProgress']);
angular.module("Portfolio").config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/assets/pages/home.php',
controller: 'MainController'
}).when('/test', {
templateUrl: "/assets/pages/test.php",/* your previous template url is not correct.*/
controller: 'MainController'
});
$locationProvider.html5Mode(true);
});
insert / in this routing
templateUrl: "/assets/pages/test.php",
I am using ngRoute in my AngularJS app to build up different app routes, below is part of my app.js. Now the problem I am facing is that the URL is shown as ( localhost/myapp/index.html#/home ) while my client needs is at localhost/myapp#/home so I was wondering how I can get the index.html out of the equation or at least make it as localhost/myapp/index#/home without the .html? Thanks
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home',
{ templateUrl: 'templates/home.html',
controller: 'homeController'
});
$routeProvider.when('/about',
{templateUrl: 'templates/aboutus.html',
controller: 'aboutUsController'
});
$routeProvider.otherwise({redirectTo: '/home'}); }]);
You should be able to do this with a combination of $locationProvider.html5Mode(true) and <html><head><base href="/myApp">
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.