Removing The Hashtag In Angular

Luis Silva by Luis Silva2016-11-08 00:00:00
Removing The Hashtag In Angular

Angular is a Single Page Application framework designed to generate views inside your index page to eliminate refreshing the page and reloading every component every time you navigate from page to page. Instead, the index page loads all main components, and the pages get injected into the body. This generates a hashtag in the URL which makes it less than appealing. Before you follow this tutorial on how to remove this hashtag make sure you understand AngularJS and its routing module. AngularJS documentation can be found here.

The Tools

First of all, we need to know what tools we need to have in place.

  • CMD - You will need to have at least 2 Command Prompt screens open and minified in the tray. Make sure your CMD is open with administrator permission and it is routed to the application folder.
    • Server CMD - This CMD window runs your server.
    • Depedencies Install CMD - You will need this CMD window to install any dependencies through npm, bower, or gulp, git to your repo, and communicate with your application.
    • Gulp CMD - This CMD window runs your Gulp for your SASS compiling, BrowserSync, any other Gulp task etc. (Optional).
    • MongoDB CMD - This CMD window runs your Mongo Database connection. (Optional, but if you are running a MEAN stack, you will need this window opened).
  • IDE - Any IDE of your preference is fine. I prefer WebStorm, but it is entirely up to you.

The Foundation

If you are reading this tutorial, I am assuming you have installed some or most of these. If you did, you can skip this part.

  • NodeJS - You must install NodeJS locally in your application folder or globally. You can find NodeJS here. Simply download the binaries/installer you need (Windows, Mac, Linux, etc), and follow the steps until it is installed. After you've done that, go to your CMD and assuming that is already pointing to the directory path of your application, write
    node -v
    and you should get the version of node you installed.
  • NPM - Now that NodeJS is installed, you need to install npm. In your CMD window, type
    npm init
    This allows you to create a package.json file where all your dependencies will be stored. You can simply hit enter through all the questions if you are not interested in documenting the author's name or application's name etc. It really doesn't matter. Once you visually inspect the presence of a package.json file in your root type
    npm install -g
    Once this is finished, NPM is installed and you should have now a node_modules folder in your application root. For extra security, if you check your npm -v, you should get a version response just like you did with node but the presence of the node_modules folder and the package.json file are proof enough... I think.
  • Proxy Clearing - I have found that the most common problem reporting install failures are that many computer systems are working behind a proxy. Clearing your proxy or declaring one is the fix to this. If you are working from home and you need to clear the proxy, type this in your CMD
    npm config set proxy null
    npm config set https-proxy null
    Conversely, replace null with the URL or IP address of your proxy if you are behind a proxy. Your network manager will provide this for you.
  • Git - You need Git so that you can install Bower. But also, if you are going to pull/push to a repository of your own. Go to Git and download/install. After it is all done you need to initialize it in your application by typing in your CMD
    git init
  • Bower - Do you need bower? Not necessarily, but it is always good to have since some dependencies live in bower. So to install it, first create your bower.json just like you did with NPM type
    bower init
    and after that
    npm install -g bower
    You can now inspect that you have a bower_components folder in your application and a bower.json file as well.
  • Gulp - Entirely optional but extremely helpful if you want some really cool tools like BrowerSync or SASS compiling, etc. Also, it doesn't hurt to download it because if I understand it correctly, you will need it to make this entire tutorial work at the end when Express is running. To install Gulp type
    npm install -g gulp
    and to install it as an NPM dependency type
    npm install --save-dev gulp
    Once that is done, go to your application and manually add a gulpfile.js. In here you will add your gulp watches so that you can run Gulp. To save some useful Gulp dependencies like SASS compiling type these npm install gulp gulp-sass --save-dev, npm install --save-dev gulp-server-livereload and npm install --save-dev browser-sync. These will make them available to you so can set up your Gulp watches and builds.
  • Angular - I am not going to go too in-depth with this because it should be pretty straightforward. You go to your CMD and you install it through NPM or Bower and you do the same for all modules you need. DONE! The only thing I would say is, don't download Angular directly in JS folders, Use your package management tools (NPM/Bower). They are there for a reason and they check on many dependencies as you try to install other modules that may or may not work with the version of Angular you have installed.
  • Express - I swear, it's almost as if we have to download the internet just to get one thing working! Well, c'est la vie, so let's keep going. Now, it is time to install a server. By now you have AngularJS and NodeJS installed and you are about to have Express installed too. You are almost a MEAN stack monster! Except, you may not have MongoDB to complete the stack but you donít need it in this tutorial. To install express type this
    npm install express --save
    Once that is finished. manually add a server.js file in your directory root. Make sure it is on your first level of your root. Do not put it in any folder. Now you have some code to add in here.
    var express = require('express');
    var server = express();
    
    server.use(express.static(__dirname + '/'));
    server.set('views', __dirname + 'views');
    server.set('js', __dirname + 'js');
    server.set('css', __dirname + 'css');
    
    server.get('/', function(req, res){
    	res.render('index.ejs');
    });
    
    server.all('/*', function(req, res, next) {
    	// Just send the index.html for other files to support HTML5Mode
    	res.sendFile('index.html', { root: __dirname });
    });
    
    //the port you want to use
    var port = 3006;
    server.listen(port, function(){
    	console.log('server listening on port' + port)
    });
    
    But we are not done yet. The last thing you need is to install ejs or you will get errors. Not sure why, I just do it, so type this in your CMD
    npm install ejs --save
    Now all you have to do to run your server is simply type this in your CMD and that will start the server. This is the last time you use this particular CDM window. You will minimize it and start a new one for anything else you need to do
    node server.js
    Now if you go to localhost:3006 you will see your app is started.

