-
Notifications
You must be signed in to change notification settings - Fork 1
18 Pretty URLs
The app is working pretty well now, but I'm not fond of the URL scheme.
Getting to our app via http://localhost:8000/app/ is kind of foul. Let's update our configuration to serve the app from http://localhost:8000_.
Look at package.json.
package.json
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1",That start script is what we're interested in. All we need to do is add app after http-server, and it will serve the contents of the app directory, instead of our main project directory.
package.json
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server app -a localhost -p 8000 -c-1",Restart your web server and visit http://localhost:8000.
Much better!
To reach each page of the app, we have to browse to http://localhost:8000/#/login or http://localhost:8000/#/notes. AngularJS is taking advantage of the fact that browsers will treat those as the same page, because of the # character, which generally indicates a section of the page to scroll to.
In browsers with HTML5 support, AngularJS no longer has to depend entirely on this hack. Instead, we can use the HTML5 History API
We'll use the $locationProvider module to turn on html5mode.
app.js
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.otherwise({redirectTo: '/login'});
$locationProvider.html5Mode(true);
}]);For this to work, we need to set a base path in index.html.
index.html
<head>
<meta charset="utf-8">
<base href="/">Now try out your app. Don't those URLs look much better?
There's always more we could do to make this app even more awesome, but this is a pretty good first AngularJS app.
Code on, friends!