I am looking to add a base href to my webapp. Currently everything runs correctly when running:
localhost:3000/#/login
But i need to add base href or "charge" -> localhost:3000/charge/#/login
Current index.html
<head>
<base href="charge/" />
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" ....
</head>
Anuglar Route File
function routerConfig($routeProvider, $locationProvider) {
$routeProvider
.when('/map', {
templateUrl: 'app/views/main/main.html',
controller: 'MainController',
controllerAs: 'mainCtrl'
})
.when('/login', {
templateUrl: 'app/views/login/login.html',
controller: 'LoginController',
controllerAs: 'loginCtrl'
})
.when('/list', {
templateUrl: 'app/views/list/list.html',
controller: 'ListController',
controllerAs: 'listCtrl'
})
.when('/reporting', {
templateUrl: 'app/views/reporting/reporting.html',
controller: 'ReportingController',
controllerAs: 'reportingCtrl'
})
.otherwise({
redirectTo: '/map'
});
// $locationProvider.html5Mode(true);
}
Whenever i run my app with the basehref and navigate to localhost:3000/charge/#/login, basically every view, controller, bower component, and the module cannot be found. I have tried editing the router, changing the name of the main app folder but cannot get this to work. I know i am missing something small so any help is greatly appreciated!
My issue seems very similar to Base Href and Angular Routing and Views but i honestly just cannot figure this out.
If you're using Chrome and you look in the developer console, look at what the URL for the resources it can't find:
http://localhost:8080/charge/app.js
It is looking at the root of the project, and then for a folder called charge, and then for the resource.
The HTML element specifies the base URL to use for all relative
URLs contained within a document. There can be only one element
in a document. - MDN
Can you tell us what your directory structure looks like here? If your project files are directly in root, try making a subfolder named "charge" and put all of your files in it.
Example: root > charge > project files
Helpful link: AngularJS: Changing App Path, and the Element
Try prepending a "/" before all of your source URLs. This will begin each path at the root directory of your project rather than at your base href.
e.g. templateUrl: '/app/views/main/main.html'
Related
So I have an existing angular app which routes/imports (eg: href and src) from the root path only (ie: /). So the app loads up at http://localhost:8080/ and and the base url is /. I want to change it to be http://localhost:8080/myapp/ so all links will then prefixed with /myapp.
I tried updating this code here from (it's in a Java jsp called app.jps):
<head>
<base href="/" />
to
<head>
<base href="/myapp" />
But this did nothing, I still get errors like this (and others like it): angular.js:11630 GET http://localhost:8080/angularapp/home/home.html?version=4 404 ()
There are many other errors like this, and the page is just blank (white) so far. Do I have to go and piecemeal edit all these urls to include /myapp in front of it? OR is there a better way?
More info:
Template Urls look like this (in app.module.js):
$stateProvider
.state('home', {
url: '/',
templateUrl: '/angularapp/home/home.html?version=' + window.version,
controller: 'HomeCtrl',
controllerAs: 'vm'
})
It seems like you are missing the end slash.
<head>
<base href="/myapp/" />
Please update href to "/myapp/", that should work.
If you change your templateUrl to:
templateUrl: './angularapp/home/home.html?version=' + window.version,
it should take it as a relative path.
Try that and see what it gives you (assuming your base url already comes off http://localhost:8080/myapp/).
An AngularJS site with a Spring Boot backend has numerous public url patterns in addition to a secure section. All the public url patterns fall in the model mydomain.com/public1, mydomain.com/public2, mydomain.com/public3, and so on, while all the secure content will be inside the mydomain.com/secure url pattern like mydomain.com/secure/one_of_many_urls. The problem is that the sample app I am starting with has separate modules for every route. This would become hard to maintain with n routes.
How can I set the code up so that all the public1, public2, public3, public_n routes share a single controller?
Here is the current directory structure. I would like for the public1 directory to turn into public and be able to map as many specific url patterns as I want to put into it:
In addition, my public1.js is currently empty as follows:
angular.module('public1', []).controller('public1', function($scope, $http) {
});
The link to the public1 route is handled in a navigation bar in index.html as follows:
<!doctype html>
<html>
<head>
<title>Hello Angular</title>
<!-- To produce natural routes (without the #), you need an extra <base/> element in the header of the HTML in index.html, and you need to change the links in the menu bar to remove the fragments ("#"). There are also changes in a spring controller and in the main js module. -->
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}">home</li>
<li ng-class="{active:tab('message')}">message</li>
<li ng-class="{active:tab('public1')}">public1</li>
<li>login</li>
<li ng-show="authenticated()">logout</li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/auth/auth.js" type="text/javascript"></script>
<script src="js/home/home.js" type="text/javascript"></script>
<script src="js/message/message.js" type="text/javascript"></script>
<script src="js/public1/public1.js" type="text/javascript"></script>
<script src="js/navigation/navigation.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
</body>
</html>
And public1.html is:
<h1>Public 1</h1>
<div>
<p>This will be a public url pattern.</p>
</div>
How do I change the code below so that a scaling n number of public routes can efficiently share the same controller? Each public_n route will have their own images, but would share js logic, if they have any js logic.
I found the following, but where would one put it in the code above, and how would a person link everything to it without resorting to leaving it in hello.js?
.when('/public1', {
templateUrl: 'js/public/public1.html'
}
.when('/public2', {
templateUrl: 'js/public/public2.html'
}
.when('/public3', {
templateUrl: 'js/public/public3.html'
})
How do I change the code below so that a scaling n number of public
routes can efficiently share the same controller?
You can Associate one Controller to Many Routes (Views) just assigning it to more routes in your $routeProvider as follows:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/public1', {
templateUrl: 'js/public/public1.html',
controller: 'myController'
})
.when('/public2', {
templateUrl: 'js/public/public2.html',
controller: 'myController'
})
.when('/public3', {
templateUrl: 'js/public/public3.html',
controller: 'myController'
})
.otherwise({
redirectTo: '/'
});
})
You can also Set a Controller Alias as follows:
.when('/public1', {
templateUrl: 'js/public/public1.html',
controller: 'myController',
controllerAs: 'myCtrl'
})
I found the following, but where would one put it in the code above,
and how would a person link everything to it without resorting to
leaving it in hello.js?
If I got your question, you just need to put the $routeProvider in a separated routeProvider.js file and include it in your index.html. Same thing for your controller/controllers.
I suggest you to take a look at:
AngularJS Controllers Documentation
AngularJS $routeProvider Documentation
Follow the first lesson of - CodeSchool - Staying Sharp with AngularJS
EggHead.io AngularJS Screencasts
And also take a look at those Q/A on StackOverflow:
Using one controller for many coherent views across multiple HTTP requests
Views sharing same controller, model data resets when changing view
Controlling multiple views in one controller in AngularJS
Can I use one controller updating two views in AngularJS?
I hope I've been helpful.
I have a simple angularjs app, with ngRoute module for routing in html5Mode.
How can I have a link to some static file on my page, and not to have it intercepted by angular routing module?
Here's the example:
HTML:
<head>
<base href='/'></base>
</head>
<body ng-app="crudApp">
Home
User
users.html
<div ng-view></div>
JS routing:
$routeProvider
.when('/', {
templateUrl: 'app/components/home/homeView.html',
controller: 'HomeController'
})
.when('/user', {
templateUrl: 'app/components/user/userView.html',
controller: 'UserController'
})
.otherwise({
redirectTo: '/'
});
When I click on User link I get routed to localhost:8080/user, and my controller and template work fine. When I click on users.html link I get routed to home, but I want to invoke a static home.html page.
From the AngularJS docs, you have 3 options:
Html link rewriting
(...)
In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path
Example: link
What you might be looking for is the first example:
users.html
I am trying to rid my site of Hashbangs but I can't seem to get it quite right. For example, if I land on my home page and then click on the "CSS" menu and select the "Origami Element" menu option, I briefly see the page load before I am directed to a GitHub 404 page.
If I put the url (http://eat-sleep-code.com/css/origami) in directly, I get sent directly to the GitHub 404.
What am I missing, or is this not possible on a GitHub Pages-hosted AngularJS site?
Below is a partial chunck of my app.js
var app = angular.module('eatsleepcode', ['ngRoute', 'ngSanitize']);
/* Routing */
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
when('/blog', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
when('/blog/:postID', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
when('/contact', {templateUrl: 'views/contact.html', controller: 'DefaultController'}).
when('/privacy', {templateUrl: 'views/privacy.html', controller: 'DefaultController'}).
when('/resources', {templateUrl: 'views/resources.html', controller: 'DefaultController'}).
when('/terms', {templateUrl: 'views/terms.html', controller: 'DefaultController'}).
when('/css/origami', {templateUrl: 'views/css/origami.html', controller: 'DefaultController'}).
otherwise({
redirectTo: '/404'
});
$locationProvider.html5Mode(true);
}]);
/* Controllers */
app.controller('DefaultController', function($scope) {});
#zeroflagL suggestion got me over my first hurdle. I had some code that was specifically firing on hashbang URLs. I had failed to update that IF condition.
Now, clicking on all the links worked fine but entering a URL directly resulted in a 404 error. Had I been running this site on IIS or Apache I could have rectified the solution by implementing a URL rewrite (and this would be the ideal way to deal with this).
But alas, I am running this on GitHub pages. They currently (as of 11/25/2014) do not support setting up your own URL rewrite configuration.
They do however, let you setup a custom 404 page. I setup a simple 404.html page in the root of my GitHub pages site. This 404 page, inserts the hash AngularJS needs behind the scenes into the URL and then calls a redirect to it. As we are using a window.location.replace, the 404.html page doesn't show up in the browser history.
<html lang="en" data-ng-app="eatsleepcode">
<head>
<title><eat-sleep-code /></title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
var url = window.location.protocol + '//' + window.location.host + '/#' + window.location.pathname;
window.location.replace(url);
</script>
</body>
</html>
In the event the page doesn't really exist... ie: http://eat-sleep-code.com/somecrazyurl Angular routing takes over and loads my 404 view. Perhaps not the most elegant solution but it appears to have worked in a situation where URL rewriting is not an option.
The problem is in your render.min.js script. When you click on a link then the URL of the current window is changed:
window.top.location.href=e
Without that it works fine.
I want to display two pages, but use a base layout. I have it somewhat working with the following:
index.html
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div data-ng-view class="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="public/app.js"></script>
</body>
</html>
main.html
<div>
<h2> Hello! This is Main page </h2>
</div>
list.html
<div>
<h2> This is List page </h2>
</div>
app.js
var myApp = angular.module('myApp', []);
// Routing Setup
function myAppRouteConfig($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
otherwise({
redirectTo: '/'
});
}
myApp.config(myAppRouteConfig);
This somewhat works when I visit index.html and list.html, but two problems:
When I load index.html, bootstrap loads fine. But when I visit list.html, bootstrap doesn't load. In fact, looking at the html source in firebug, all the code from index.html isn't loaded. The container is missing, the script and css links are missing.
How do I load an actual index page? I have my main.html that I want to load when a user visits the root page, but index.html is the base layout that contains code that persists through all other views (ie, like header and footer etc). If I modify my app.js and set the templateUrl: 'main.html', it seems to still load index.html. Is AngularJS implicitly looking for index.html as the base template?
EDIT:
File structure:
-- server.js
-- public/
|-- index.html
|-- list.html
|-- main.html
|-- js
|-- app.js
Change your route to:
$routeProvider.
when('/', {
templateUrl: 'main.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
//if you need to use login page, add 1 more route
when('/login', {
templateUrl: 'login.html'
})
otherwise({
redirectTo: '/'
});
and put your index.html at the root directory (or any sub directory) of your web app, configure it as the default document.
Is AngularJS implicitly looking for index.html as the base template?
There is nothing related to angular here, this is the normal behavior of loading an html page from a web server.
Here is how it works:
When users access your application at the root url (e.x: http://example.com) or any sub directory (http://example.com/public), the index.html is loaded into browser like with normal web applications, then your app.js is run as normal. When the routes are registered and the application is bootstrapped, angular checks the route and loads main.html to be inserted into the container where ng-view is declared.
After digging around, it turns out my AngularJS route requires ngRoute, which is its own module now. After including it, it started to display the correct pages.