AngularJS: What are Controllers and how to use them

Understanding AngularJS Controllers

Introduction to AngularJS Controllers

• This video provides an overview of controllers in AngularJS, with a promise of future content on Angular scope.

Processing an AngularJS Application

• The speaker begins by explaining the processing flow of an AngularJS application, emphasizing the need for the AngularJS library to be referenced first.

• Once the library is loaded, it triggers the execution of the AngularJS engine, which scans through user markup to identify and process all relevant components.

Creating an Angular Module

• An important step involves creating an Angular module; this is done by specifying a name (e.g., "sample") within square brackets. It’s noted that while not mandatory, starting with a module is considered best practice.

Understanding Templates in Markup

• Templates are defined as HTML blocks decorated with Angular-related components; these blocks contain directives or expressions that require processing. The body block containing ng-app is highlighted as a key example.

• The presence of ng-* attributes indicates that a block is recognized as an Angular template needing further action from the framework. These templates can also include data binding expressions evaluated at runtime.

Template Processing Steps

Compilation Phase

• Each identified template undergoes compilation using an internal HTML compiler specific to AngularJS, distinct from standard browser HTML interpretation. This phase checks for errors in syntax and structure within the template code.

Loading Phase

• After compilation, templates are loaded into memory (browser memory), where they exist as instances linked to existing angular components for further manipulation and rendering purposes.

Transformation Phase

Understanding AngularJS: The Role of DOM and Controllers

The Process of Rendering in AngularJS

• AngularJS creates a Document Object Model (DOM) that is understandable by the browser, which is then sent for rendering. This process involves generating a new DOM from a template.

• The browser receives specific values (e.g., value three) directly, as AngularJS instructs it to focus only on certain elements while ignoring others.

• The output generated from this transformation is referred to as the "view" in AngularJS terminology, representing either a template or its output.

• Key components discussed include modules, templates, compilation, loading, transformation, rendering, and ultimately the view produced by these processes.

Introduction to Controllers

• Controllers in AngularJS are essentially JavaScript objects that encapsulate application logic. They serve as the backbone for managing data flow between views and models.

• When defining controllers within an Angular module (e.g., named "sample"), they are created using methods available in the framework.

• A controller can be attached to an Angular module through its instance reference. For example, moduleReference.controller('EMP', function() ...) defines a controller named EMP.

Connecting Controllers with Views

• Every Angular application must have at least one ng-app directive to initiate the application process; this directive links back to the defined module (e.g., sample).

• Controllers facilitate data exchange between views and themselves. They send data to views and can also receive data back from them.

• To attach a controller to a DOM element, it must have an ng-controller attribute specifying which controller it should work with (e.g., <div ng-controller="EMP">).

Understanding Directives

• Any attribute starting with "ng" is considered a directive in AngularJS. This includes both ng-app and ng-controller, which help define how elements interact with controllers.

• By specifying an ng-controller, you establish that the associated block will operate under that particular controller's logic and functionality.

Understanding Controllers in AngularJS

The Role of Controllers

• Every controller in AngularJS must be instantiated, and can be viewed as a class. Functions within controllers act like constructor functions for clarity.

• Controllers are part of modules, which can contain multiple classes (controllers). Each class has members such as properties and methods.

• A controller instance needs to be created; for example, an instance named "wo" represents a class called EMP or a controller instance.

• The naming convention for instances is important; "wo" serves as an object reference to the controller's data.

Data Flow Between Controller and View

• Controllers provide data directly to views using member variables. For example, the variable "name" is accessed through the instance "o".

• The controller creates a model that contains all necessary data before sending it to the view. This establishes the Model-View-Controller (MVC) architecture in AngularJS.

One-Way vs Two-Way Data Binding

• Currently, information flows one way—from the controller to the view—through models. Future discussions will cover two-way data binding where views can send information back to controllers.

Structure of AngularJS Applications

• An Angular module can have multiple controllers, allowing flexibility in application design. HTML markup defines templates that transform into views.

• Controllers send model data to views; however, views do not understand controllers—they only interact with models.

Interaction with Web Services

• Data typically resides on servers but is handled client-side by AngularJS applications. Direct database access from browsers poses security risks.

• Controllers interact with web services (REST-based services), pulling data and converting it into models without direct knowledge of databases.

Separation of Concerns in MVC Architecture

• Views are unaware of how they receive their data; they only know about models. Similarly, controllers do not interact directly with databases but rely on web services for data retrieval.

How to Consume a Web Service with AngularJS

Setting Up the Application

• The speaker introduces the concept of consuming a web service and mentions the use of controllers and models in AngularJS applications.

• A new HTML file named 01 HTM is created, and the speaker refers to their previous work with AngularJS, indicating familiarity with its structure.

• The creation of an Angular module is demonstrated using angular.module, naming it "sample" while maintaining an instance reference in a variable (commonly app).

Creating Controllers

• The speaker explains how to create a controller by providing its name and defining it as a constructor function containing application logic.

• An attribute called name is initialized within the controller, setting its default value to "Jag".

Integrating Angular Components

• The main block of HTML is marked as an Angular application using the directive ng-app, which initializes the AngularJS processing for that section.

• To link the controller, the directive ng-controller is used, specifying that this block should operate under the defined controller.

Accessing Controller Members

• The instance of the controller (w) allows access to its members; for example, displaying w.name outputs "Jag".

• During runtime, Angular processes templates dynamically. It evaluates expressions like w.name, fetching values from within the controller's scope.

Testing in Browser

• After saving changes, testing occurs by accessing localhost on port 880 where Express serves the HTML file.

• Additional members can be added to demonstrate dynamic data binding; for instance, adding a salary attribute displays updated information when refreshed.

Simplifying Structure

• It's noted that having an entire body tag as part of an Angular application simplifies structure without needing additional blocks.

• The body itself can serve as an entry point for controllers; thus all evaluations will refer back to this main instance.

Conclusion on Controllers