Removing The Hashtag In Angular

Removing The Hashtag In Angular

By: Luis Silva, January 17th, 2020

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 in the AngularJS API Docs 

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.
    • Dependencies 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. 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 you 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 the 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) {
        res.sendFile(
           'index.html',
           { root: __dirname }
        );
    });
    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 to 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) {
          $stateProvider.state(
              'index',
              {url: '/',templateUrl: 'views/partials/home.html'}
          ).state(
              'listings',
              {url: '/listings',templateUrl: 'views/partials/listings-list.html'}
          );
       $urlRouterProvider.otherwise('/');
       $locationProvider.html5Mode(true);
    }
]);`

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 `

`

`

`

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.