learn angularjs step by step

Last updated on Jul 26, 2016

Milan Sanathara

jQuery / JS

2

Learn Angular js

 

Learn Angular js

will cover up following topics:

  • What is Angular Js?
  • Why Angular Js?
  • Features
  • Advantages of Angular Js
  • Why should I use Angular js in place of jQuery?
What is Angular JS?

AngularJS is an open-source and powerful JavaScript framework developed by Google.It helps you to create single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side.

As being a framework, it dictates us to follow some rules and a structured approach. It’s not just a JavaScript library but a framework that is perfectly designed.

It extends HTML DOM with additional attributes and makes it more responsive to user actions.

Why Angular JS?

AngularJS is open source, completely free, and used by thousands of developers around the world.Following are the reasons that why angular js should use.

  • It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.

  • It helps you to structure and test your JavaScript code very easily.

  • It abstracts the much of code.

  • It encapsulates the behavior of your application in controllers which are instantiated with the help of dependency injection.

  • It helps you to structure and test your JavaScript code very easily.

Apart from that ,It is based on MVC pattern which helps you to properly organize your web apps or web application.

It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way your model will be immediately reflected into your view without the need for any DOM manipulation or event handling (with jQuery).

Features of Angular Js.
  • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).

  • Write less code.

  • Data-binding − It is the automatic synchronization of data between model and view components.

  • Scope − These are objects that refer to the model. They act as a glue between controller and view.

  • Controller − These are JavaScript functions that are bound to a particular scope.

  • Animations – AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service.

  • It encapsulates the behavior of your application in controllers which are instantiated with the help of dependency injection.

  • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.

  • It is a client side technology which provides powerful things to create dynamic web applications.

Advantages of Angular Js.

The main and most significant advantage of Angular js is that AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

  • AngularJS provides reusable components.

  • AngularJS code is unit testable.

  • It helps to build client side applications with less code and more flexibility.

  • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.

Advantages of Angular Js over jQuery.

jQuery is a lightweight and feature-rich JavaScript Library that helps web developers by simplifying the usage of client-side scripting for web applications using JavaScript. It extensively simplifies using JavaScript on a website and it’s lightweight as well as fast.

So, using jQuery, we can:

  • Easily manipulate the contents of a webpage
  • Apply styles to make UI more attractive
  • Easy DOM traversal
  • Effects and animation
  • Simple to make AJAX calls etc..

AngularJS is a great tool for building highly rich client-side web applications.

Angular js simply offers more features :

  • Two-Way data binding
  • REST friendly
  • MVC-based Pattern
  • Deep Linking
  • Template
  • Form Validation
  • Dependency Injection
  • Localization
  • Full Testing Environment
  • Server Communication

Most of the time, people fail to comprehend the real value of these technologies during application development. AngularJS is best suited for the web application development as it works on the HTML code and JSON data which helps in developing for interactive and robust applications but using the same for a simple website development results in slow loading and quite erratic websites.

Consider the following code to get some the semblance of angularjs over jQuery.

Using jQuery



In above jQuery code we had to bind the event.We bind the keyup event on jQ-input,and replace text with DOM element jq-text

.

Using Angular Js



{{an_input}}

 

Rather than jQuery we do not need to bind any kind of event.we have just used ng-model (binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.) and used it in another DOM element where we want to write.
Thus, Angularjs binds the DOM element automatically

Learn angular JS blog is just a basic introduction of angular js and what is the significant to use Angular js. We will bring some basic tutorials with step by step integration guide , In our next blog,Thank you

Click to get more Angular js step by step tutorials

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

2 Responses to learn angularjs step by step

  1. Pingback: learn angularjs with step by step tutorial  | examples of angular js

Leave a Reply

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