Use AngularJS Routing to build a simple single-page application
--
Hello pals..! If you are a person who is interested in web development and especially you are a beginner, this article will suit you 2000%. Throughout this article, I will teach you what is AngularJS, what is AngularJS routing, what is a single-page application, and how we build a simple application by using them. First of all, I will tell you what is AngularJS.
AngularJS is a leading framework that is used to develop the front end of dynamic webpages. It’s a javascript framework and developed by Google. AngularJS helps you to extend HTML syntax to express your application components clearly by using HTML as your template language. Using AngularJS’s data binding and dependency injection you can reduce much of the code that you would otherwise have to write.
Then let’s see what is the AngularJS routing. Think…You want to navigate to different pages in your application. But you want that, with no page reloading. In a situation like that, you can use the ngRoute module to do so. Then the ngRoute module routes your application to different pages without reloading the entire application. That’s the concept we are talking about as routing.
It’s better to find out what does mean by single page application, before going for coding. single page application means that the application will not be reloaded. It navigates to different pages without reloading by using the ngRoute module.
Guyzzz...Then let’s coding... All you want is a simple code editor(use notepad, if you are brave😜), little knowledge about HTML and CSS, internet connection(since we’re using a CDN to provide Angular functionalities), and a cup of coffee(don’t forget that😎). This is what we are going to build.
First of all, you need to include AngularJS script CDN in the script tag to provide Angular functionalities inside the HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>After that to make your application ready for routing you need to include the angular-route script after the main angular script.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>Then we need to create an HTML layout for our application. As well as we can use an external CSS file to make the web page more attractive. But here I am not going to explain HTML or CSS since we are focusing on AngularJS routing.
Once an HTML layout for the application is created, we should put the ng-view directive in a div tag to specify the place where the HTML of each page will be placed in our layout. And we have included the ng-app directive inside the body tag. This directive initializes the Angular code signifying that the functionalities will be inside the body tag.
I will show you how I have used CSS for this application. I think it’s better to follow this w3c tutorial if you have any difficulties with the CSS code.
Let’s go to the most crucial part of this article. After all of this, you need to create an application module and add ngRoute as a dependency. It is important to use the same module name that we used in the ng-app directive inside the body tag.
var app = angular.module("myApp", ["ngRoute"]);Since your application has access to the routing module, you can use the $routeProvider to configure different routes in your application. It is necessary to specify a templateUrl and a controller for each route that we wish to add. You can use the otherwise method also. It is the default route when none of the others get a match.
Now you can build controllers for every route specified in $routeProvider.
okay….Now we have done almost all the parts in our application. You are about to get the final output. But before that, we need to create templates that we specified in $routeProvider. You can create them just by adding expressions and simple HTML elements. Those templates are like this.
main.htm
Login.htm
Register.htm
Soooo...That’s it...Now you can see the output of our application. And I highly recommend doing some improvement to understand the concept well. I will give you the complete code. Practice…! Practice…!Practice…!
Download the entire code ….
https://github.com/kusham/single-page-application
Nowadays, single-page applications are very popular. Applications like Gmail, Netflix are also made by using AngularJS. If you are developing a single-page application AngularJS is the obvious choice.
Stay tuned to our upcoming tutorial to explore your Knowledge…! Thank You!
