Post
Ask Question

A First Step With AngularJS

Before beginning with Angular JS, the following two basic questions may arise in your mind:

  1. What is Angular JS?
     
  2. Why Anugular JS?  

Let's discuss first what AngularJS is.

What is AngularJS?

AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable and maintainable front-end applications, in other words we can say that AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications (here is a very good article that may clear up doubts related to the SPA and the Single Page Myth). Its goal is to augment browser-based applications with Model–View–Controller capability, in an effort to make both development and testing easier.

You can also refer to Angular JS Introduction for more clarifications.

Why Angular JS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web applications. AngularJS lets you extend your HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable and quick to develop, if you not used Angular JS yet then you have really missed out.

So the question is, are there already many other JavaScript frameworks available that makes a difference in Angular JS. Actually other frameworks deal with HTML's shortcomings by abstracting away HTML, CSS and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Why I like this framework the most is its extensibility feature that makes it fully extensible and that works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

There are many other features that provide you a different experience of development that you may not have experienced before.

Getting Started

While I was learning the Angular I went through many articles. Each article has a different scope, since it's quite a new framework. I was actually looking for an article that can help me to start with Angular in the easiest manner possible. Based on my experience I have tried to keep this article as small as possible and at the same time trying to provide a beginner's kickstart with Angular.

So without making the process complex let's start with a very basic example of Angular and try to understand the elements that exist on a page. Please look over the following example.

  1. <!doctype html>  
  2.    <html ng-app>  
  3.       <head>  
  4.          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>  
  5.       </head>  
  6.       <body>  
  7.       <div>  
  8.           <label>Name:</label>  
  9.           <input type="text" ng-model="yourName" placeholder="Enter a name here">  
  10.           <hr>  
  11.           <h1>Hello {{yourName}}!</h1>  
  12.       </div>  
  13.       </body>  
  14. </html>  
Ahhh; what is this? Too many new things in just a normal HTML page, how I can understand all these things, it looks a bits complex. Wait, let;s extract all the odd things from this example and discuss them. 
  1. <html ng-app>  
Ng-App 

Tells AngularJS to be active in this portion of the page. In this case the entire document.

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>  
Loads Angular JS, you can download it from the Angular site as well https://angularjs.org/
  1. <input type="text" ng-model="yourName" placeholder="Enter a name here">  
Ng-model 

This links the form and the model. This means that any changes to the control update the data in your model and when you change the model it updates the control.

This is another feature of Angular that also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. In simple terms, this means that any update on your model will be immediately reflected in your view without the need for any DOM manipulation or event handling (for example, with jQuery).

  1. <h1>Hello {{yourName}}!</h1>  
The {{ }} are a declarative way of specifying data binding locations in the HTML. AngularJS will automatically update this text whenever the yourName property changes.

I hope until now you are with me. Let us create another example, where we need to draw a rectangle as per input from the user and set some background color as well.
  1. <!doctype html>  
  2.    <html ng-app>  
  3.    <head>  
  4.       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>  
  5.    </head>  
  6.    <body>  
  7.       <input type=”number” ng-model=”height”>  
  8.       <input type=”number” ng-model=”width”>  
  9.       <input type=”color” ng-model=”color”>  
  10.       <div style="height:{{height}}px;width:{{width}}px;border:1px solid;background-color:{{color}};">
             {{height}} {{width}}</div>  
  11.    </body>  
  12. </html>  
So we can see here that we can set the attribute values with the Angular models.

MVC in the Context of Angular Application

Perhaps you have heard that Angular is MVVM, that's true. But It's also true to say that Angular supports the MVC style of application design. And here, we will talk about MVC in the context of Angular applications. Much of the time when you're building applications you will need: 
  • A Model to represent the current state of your application
  • A View to display the data
  • A Controller that controls the relation between Models and Views.

Okay, let's cover these three components in Angular, one by one.

Model

A Model in Angular can be a primitive type, such as a string, number, boolean or a complex type such as an object. There's no special class, no special getter or setter method, in short a Model is just a plain JavaScript object. This has an advantage if you're familiar with JavaScript, because I'm sure you're also familiar with this type of model.

View

A View is what the users see, in Angular the view is the Document Object Model (DOM), as a web developer, this fact will make it easier to understand Angular Views. To display the data from the Controller, you can put an Angular expression in your view. This expression binds the data from the Model inside your Controller. Since Angular is a two-way data binding the View will update automatically if there's a Model that provides changes from your Controller. You don't need to write additional code manually to do this.

Controller

Speaking of the concept of a Controller under the MVC pattern, a Controller is the place where we put our application logic. In Angular, a Controller is simply formed by JavaScript classes. In this controller we can also call other components to work with. And the most important to explain is, in this controller your model lives.

I have just covered what a Model, View and Controller are in Angular. Now, how do we actually create those in our code? Don't worry; I will do that now. But since we will define our model inside the Controller, I will create our Controller first.

Controller Creation

It's quite easy to create a controller or understand the code of a Controller, if I say it just looks like a JavaScript method then it might be easy to understand.

  1. function TestCtrl($scope)  
  2.  {  
  3.      // Controller code here  
  4.  }  
I just created my first controller. Okay, but wait a minute, what is that single argument with a dollar sign? It's called a scope. Each controller has its own scope. Scope is like glue between the Controller and the View, you need scope whenever you create a controller. This will be easier to grasp when we're creating the Model.

Model Creation

A Model is just a plain JavaScript object, it lives within the controller. But this doesn't mean that you can create a Model the exact same way you create a JavaScript variable. To make a Model available in the view, we need a scope ($scope) as explained previously. Consider the following example. For now I am using this basic example, you can create another kind of variable as well. 
  1. function TestCtrl($scope)  
  2.  {  
  3.      //model called greeting which contain string  
  4.      $scope.greeting ="Hello, Angular is awesome";  
  5.  }  
Putting it together into a View

Now that we have our controller set up and the models defined, we want to display the data to the user. To do that we will create a view. Since a View is the Document Object Model we write the view as if we were writing plain HTML with the addition of expressions. Consider the following:
  1. <!doctype html>  
  2.    <html ng-app>  
  3.    <head>  
  4.       <title> Understanding MVC in context of Angular </title>  
  5.    </head>  
  6.    <body>  
  7.       <div ng-controller="TestCtrl">  
  8.          <h1>{{greeting}}</h1>  
  9.       </div>  
  10.       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"> </script>
  11.       <script type="text/javascript">
  12.       function TestCtrl($scope)  
  13.       {  
  14.          //model called greeting which contain string  
  15.          $scope.greeting ="Hello, Angular is awesome";  
  16.       }  
  17.       </script>  
  18.    </body>  
  19. </html>  
There are a few things you need to note in the previous example :
  1. A "ng-app" directive is always required for Angular to initialize your application automatically.
     
  2. Using a ng-controller directive we ask Angular to use the TestCtrl controller, like this <div ng-controller=”TestCtrl”></div>
     
  3. To display data from our Model in Controller, for example {{greeting}}, this is telling Angular to display the Model called greeting from the corresponding Controller. Remember, when defining our Model greeting we use $scope.greeting and now when we want to display its value from the View, we don't need to write it like this {{$scope.greeting}}, this won't work.

Conclusion

At this point in the article, I've covered whatever you'd need to write a simple program. Finally, keep in mind that Angular is a very powerful framework and we’ve barely scratched the surface in terms of everything it offers.

 Next article will bring you more close to angular A First Step with AngularJS -Part 2


Similar Articles