Getting started with AngularJS

You may hear about AngularJS but you still have no idea with it. In this post I will show you what is it and why you should know it.

What is AngularJS?

AngularJS is a two-way binding javascript framework. So what is two-way binding, you can try your self by example below (Result tab):

Why you should use AngularJS?

Is it cool? For me it's really cool. It very useful when working on client side. You can remember that you had to use a lot of code JQuery or pure JavaScript to append a new item for a list async. Now with AngularJS , it's too simply.

And there are a lot of useful stuff that I will show you on later post.

How to use

Firstly, you need to add AngularJS library to your html page.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Next, you need to add ng-app attribute to your html to tell your app that you are using AngularJS:

<div ng-app="">  
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>  

OK. We've just finished the first concept of AngularJS. Now we will move to some important concepts of it.

1. Module

The first thing we need to know is Module. It is the highest level of an Angular app.

var app = angular.module('MyApp', []);

The code above is to create module. The module has name MyApp that has to be unique within the application. Modules can be used within other modules. As you can see the empty array in the line of code above, this is where we put the dependencies which need for this module.

In this post, to keep simple we leave this as a empty array.

To initialize a module to the view we need to add to the html code like this:

<body ng-app="MyApp">

OK. Great! you've just finished setting up an Angular app. But this is not enough, we need a controller to manage state and behavior for this view.

2. Controller

Create controller by app variable we created above.

var app = angular.module('MyApp', []);  
 app.controller('MyController', function(){

});

To get data from the controller to the view we need to use a component that links the controller. This called scope.

var app = angular.module('MyApp', []);  
 app.controller('MyController', function($scope) {

 });

Now, we can add data to scope that we want to show on the view.

var app = angular.module('MyApp', []);  
 app.controller('MyController', function($scope) {
   $scope.message = 'You are awesome!';
});

We add the message to $scope and we'll get it on the view. This is called data binding.

Next, we have to tell the view about the controller that we've just created.

<body ng-app="MyApp">  
   <div ng-controller="MyController">

   </div>  
</body>  

And then, you will bind the data to the page.

<body ng-app="MyApp">  
   <div ng-controller="MyController">
      <h1>{{message}}</h1>
   </div>  
</body>  

Here is the result.

Conclusion

Well done! Now you can understand what is Angular and how to use it in basic. Angular is powerful and exciting. It will not waste your time when you discover Angular. In the next post, I will help you prepare a convenience environment to learn Angular.

Nguyen Tran

I'm Nguyen, a full stack web passion for frontend and love Angular.

Subscribe to Nguyen Tran

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!