I'm trying to use angularjs routing to load my templates and am getting a '404 page not found error' no matter what templateurl I put down. Should I be changing my context.xml file or am I just missing a step here? Any input would be appreciated.
This is my routing config (app.js):
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/mainview',
controller: 'appController'
})
.otherwise({
redirectTo: '/'
});
});
=============================
And my Spring Controller is as follows (SampleController.java):
#Controller
public class SampleController {
#RequestMapping(value="views/mainview", method=RequestMethod.GET)
public String displayView(){
return "views/mainview.jsp";
}
}
=============================
Folder structure is as Follows
java
com
sample
controller
SampleController.java
webapp
META-INF
resources
js
app.js
WEB-INF
views
mainview.jsp
templateUrl property defines which HTML template AngularJS should load and display inside the div with the ngView directive.
Use
templateUrl : 'mainview.html'
First you need to check the server where the server is serving file
for example :
java/com/views/mainview.html
or
views/mainview.html
Related
I am following a book called MEAN Machine. The code from the part in this book in question can be found at this Github Repo.
When clicking the links in /public/views/index.html which should be routed, I get file not found errors in the web browser.
The code (/public/js/app.routes.js) that does not seem to work:
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'views/pages/home.html',
controller : 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateUrl : 'views/pages/about.html',
controller : 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateUrl : 'views/pages/contact.html',
controller : 'contactController',
controllerAs: 'contact'
});
$locationProvider.html5Mode(true);
});
In the index.html file, we are pointing to the correct files:
<script src="js/app.routes.js"></script>
<script src="js/app.js"></script>
To test their code, I changed the base tag in index.html to my folder's path which eliminated errors of not finding the above files.
Is this material dated? Also, I realize this book is not using Angular 2. Does Angular 2 vary drastically in routing and is this material deprecated?
Simply run command
node server.js
from '12-angular-routing' directory and open in browser http://localhost:8080
The problem is that browsers by default does not allow AJAX requests to files located on your local file system. In this case you should run your local server which serves client application(server.js is simple express server).
I am working on a small AngularJS project. I used ui-router to route different html templates which works fine. The code and folder structure shows as below:
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: '/news',
templateUrl: 'news.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('news');
}]);
Folder Structure:
However, when I tried to install them into the Nodejs/Expressjs, it shows the error: GET http://localhost:3000/news.html 404 (Not Found)
I have already put all html templates into the views folder shows as below, but doesn't work. I am new to NodeJS, anyone knows what happened? Thank you so much in advance!
Put all your HTML files in public folder and access all from there. Since Angular unable to get that pages from views folder since it's server side stuff.
Putting HTML files in public folder is not a standard but it's mostly used while using Angular
You can get more ideas from here with Jess answer
I think you just need /views/home.html in your templateUrl: and the views folder should be inside your public directory.
I assume you have something close to app.use(express.static(path.join(__dirname, 'public'))); somewhere? This is setting you up to display static files from within the public directory.
I have an angular application such that the routing might look like this:
angular.module('app').config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller: 'homeController'
})
.when('/foo', {
templateUrl : 'views/foo.html',
controller: 'fooController'
})
.otherwise({
redirectTo : '/'
});
$locationProvider.html5Mode(true);
});
Now, this may be an overly simple question, but can I serve a static page that is never going to change and needs no added javascript from me without specifying it with a .when route? For example, say I want to serve Googles Webmaster tools verification like so:
/googlee23dc3443279f430.html
Do I really need to create a .when('/googlee23dc3443279f430.html') route?
EDIT: We also did a server rewrite to make it so that non '/' routes would still serve up the index.html file, as specified in this wiki (and to get html5mode(true) working on page refreshes):
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Would be nice not to have to add rewriteconditions each time we want to add a static page
if the entire page should be replaced with static html, you can use a link with ng-href (to make it dynamic and data based and not hardcoded) - https://docs.angularjs.org/api/ng/directive/ngHref
I have to build an app for an existing website, but unfortunately the website (outside of my control) detects the user device and redirects to a mobile version.
I am trying to reuse the same js file but different html files.
So I have:
index.html for desktop
mobile.html for mobile
both call init.js where I want to handle my logic, my problem is that for some reason the routing is not working as I expected and I cannot figure out why.
Desktop:
I go to example.com
get redirect to example.com/#/steps/age/0
Refresh the page and it stays in example.com/#/steps/age/0
This works as expected
Mobile:
I go to example.com/mobile.html
get redirect to example.com/mobile.html#/steps/age/0
Refresh the page and instead of staying in the same url, it goes to example.com/steps/age/0#/steps/age/0
This does not work as expected (expected to stay in the same url once refreshing as in the step number 2)
Code below:
angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/steps/age/0'
});
})
.controller('example', function($scope, $routeParams, $resource, $location){
console.log("example controller");
});
Can anyone please advise?
Thanks.
Angular is examining the entire path to see where it should route to. So when you have example.com/mobile.html#/steps/age/0 There is no matching route, so it substitutes the route for you, in place of mobile.html so you get /steps/age/0#/steps/age/0 from your otherwise. The fundamental problem is that angular has no sense of what mobile.html means, and takes it as a parameter.
One solution is to use routes to separate your pages.
$routeProvider
.when('/', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/', {
templateUrl : 'mobile.html',
controller : 'example'
})
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.when('/mobile/steps/:steps*', {
templateUrl : 'mobile-profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/'
});
})
Controllers may vary as needed.
Alternatives to this are to have mobile.html use its own angular App and routing, which may be beneficial since you won't run into desktop directives leaking into mobile. You can inject all of your directives and controllers into it, but still have a nice separation of index and mobile. You can take that a step further and have a redirect to m.example.com, but that's a different topic.
EDIT I made a mistake. Having templateUrl be index.html is a bit wrong. index.html should contain your ng-app and your ng-view directives, possibly a controller. Any common html should reside there. desktop.html and mobile.html should contain the specific HTML for those platforms.
As an afterthought, Within those you could have a directive called profile that does all of your profile work, and with a bit of ng-switch you can have that appear if steps is defined in the scope, and use:
$routeProvider
.when('/steps?/:steps?', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/steps?/:steps?', {
templateUrl : 'mobile.html',
controller : 'example'
})
But now I'm rambling, I'm not 100% sure that will work tbh. END EDIT
I have an MVC 5 app with areas and I am trying to use the ui-router for AngularJs within one of my areas but I noticed that the templateUrl is wrong. It is trying to use a relative path but since I am using MVC routes and an Area the path to the template is incorrect.
The url to my area controller action is localhost:3789/Admin/UserManager .
The actual path is /Areas/Admin/Scripts/app/usermanager/partials/userlist.html .
angular.module("bsAdmin.userManager", ["ngResource", "ui.router", "ui.bootstrap", "bsPromiseTracker", "bsBusy", "angular-growl", "ngAnimate"])
.config(function ($stateProvider, $urlRouterProvider) {
// default state
$urlRouterProvider.otherwise("/userlist");
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "partials/userlist.html"
});
});
Angular ui-router tries to load the partial template using localhost:3789/Admin/partials/userlist.html
What are some techniques I can use so that the script will use the correct url to load the partial?
If your Angular javascript is in your .cshtml file, you can use the ASP.NET MVC URL helper to build the URL.
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "#Url.Content("~partials/userlist.html")"
});
});