AngularJs Controller for beginner

Monday, January 18th, 2016 (0 Comment)

In the first application AngularJs example, I use angularjs controller to handle, it is a component of the MVC pattern so in this article we will learn it before and then in the next article we explore other components such as templates, services, scope, etc…

AngularJs Controller is a constructor with the task of performing data processing for object $scope, it from here, the Views will use the data in the $scope to display on the application.

When a Controller is assigned to the DOM in the HTML using the attribute directive ng-controller, Angular will identify and create a new Controller object to use as a constructor , that is going to be run when the website is loaded. Now, Angular also creates a new $scope object for that controller. As in example 2 previous posts, you see two $scope in two different controllers it have the same value, but when showing off, it is not related to each other.

1. When should you use AngularJs Controller ?

  • AngularJs Controller used to set the value, the initial state $scope object.
  • Add functions, acts on the $scope object

2. When shouldn’t you use Controller ?

  • Manipulating the DOM, which means use the Controller to change the value of the DOM (contents, attributes). In this case, the data-binding mechanism existed, therefore should not use the Controller.
  • Validate form, ie not using the controller to check the data format of the input form. In this case, should to use Form Controls Angular.
  • Filtering data, ie data format conversion. In this case, should to use object’s Filter in Angular.
  • Sharing of data, use Angular Service in this case
  • Manage the lifetime of the component

3. Syntax declare AngularJs Controller

There are two cases to declare controller:

3.1. Case 1: application name is not empty (ng-app=”lvapp”)

We have to declare an app is ng-app=”lvapp” and create a controller inside with name is ng-controller=”HeaderController”, so Controller (LVController) already within in the App (lvapp). In this case we must use javascript mandatory to declare with Angular is what we have to use app and controllers

3.2. Case 2: application name is empty (ng-app=””)

In this case we construct a function in javascript named like the name declared in attribute app-controller

Example:

Show your personal information using AngularJs. In this example we’ll create a text paragraph to display personal information, each information would put into {{name}} to Angular binding data. We have 2 code to describe the two cases above:

Case 1:

Demo

Case 2:

Demo

Output:

 

Tags: , , , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

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