Modules Controller and Scope in AngularJS

Presented by
Deepak Kumar
Training Outline
Lesson 1: Modules
Lesson 2: Controller
Lesson 3: Scope
Lesson 4: Directive
Modules
An AngularJS module defines an application.
The module is a container for the different parts of an application.
The module is a container for the application controllers.
Purpose of Modules
Most applications have a main method that instantiates and wires
together the different parts of the application.
Angular apps don't have a main method. Instead modules declaratively
specify how an application should be bootstrapped. There are several
advantages to this approach:
The declarative process is easier to understand.
You can package code as reusable modules.
The modules can be loaded in any order (or even in parallel) because
modules delay execution.
Example of Module
Controller
AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
Example of Controller
Scope
The scope is the binding part between the HTML (view) and the
JavaScript (controller).AngularJS controllers are regular JavaScript
Objects.
The scope is an object with the available properties and methods.
The scope is available for both the view and the controller.
Example of Scope
Directive
AngularJS lets you extend HTML with new attributes called Directives.
AngularJS has a set of built-in directives which offers functionality to
your applications.
AngularJS also lets you define your own directives.
List of Directive
ng-app : Directive initializes an AngularJS application.
ng-init : Directive initializes application data.
ng-model : Directive binds the value of HTML controls (input, select,
textarea) to application data.
ng-value : directive sets the value attribute of a input element, or a
select element.
ng-if : Directive removes the HTML element if the expression evaluates
to false.
ng-repeat : Directive repeats an HTML element:
Example of Directive
ng-app, ng-model
Example of Directive
ng-value
Example of Directive
ng-repeat
Example of Directive
ng-if