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 in 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 it already pointing to the directory path of your application, write 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 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 insterested 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 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 is 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 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
  • 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 and after that 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. But I coupl be wrong about that. Either way, to install Gulp type and to install it as an NPM dependency type 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 depencies 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 straight forward. 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 like 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. Your 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 Once that is finished. manually add a server.js file in your directory root. Make sure it is in your first level of your root. do not put it inside any folder. Now you have some code to add in here. But we are not done yet. 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 . Now all you have to do to run your sserver 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 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 begginers will stop by as well so I had to break it down. But here is the angular part you probably are lookign 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 becasue 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 Now that you have this installed make sure reference it in your application <head> and let’s go to our app.js and build our routing configuration as follows Make sure your template paths are correct or course and your app module name matches 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 <head> . 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.

2 Responses to “Removing The Hashtag in Angular”

  1. Jonas White

    Outstanding walktrough of Angular hashtag removal and implementation of routes altogether. I do believe this is probably the only place online where this is all compiled into one tutorial. Many times you'd have to piece it together. Well done! I'll bookmark your blog and I look forward to more.

Leave a Reply