Let's Angular!

Wow! It almost felt like we were never going to get here. I apologize, but I assure you, this is probably the most concise and complete tutorial you will ever find all in one place. And I have to consider some beginners will stop by as well so I had to break it down. But here is the angular part you probably are looking for:

You will still need the Express section above. Even if you skipped the Tools section, go back and read only the Express. This is extremely important because once you have removed the hashtag, as I am about to show you if you go to a page in your application and you refresh the page, you will get an error. Express will allow you to refresh your non-hashtag URL.
  • Angular Routing - Most people use ngRoute. That is ok, but I prefer angular-ui-router because it already contains all that it's in ngRoute and it still has more features. So let's use that in this tutorial. If you have a CMD with express running, make sure you open a new CMD window pointing to your application and type
    npm install --save angular-ui-router
    Now that you have this installed make sure reference it in your application and let's go to our app.jsapp.js and build our routing configuration as follows
    var app = angular.module('ngCribs', ['ui.router']);
    
    app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    	// Application routes
    	$stateProvider
    	.state('index', {
    		url: '/',
    		templateUrl: 'views/partials/home.html'
    	})
    	.state('listings', {
    		url: '/listings',
    		templateUrl: 'views/partials/listings-list.html'
    	});
    
    	// For unmatched routes
    	$urlRouterProvider.otherwise('/');
    
    	$locationProvider.html5Mode(true);
    
    }]);
    
    Make sure your template paths are correct or course and your app module name match your own, and if you have other modules, they are included in your own module configuration. So, basically, be careful copying and pasting this code as it will still need some custom work to your own application. Now we need to go back to our index page and specify our base. Add this to your .
    And now, for the finale! Go to your links throughout your site and swiftly, mercilessly, and with all the hate you can gather, delete all those # from your paths. After all this work you've done, they are your enemy!

Conclusion

This concludes the tutorial. I hope you found it instructional and keep visiting as I will start posting some more tutorials here eventually.

Luis Silva

@luis_silva
Luis

About the author

UI/UX Engineer with over 13 years of web design and development experience. In my spare time, I train in martial arts: Brazilian Jiu-Jitsu and Judo.