Learn Angular JS in a simplest way Part-1

JavaScript in a time was a programming language for the frontend designing or client side development. But as the web application is growing bigger and bigger we need all the complexity in simpler version. Angular JS allows us to toss up all the messy code of client side and make it a Simple, Elegant & MVC style single page application.

Now first of all we’re going to discuss about the below things.

  1.    What is Angular JS?
  2.    Why Should We Use It?
  3.    How Should We Use It?

So what is Angular JS?

In this question the simplest way to tell you that this is a javascript library. But it’s so much more than that. It’ll probably good to categorize it as MV* framework. Didn’t understand that? Don’t worry lets just see the picture below.

We can compare now with some other MV* framework like “knockout or backbone”. We’ll discuss here the difference, also what is the main key that makes this framework apart from the crowd. Angular is not just a MV* framework opiniant MV* framework. Like with js we need the DOM all the time. But in Angular we’ll be needing DOM only in directives where you can also use other JS libraries, jQuery etc. Ok now don’t be in so much rush. We’re going to know about MV* framework for sure. I think this is the time we should know about it.

MV* Framework

MV* Framework

Now in MV* Framework there are M for Model where you’ll store your data & state of your application. V stands for View in where you want to put all the data for your clients to see. Actually the client side/front side content will be here. In a way we can describe this “*” as a Controller or a Presenter or ViewModel. Now you might be asking yourself which one actually Angular use? Then relax Angular uses the Controller. So in a manner you can call Angular JS a MVC Framework.  You might want to know if it is a MVC then why am I telling MV*? Actually we can say that many JavaScript library uses those things but not necessarily only controller. And In Angular it basically uses Controller but also it can be either a Presenter or a ViewModel. So all of the above we can call it a MV* Framework.

Now why should we use it?

In this question we can say that it’s an open source library build by a skilled team of Google. All the source are maintained by those developers. So in any case you don’t need to worry about it’s stagnate & bugs. There are & will be some excellent developer team to support you all the time. In fact you can have some respect by contributing Angular libraries as it’s open source. Now as far as I know there are over 200 unique Angular JS contributors to its Angular JS Github repository. There are 43 public repo’s of Angular contributors. You can see them by visiting Angular JS Github Contributors page.

Angular is also Comprehensive. Now you might be thinking about how it’s comprehensive? Just see the picture below.

Angular Features (Comprehensive)

Angular Features (Comprehensive)

Angular communicate via AJAX request with your server so that you can both send & receive data at your application. These data save in the model as a plain JavaScript objects so you won’t have to make any special calls like GET & SET to update your data or to bring the data to client side. Angular handles showing the data on the page which you can use showing via partial templates or modifying the HTML DOM that already exists. Angular also handles updating the data at very fast speed. When user will write something on text field it will automatically be copied into the model & show the text to a user, you don’t have to wait for certain events or something. You’ll say to Angular that it’s a text data & Angular will keep it synced at it’s model. This is called the “Two-Way-Binding”. Now lastly the core thing is Routing.

Angular JS Features (Routing)

Angular JS Features (Routing)

Angular handles visiting page through Routing. This is the key piece in building a single page application. This way you can completely use the view based on your user interface. Angular will also update the url so that the new page can be bookmarked for sync later. The one thing basically all the MV* frameworks do is extend the html vocabulary.

Wow now you might be thinking where did that came from? Basically Angular actually teaches HTML elements some tricks to do much better in web application. This is called the Directives. We’ll be discussing about directives in my other article. For now Angular thinks HTML as a great thing to manipulate & view the user according to your wish. Let’s see the picture below.

Extended HTML Vocabulary

Extended HTML Vocabulary

Here we can see some html input boxes. But in the first box see there is a custom attributes called focus. Think again if we want to tell html to show the input field with some focus we can do this by writing some scripts which will take focus keyword & shows some blur thing or something in client side. But HTML5 already did that. So HTML5 is also thinking something like that. Now if we think about the second text box you can see that there’s a text box which is not defined. Let us think it broadly. If you think about some dashboard thing or display widget. This will actually displays some data in a specific manner. I just have to insert some user object within this user property in my custom tag. This can be done by Angular JS. Angular will take this user tag & then convert it into a HTML so that browser can render. There’s the power comes within Angular.

Now How to use Angular JS?

We’ll be discussing about the usage of Angular in next article. But if you’re really so much interested than you can visit to Angular JS Repo or view the docs of Angular.

That’s it for today. Stay tuned for some more interesting articles on Angular JS. Hope you’ll like the article and also made you understand about Angular. Stay with me I’ll let you fall in love with this beautiful framework.

Learn Angular JS in a simplest way Part-1

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]

2 comments on “Learn Angular JS in a simplest way Part-1

Leave a Reply

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