AngularJS Developer

AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. Following are the features of AngularJS framework.

☛ AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).

☛ AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.

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

☛ AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

TL;DR Summary: To reduce memory consumption and improve performance it is a good idea to limit the number of watches on a page to 2,000. A utility called ng-stats can help track your watch count and digest cycles.

Jank happens when your application cannot keep up with the screen refresh rate. To achieve 60 frames-per-second, you only have about 16 milliseconds for your code to execute. It is crucial that the scope digest cycles are as short as possible for your application to be responsive and smooth. Memory use and digest cycle performance are directly affected by the number of active watches. Therefore, it is best to keep the number of watches below 2,000. The open-source utility ng-stats gives developers insight into the number of watches Angular is managing, as well as the frequency and duration of digest cycles over time.

Caution: Be wary of relying on a “single magic metric” as the golden rule to follow. You must take the context of your application into account. The number of watches is simply a basic health signal. If you have many thousands of watches, or worse, if you see that number continue to grow as you interact with your page. Those are strong indications that you should look under the hood and review your code.

This question is valuable as it gives insight into how the candidate debugs runtime issues while creating a discussion about performance and optimization.

Following are some of the key reasons to choose AngularJS as you web development framework:

☛ It uses MVC design pattern which allows segregating an application into different components (called Model, View, and Controller) thus making it easy to maintain.

☛ It allows extending the HTML by attaching directives to your HTML markup. This provides the capability to define new powerful templates having new attributes, tags, and expressions.

☛ It allows you to create your own directives and also make reusable components. Directives help the developer to concentrate on creating logic, thus enabling them to work efficiently.

☛ It supports two-way data binding i.e. enables automatic synchronization of data between model and view components. Thus, any update in the model gets reflected in the view automatically. And there is no need to add any Javascript code or event listeners to reflect the data changes.

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

☛ It supports built-in services that perform the common tasks for web applications. For example, it provides $http service to communicate with REST service.

☛ It makes the development and testing of the application’s JavaScript code easy.

☛ Also, AngularJS has a mature community to help the developers. It has wide support over the internet.

AngularJS directives are only used to extend HTML and DOM elements' behavior. These are the special attributes, that start with ng- prefix, that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element.

AngularJS has a set of built-in directives like

☛ ngBind,

☛ ngModel

☛ ngClass

☛ ngApp

☛ ngInit

☛ ngRepeat

We can create our own directives for Angular to use them in our AngularJS Application with the controllers and services too. In this article, we’ll learn about some most important built-in directives like: ng-app, ng-init, ng-model, ng-bind and ng-repeat.

☛ ng-app

It is the most important directive for an Angular Application, which is used to indicate starting of an Angular Application to AngularJS HTML compiler ($compile), like a “Main()” function in any compile time language like C#, Java or C++ etc. If we do not use this directive first and directly try to write other directives, it gives an error.

☛ ng-init

ng-init directive is used to initialize an AngularJS Application data variable's inline statement, so that we can use those in the specified block where we declare them. It is like a local member of that ng-app and it can be a value or a collection of the values and as an array, it directly supports JSON data.

☛ ng-model

ng-model directive is used to define the model/variables value to be used in AngularJS Application’s HTML controls like <input type=’text’/> and it also provides two-way binding behavior with the model value. In some cases, it’s also used for databinding.

☛ ng-bind

ng-bind directive is also used to bind the model/variable's value to AngularJS Applications HTML controls as well as with HTML tags attributes like: <p/>, <span/> and more, but it does not support two way binding. We can just see the output of the model values.

☛ ng-repeat

ng-repeat directive is used to repeat HTML statements. Ng-repeat works the same as for each loop in C#, Java or PHP on a specific collection item like an array.

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. The characteristics of Scope are:

Scopes provide APIs ($watch) to observe model mutations.

☛ Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).

☛ Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.

☛ Scopes provide context against which expressions are evaluated. For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

AngularJS extends the behavior of HTML and DOM elements with new attributes called Directives. It directs the AngularJS’s HTML compiler ($compile) to attach a special behavior to that DOM element. This AngularJS component starts with prefix “ng”.

Following is the list of AngularJS built-in directives.

☛ ng-bind – The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.

☛ If there is any change in the value of the given variable or expression, then the content of the specified HTML element will also be updated accordingly. It supports one-way binding only.

☛ ng-model – This directive is used to bind the value of HTML controls (input, select, text area) to application data. It is responsible for binding the view into the model, which other directives such as input, text area, and select require. It supports two-way data binding.

☛ ng-class – This directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array.

☛ ng-app – Just like the “Main()” function of Java language, this directive marks the beginning of the application to AngularJS’s HTML compiler ($compile). If we do not use this directive first, an error gets generated.

☛ ng-init – This is used to initialize the application data so that we can use it in the block where it is declared. If an application requires local data like a single value or an array of values, this can be achieved using the ng-init directive.

☛ ng-repeat – This repeats a set of HTML statements for defined number of times. The set of HTML statements will be repeated once per item in a collection. This collection must be an array or an object.

☛ We can even create our own directives too and use them in our AngularJS Application.