A beginner's guide to learn Angular

13.02.2017

Like every other developer, I was confused when I started with angular, I had heard about a JavaScript framework, best suited for web development and it follows the MVC architecture. But how to use it and where does it fit in real time apps?



Personally, I had already worked on MVC in .NET, so this really helped me to easily understand how Angular would work. Also, having worked with JQuery before gives you a great advantage to understand Angular. Although it's not required, this will help you because of the exposure to DOM operations and JavaScript.
 

A little Bit of History

 
So before starting with angular let’s see how web development grew each year. It all started with the internet, when HTML pages were introduced, but HTML pages were good for static web pages, where we wanted to share some information.
To make web pages more interactive server side technologies were introduced, like asp.net, java. Server side technologies had their own controls, which take their own time to render data on UI. All these controls get rendered to HTML in the end.
HTML was still best option to render the data and display them on UI. Microsoft came very close by introducing MVC in framework 3.5, we can easily use HTML, and do all DOM operations in jQuery.
 

Before Angular


Before angular came into existence, JQuery was widely used because you can easily make AJAX calls, which was provided in the JQuery library, but binding data and updating the same in real-time was still missing. Ember and Knockout were introduced, to achieve that. We came close to get a MVC framework in JavaScript, but it was not full-fledged, multiple libraries gave few functionalities.
 

MVC(Model View Controller)

 
Model–view–controller (MVC) is a software design pattern for implementing user interfaces on computers. It divides a given software application into three interconnected parts, to separate internal representations of information from the ways that information is presented to or accepted from the user.


 

Components

 
  1. Model:  The model is the central component of the pattern. It expresses the application's behavior in terms of the problem domain, independent of the user interface. It directly manages the data, logic and rules of the application.
     
  2. View: A view can be any output representation of information, such as a chart or a diagram. Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.
     
  3. Controller: The third part, the controller, accepts input and converts it to commands for the model or view.
     

Why Angular

Angular is a full-fledged MVC framework, which was missing for decades in JavaScript. But we already had it in server side technologies like .net and java.

To create a full-fledged application in angular we need to learn the things listed below:
  1. JavaScript
  2. HTML
  3. CSS/Bootstrap
  4. Any server side technology (.net/java/node)
 
 
Below are the advantages you will have when choosing Angular as your framework for web development.
  1. You don’t need to learn any new technology.
  2. JavaScript is the easiest language to learn.
  3. It works easily with JSON.
  4. And most importantly it follows MVC.
 

Core Features:


Let’s have a look at a few features that are offered by angular.
  1. Two Way Data Binding: Angular directive creates a direct link between View and model. It´s probably the coolest feature we have, and the most important feature.
     
  2. Routing: It helps in navigating to different pages, without reloading the whole application. No need to worry about post backs, cool isn’t it.
     
  3. Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test. No need to learn any DI tools.
     
  4. Services: AngularJS comes with several built-in services for example $http: to make XMLHttpRequests. These are singleton objects which are instantiated only once in the app.
     
  5. Templates: These are the rendered view with information from the controller and model. They can be a single file (like index.html) or multiple views in one page using "partials"
     

Tools for development


You don’t need any specific tools for angular development. You can use Visual Studio/Visual Studio code/Eclipse/ or even notepad is sufficient.

Getting Started

 
Let’s create a small application in angular to create a TO-DO List app.


1) Let’s first setup our folder structure, create a new folder as To-Do App and move inside that folder. Create a new folder called app, within this folder.

2) We will have a app.js file within this folder where we will define our module. Defining our module is very easy in angular.



3) Now add 3 more folders which we will be using in future. Name them “directive”, “service” and “views”.

4) Now we need a page where we will display the data, we will not use the “views” folder as of now, we will cover it once we start with routing.

5) Create a page “Index.html” inside the To-Do App folder. First, we will learn about binding and expression in angular.

6) To use angular, we need to include angular.js file, you can install it via npm/bower or use it from CDN. For development always use an uncompressed version.

7) So now add the code below to our Index.html



8) Now open the index.html file, you will get the output as true, {{}} this is known as expressions in angular, whatever you write inside this will be evaluated as runtime.#

9) ng-app uses this to auto-bootstrap your application, this is used with the root element of our application, we can either use it with html or body tag.

10) Clear now how to start our angular app, and how to check if it is loaded, now let’s modify our page and add some controls.

11) We will be using bootstrap to design our page, for this we will use CDN. Replace your Index.html code with the code below.



12) Now open this page in any browser and enter the text in textbox, we will get the same output below. This is achieved using ng-model.

13) ng-model: The ngModel directive binds an input, select and  text area (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

14) Now let’s add a button, when we will click on this button a task will be added to our list.

15) Now to modify your html add the code below, we have added a button to add a task, and div where we will display the data.





16) We need to define our module now, as without a module this will not work, navigate to the app folder and add an app.js file, and the code below.


17) You´ll notice we are using the module name todoApp, in our HTML with the ng-app directive.

18) We will be using controller to display the data. So, navigate to the directive folder and add a todo-controller.js file. There are multiple ways to bind data, we will be using one where we will not use $scope.

19) Let’s add the code below, you´ll notice it’s a simple code where we are defining an array and adding data to it. 



20) We have everything ready now, let’s open the browser again, and enter some data in the textbox and click on the add button.

21) We will get the data appended in the list below. Now let’s look at some important directives from this code.

22) ng-Click: The ngClick directive allows you to specify custom behavior when an element is clicked. As in this case we are attaching the function addTask to it.

23) ng-controller: The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern. This is the most important directive, we should use include all contents within the ng-controller.

24) ng-repeat notice this directive, we have used it to display the data, this is like our foreach loop. In our case our entity has only one property, but it can be multiple properties in real-time applications. Use it with div or tables, where we can bind repeated list.
 

CONCLUSION


In this blog, we covered what is MVC and how angular helps you achieve the same. We covered some important directive and how to use them in our application and how we should maintain our folder structure. We were using angular and bootstrap from CDN, which you can download and use locally as well.

By using an angular controller, we are separating the logic from UI. And services can be used to have all functionality and calling API’s.

Angular is the easiest framework available as we just covered in this blog. We don’t need to learn anything new. Angular provides the common things in form of directives, and it works with JavaScript.

Integrating with any server side technology is very easy, we just need to expose them as API and consume them using $http service.
 
You can mail me on santosh.yadav198613@gmail.com, in case you have any suggestion and improvement areas.
 

---
References:
You can learn more about angular by visiting below resources:
https://docs.angularjs.org/api
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
Pic: ©negative space
Create your freelance profile and land new projects without any fees!

 Sign up now

More articles

  • Alternative Financing Methods – Invoice Factoring Pros and Cons

    Freelancers, especially at the beginning of their career, are very reliant on cash flow – how much money comes in and how quickly it does so. This is a factor that will make or break businesses. One of the ways freelancers can speed up their cash flow is invoice factoring.
  • Writing an Invoice for Freelancers – Tips, Tricks & Templates

    What would a freelancer do without invoices? Absolutely nothing! Learning how to write a special invoice is a crucial skill for any freelancer. Not receiving the correct amount of payment or not receiving it on time is a problem many freelancers face. A good invoice is often the key to solving these problems.
  • 4 Templates every Freelancer should have

    Bureaucracy is something few beginners consider when going into freelancing. However, handling different kinds of documents is a significant part of the job description, so you better be prepared. It might seem intimidating at first, but with the right system you can save yourself a lot of time.

Comments

  • No comments available

Comment this article