Learn Angular JS in simplest way part-2

In my last article we’ve learned actually what is Angular JS, how to use it etc. Today we’re going to jump into deeper of Angular JS. First of all we’re going to learn the architecture of Angular then we’ll be creating something our of it. Now let’s stop time wasting & learn about this beautiful & modern Javascript framework.

At the very beginning of this article we’re gonna first discuss about the “architecture” of Angular. First Angular supports “Two-way-binding”. This means in the form field will instantly updated through the Angular models that means in the most cases you don’t need to wait for some specific events to pull that data & then show it to the view of your client. Angular will automatically pull the data through model & update your field as easy as that. Secondly Angular has a special structure called “Dirty Checking”. That means you don’t have to put your data in a special structure & find it via getter or setter method instead you can simply put your model data into simple old javascript objects & Angular will handle that for you it’ll automatically respond whenever your data changes & the update the fields. Lastly Angular is build on “Dependency Injection”. This is for making your application secure & also better testability. We’re not gonna discuss about “Dependency Injection” in this article. If you’re more curious then you can learn about this in this article (http://en.wikipedia.org/Dependency_injection)

Angular Architecture

Angular Architecture

Now let’s talk about Angular Components. Firstly in Angular everything starts with a “Controller”. It’s the essential player in Angular framework. Controller contains both “logic & state”. Next there comes “Views”. Views are made of “bindings & directives”. This is how Angular talks to & listens to the user. Controllers can communicate with Views in two-way or one-way bindings. Lastly “Services”. This is the core component of Angular. It actually contains the real logic of your application. If you think of your application you might think where you should put the real logic of application. This is the part where you want to put the logic.

Angular Components

Angular Components

Now as you can see we’ve learned so much isn’t it. Nope actually not. There is more coming. It’s time for us to building a simple “hello world” program with Angular. Yeah it’s the time for coding. I think now you’re ready to learn something isn’t it. So here is it.

Before starting coding I want you to go to Angular JS site & download Angular minified version.

Angular JS Official Site

Angular JS Official Site (click on image to visit the site)

Now create a directory in your localhost by any name & then put the angular.min.js file in there. Then open up any of your favorite IDE/Text Editor you like. Open up the directory & in that directory create a file named index.html & then put the code below.


<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>

<!--include the angular minified version-->
<script src="assets/js/angular.min.js"></script>
<script type="text/javascript">

//this is the controller section
//$scope is special parameter by angular
//with this parameter angular will respond in view
function helloWorldCtrl($scope){
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>

Now that’s not a messy code isn’t it? Is it hard to understand the coding? Please follow the article I’m sure you’ll know about something interesting.

<html lang="en" ng-app>

In the above code snippet you can see that in the <html> tag I’ve putted “ng-app”. ng for Angular actually. Now what is ng-app? Angular actually listens to this special attributes. We’re gonna learn about these attributes in time but for now you can know that for letting Angular handling your application you need to put this attribute into your html tag. I’ve putted it in my <html> tag & it’s not defined that you must have to put that only in your <html> tag. You can also put this attribute wherever you need to give Angular permission to handle your data.

<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>

Secondly you can see that in the <h1> tag I’ve putted another attribute “ng-controller”. This is the main part. In here we’re gonna call the controller function to do all the things via Angular. This “{{ }}” is the placeholder used by Angular. Angular will read the “text or command” or actually properties of javascript objects inside the placeholder & render the view via the controller. Here is the magic of Angular comes. Now after that include the Angular minified version that you’ve downloaded from their official site. After including angular js it’s turn for write down our functions.


//this is the controller section
 //$scope is special parameter by angular
 //with this parameter angular will respond in view
 function helloWorldCtrl($scope){
 $scope.helloMessage = "Hello World";
 }

You can see that I’ve coded some script after including angular.min.js in here we’re gonna declare the controller for angular with special parameter “$scope”. This one is a special parameter used by Angular to do all the works. This is a javascript object & within that we’re gonna call our property which we’ve declared in the html part on h1 tag inside the curly braces or the placeholder. Now run the code & you’ll have the output like the below screen.

Hello World Application

Hello World Application

Hope you did enjoy the post & learned things about Angular JS. Stay tuned for more post coming soon. Don’t forget to comment as your comments are precious to me.

Learn Angular JS in simplest way part-2

An enthusiastic of work with over 2+ years of experience. Extensively experienced on wordpress, Codeigniter, Laravel.

##Visit my github page (https://github.com/ashawkat)
##Visit my blogging page where I spread out my knowledges around all other people (http://w3programmers.com/author/tanim)

If you want to hire me then you can contact me via email or skype.

Skype: ashawkat89
Email: [email protected]

One comment on “Learn Angular JS in simplest way part-2

Leave a Reply

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