What is AngularJS

Angularjs is an open source JavaScript framework to develop web based applications. It is usually used to create Single Page Application. It is easy to code in AngularJS.

what is angularjs

AngularJS Directives

Directives in angularJS extends HTML code to provide new behaviour.

directives in angularjs

ng-app Directives

ng-app directive is the beginning directive of angularJS. It is used to auto bootstrap angularJS application. We generally use this directive at root level like inside html tag or in body tag.

ng-app in angularjs

ng-model Directives

Ng-model is used to bind input fields, select and textarea with model and we can use this model in page. Ng-model provides the facility of two-way data binding.

ng-model in angularjs

Controller in Angularjs

As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.

controller in angularjs

ng-repeat in Angularjs

As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.

ng-repeat in angularjs

ng-init in Angularjs

Ng-init directive is used to initialize a variable, which will allows evaluating an expression in given scope. According to angular official document, this directive is abused as it adds unnecessary business logic in the application. Still to evaluate an expression we required that directive.

ng-init in angularjs

ng-include in Angularjs

ng-include directive is used to add external html files into application. This directive helps us to create common page of website.

ng-include in angularjs

ng-hide and ng-show in Angularjs

These both directives ng-show and ng-hide are used to manage the visibility of html controls. Both directives take true and false value to display or hide the html control.

ng-hide and ng-show in angularjs

ng-if in Angularjs

Ng-if directive is condition based directive which removes or recreates the DOM portion according to condition.

ng-if in angularjs

ng-switch in Angularjs

Ng-switch is conditional directives which swap (show and hide) DOM elements according to expression. We use ng-switch-when to check conditions and ng-switch-default to put default condition.

ng-switch in angularjs

ng-src in Angularjs

Ng-src directive is used to bind dynamic image url. When we use src at img tag it will not work properly as it will fetch image before angularjs replace expression with url and 404 error occurred.

ng-src in angularjs

ng-click in Angularjs

Ng-click directive provides the custom behaviour when an element is clicked. When elements clicked, it will call the event handler function, which bind to ng-click.

ng-click in angularjs

custom directive in Angularjs

angularJS provides us the facility to create our own directives which is called custom directives. We have to register this directive in a module. We create directives in camel case. However, when we apply in the html code we use hyphen (-). Custom directives are the function, which return JSON Objects.

custom directive in angularjs