Angularjs Introduction - Learn Step by Step Angularjs Tutorial | W3schools

What is AngularJS?

AngularJS, a JavaScript framework developed by a Googler and supported by Google has become quite a buzz word in past few months. More and more developers are using it and thus the community has grown significantly. Not only they love it, but they can’t stop praising it. AngularJS takes declarative programming to whole new level. It adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views.

Also Read: Angularjs Tutorial


AngularJS is an auxiliary framework for dynamic web applications. It gives you a chance to utilize HTML as your layout dialect and gives you a chance to stretch out HTML’s sentence structure to express your application’s segments obviously and briefly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write.Furthermore, everything occurs inside the program, making it a perfect ideal partner with any server technology.



  • AngularJS is a capable JavaScript based improvement structure to make RICH Internet Application(RIA).
  • AngularJS gives designers choices to compose client-side application (utilizing JavaScript) in a clean MVC(Model View Controller) way.
  • An application written in AngularJS is cross-program agreeable. AngularJS consequently handles JavaScript code appropriate for every program.
  • AngularJS is open source, totally free, and utilized by a great many engineers far and wide. It is authorized under the Apache License 2.0.

By and large, AngularJS is a system to construct expansive scale and elite web application while keeping them as simple to keep up.

Core Features:

1. Two-way data binding: – The two-way Data Binding is an extraordinary feature ever integrated into a JavaScript framework. In two-way data binding, any changes made in the view it will reflect in the model similarly changes made in the model it will reflect in the view. It is a two-way process.

2.MVC: – MVC or Model-View-Controller architecture. From my point of view, is to split the web application into a more manageable structure. The MVC architecture comprises of three important elements, the model, view and controller. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel).

3.Scope: – A Scope is a JavaScript object that sits inside the model, and delivers data to the view. They act as glue between controller and view.

4.Controllers: – Angularjs mainly depends on controllers to control the flow of the data in the application. A controller is defined using ng-controller directive. A controller is a javascript object it contains attributes/properties and functions. Each controller has $scope parameter which refers to the application module.

5.Directives: – Directives are markers on DOM elements (such as elements, attributes, CSS, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel…).

6.Filters: – These select a subset of items from an array and return a new array. They can format, sort and filter the data. The filters can be used binding expression or directive. We can create customized filters also.

7.Services: – Services are javascript functions and are responsible for doing specific tasks only. Controllers, filters can call them as on requirement basis. Services are normally injected using dependency injection mechanism. AngularJS come with several built-in services for example $http to make aXMLHttpRequests. These are singleton objects which are instantiated only once in app. We can create custom services also.

8.Templates: – In Angular, templates are written with HTML that contains Angular-specific elements and attributes. These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

9.Routing: – It is the concept of switching views. It helps to our application to become a single page application. We must include Angularjs routing in our module.

10.Deep linking: – Deep linking allows you to encode the state of the application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

11.Dependency injections: – AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

12.Testing: – It is very easy to test any of components.



angularjs concept

The following diagram depicts the main concepts of AngularJS which we will study in detail in the upcoming chapters:

Advantages of AngularJS:

The main Angular advantages are:

  • No need to use observable functions; Angular analyses the page DOM and builds the bindings based on the Angular-specific element attributes. That requires less writing, the code is cleaner, easier to understand and less error-prone.
  • Angular modifies the page DOM directly instead of adding inner HTML code. That is faster.
  • Data binding occurs not on each control or value change (no change listeners) but at particular points of the JavaScript code execution. That dramatically improves performance as a single bulk Model/View update replaces hundreds of cascading data change events.
  • Quite a number of different ways to do the same things, thus accommodating to particular development styles and tasks.
  • Extended features such as dependency injection, routing, animations, view orchestration, and more.
  • Supported by IntelliJ IDEA and Visual Studio .NET IDEs.
  • Supported by Google and a great development community.

That effectively makes Angular the tool of choice for building Single Page Applications.

Disadvantages of AngularJS:

Angular is not the silver bullet. Some of its disadvantages are backsides of its strong points, some are inherent to the JavaScript ineffectiveness that could not be overcome even with the best derivatives.
The weaknesses are:

  • Angular is big and complicated. With multiple ways to do the same thing, it is hard to tell which way is better for a particular task. Mastering Angular over the “Hello world” level requires considerable efforts. Different developers’ coding styles and habits might complicate integration of different components into a whole solution.
  • The lifecycle of an Angular application is complex, and to master it you really need to read the code. Compile and link are not intuitive, and specific cases can be confusing (recursion in compile, collisions between directives etc.).
  • As the project grows with time, you most likely will need to throw away existing implementations and create new versions using different approaches. Angular implementations scale poorly.
  • More than 2000 watchers can severely lag the UI. That limits the complexity of your Angular forms, especially big data grids and lists.