AngularJS Controller Tutorial with Example

What is Controller in AngularJs?

A Controllers in AngularJs takes the data from the View, processes the data, and then sends that data across to the view which is displayed to the end user. The Controller will have your core business logic.

The controller will use the data model, carry out the required processing and then pass the output to the view which in turn is displayed to the end user.

In this tutorial, you will learn-

What Controller does from Angular’s perspective

Following is a simple definition of working of Angular JS Controller.

      • Data in this way pass from the controller to the scope, and then the data passes back and forth from the scope to the view.
      • The scope is used to expose the model to the view. The model can be modified via methods defined in the scope which could be triggered via events from the view. We can define two way model binding from the scope to the model.
      • Controllers should not ideally be used for manipulating the DOM. This should be done by the directives which we will see later on.
      • Best practice is to have controller’s based on functionality. For example, if you have a form for input and you need a controller for that, create a controller called “form controller”.

How to build a basic Controller

Before we start with the creation of a controller, we need to first have our basic HTML page setup in place.

The below code snippet is a simple HTML page which has a title of “Event Registration” and has references to important libraries such as Bootstrap, jquery and Angular.

Code Explanation:

      1. The ng-app keyword is used to denote that this application should be considered as an angular application. Anything that starts with the prefix ‘ng’ is known as a directive. “DemoApp” is the name given to our Angular.JS application.
      2. We have created a div tag and in this tag we have added an ng-controller directive along with the name of our Controller “DemoController”. This basically makes our div tag the ability to access the contents of the Demo Controller. You need to mention the name of the controller under the directive to ensure that you are able to access the functionality defined within the controller.
      3. We are creating a model binding using the ng-model directive. What this does is that it binds the text box for Tutorial Name to be bound to the member variable “tutorialName”.
      4. We are creating a member variable called “tutorialName” which will be used to display the information which the user types in the text box for Tutorial Name.
      5. We are creating a module which will attach to our DemoApp application. So this module now becomes part of our application.
      6. In the module, we define a function which assigns a default value of “AngularJS” to our tutorialName variable.

If the command is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

  • The controller’s primary responsibility is to create a scope object which in turn gets passed to the view
  • How to build a simple controller using the ng-app, ng-controller and ng-model directives
  • How to add custom methods to a controller which can be used to separate various functionalities within an angularjs module.
  • Controllers can be defined in external files to separate this layer from the View layer. This is normally a best practice when creating web applications.
top
X
Welcome to Our Website
Welcome to WPBot
wpChatIcon