Saturday, April 26, 2014

Learning AngularJS Part 1: Introduction to AngularJS

Here is Next Part of this series:

Recently I started learning AngularJs, It was very difficult for me to find some good detailed articles or beginner tutorials on AngularJS. I have to read from many different articles, books and tutorials. So I decided to put step by step help for beginners like me. So they get complete required help from one single channel. Since AngularJS is a very rich framework so I decided to write in a series of post. So beginners easily follow and track their performance.

Lets start with Introduction to AngularJs. There is no coding in this article we will only see what AngularJs is.

What Is AngularJS?

AngularJS is JavaScript MVC structured framework for dynamic web applications. It is created by Google to allow you to develop well architectures and easily maintainable web-applications. AngularJS allows you to extend HTML by adding your own custom tags and attributes. With angularJS you need to write lesser code as It allows you to reuse components. With very easy way of two-way bindings and dependency injection (we will see these in details coming articles) , you need to code less than you have to write before AngularJS. As AngularJs is client-sided so all these things happening in browsers.

HTML is designed for static sites, it is beautiful declarative language. But developing a dynamic site with HTML you need to do many tricks to achieve you want. With AngularJS extending the HTML it is really simple to make a dynamic site in a proper MVC structure. The directive is the terminology use for extending HTML, with these directives one can achieve:

  1. You can create a template and reuse it in application multiple times.
  2. Can bind data to any element in two ways, means changing data will automatically change element and changing element will change the data.
  3. You can directly call the code-behind code in your html.
  4. Easily validate forms and input fields before submitting it.
  5. You can control complete dom structure show/hide, changing everything with AngularJS properties.


AngularJS a complete Solution


AngularJS not only allow you to write your custom HTML. It allows you to completely control your DOM and easily managed your Ajax code which previously you need to manage your own. It has included many other features including:
  • All the features you need to build a CRUD application like data-binding,  data validation, url routing, reusable HTML components and most importantly dependency injection.
  • JavaScript Testing: AngularJS allows you to write basic flow end-to-end testing,  unit-testing, ui mocks.
  • Proper directory architectures of HTML code in MVC structure.

Until now we use term dependency-injection many times, some of you might not be aware of it. Dependency Injection is a software design pattern, allows you to inject any dependent module at run time means you can anytime change some feature or complete module of any dependent module with this pattern. AngularJs also follow the dependency-injection for example you can change the routing module with your custom written library or may switch many available pre-written libraries for routing.

If you were previously coding with jQuery you might use it for many features which AngularJS already included in it, so instead of depending on two different libraries which is possible to achieve with only having AngularJS, It is better to not include the jQuery file in your page (until it is really necessary) because with AngularJS $http service and rich directive it makes jQuery useless. With AngularJS one thing is sure you have not much cleaner and structured code than jQuery.

This was a short AngularJS introduction in the next article we will see the MVC in AngularJS. So keep commenting the topics you want to see in this series of article so I include articles accordingly.

Here is Next Part of this series:

3 comments:

  1. good explaination.

    ReplyDelete
  2. Great and useful startup information about Angular.JS

    ReplyDelete
  3. I don't think "lesser code" is the right term.
    The definition of lesser:
    - not so great or important as the other or the rest
    - lower in rank or quality

    ReplyDelete

Life insurance policy, bank loans, software, microsoft, facebook,mortgage,policy,