AngularJS Developer

You can initialize a select box with options on page load by using ng-init directive

<div ng-controller = “ apps/dashboard/account ” ng-switch

On = “! ! accounts” ng-init = “ loadData ( ) ”>

Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

During compilation process when specific HTML constructs are encountered a behaviour or function is triggered, this function is referred as directive. It is executed when the compiler encounters it in the DOM.

Different types of directives are

► Element directives

► Attribute directives

► CSS class directives

► Comment directives

$rootScope is the parent object of all $scope Angular objects created in a web page.

ng-click directive represents a AngularJS click event.

In below example, we've added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.

<p>Total click: {{ clickCounter }}</p></td>

<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

Here is a list of IDE Plugins and Extensions which can enhance the way you code with AngularJS:

☛ Sublime Text

☛ WebStorm

☛ Eclipse

☛ Netbeans

☛ Visual Studio 2012/2013 Express or higher

☛ TextMate

☛ Brackets

☛ ATOM

Traceur compiler compiles ECMAScript Edition 6 (ES6) (including classes, generators and so on) code on the fly to regular Javascript (ECMAScript Edition 5 [ES5]) to make it compatible for the browser.

AngularJS has several advantages in web development.

☛ AngularJS supports MVC pattern

☛ Can do two ways data binding using AngularJS

☛ It has per-defined form validations

☛ It supports both client server communication

☛ It supports animations

ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. ng-if will not insert the DOM element until the condition is not fulfilled.

ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to ng-show/ng-hide.

We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.

Following are the three core directives of AngularJS.

☛ ng-app − This directive defines and links an AngularJS application to HTML.

☛ ng-model − This directive binds the values of AngularJS application data to HTML input controls.

☛ ng-bind − This directive binds the AngularJS Application data to HTML tags.

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 (ng-bind, ng-model, etc) to perform most of the task that developers have to do.

Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.

AngularJS works fine with the latest versions of Safari, Chrome, Firefox, Opera 15+, and IE9+ (Internet Explorer).

It also supports various mobile browsers like Android, Chrome Mobile, iOS Safari, and Opera Mobile.

Note: Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8.

ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.

Scope refers to the application model, it acts like glue between application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.

Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.

It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.

Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.

$scope.$apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value)

Explanation: $scope.$apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values