Angular 1 – Routing, Modules, Controllers & Directives

Posted on Posted in Angular

In this tutorial we are going to cover the basics of how an Angular program actually works, going in to a bit more depth about each of the individual components that make up an Angular application. This will give you an overview of the main components so you are familiar with the terms as we go on, however we will cover these topics in much more details as we continue.


Angular applications are designed to be Single Page Applications, which essentially means that once you intially load the page you shouldn’t have to leave it to move to another part of the application. This makes a much better browsing experience. Users do not like waiting for things to load, and traditionally on websites if you click a link that will load a new page which requires scripts to be reloaded and styles to be reloaded, and while browser cache files, it is much better to simply load the styles and scripts once and then load other pages in the background and simply switch out content on the page when a link is clicked.

Angular has a way of handling this known as routing. Angular’s routing module is fairly comprehensive and allows you to set a URL for each page, even though no actual page is being navigated to. Due to this, this also allows the use of the back, forward and refresh keys to work as you would expect them to. We will cover this is more detail in the next tutorial when we cover the code for all this, rather than the theory.


A module is a way to separate different parts of your application, and also a way to group some things together. While this may not make a whole lot of sense at this point, they are useful especially when it comes to giving them access to other parts of the application specifically useful to them through dependency injection (this is a very important part of Angular that we will cover in depth soon).


Controllers are essentially a piece of code often tied to a page in your application, that contains the basic data for that piece of HTML code. They should not try to do too much and should not contain much logic. A vague example at this point in time would be if you had a textbox on the page, the contents of that textbox may be stored in a variable in the controller. Again, all this will be covered in much more detail as we go on.


Directives are primarily a way to make reuseable components to be used within your application. An example of this may could be a textbox that provides suggestions as you type. You would not want to have to recreate this complex control each time it is used in your application, instead you make a generic component and using a directive can easily use it throughout you application over and over again. They are one of the key building blocks of an Angular application and what really makes Angular great.

In the next tutorial we will look into how to actually begin coding some of the things we mentioned above.

Leave a Reply

Your email address will not be published. Required fields are marked *