This is a laconic presentation on Angular JS for beginners only. I have emphasized on example rather than theory. There are self explained source code urls attached with slides. In the last slide I have attached source code for a real life example using Angular JS an BootStrap which may be very helpful to understand the concept of Angular JS.
6. A simple program
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
7. Directives
A directive is a behavior or DOM
transformation which is triggered by the
presence of a custom attribute, element name,
or a class name. A directive allows you to
extend the HTML vocabulary in a declarative
fashion.
8. Directives
❖ The ng-app directive initializes
an AngularJS application. It is
the owner of the application.
❖ The ng-init directive initialize
application data.
❖ The ng-model directive binds
the value of HTML controls
(input, select, textarea) to
application data.
❖ The ng-bind directive binds the
innerHTML element to the
application variable name.
Source Code
9. Expression and ng-repeat
❖ AngularJS expressions binds
data to HTML the same way as
the ng-bind directive.
❖ AngularJS will "output" data
exactly where the expression
is written.
❖ The ng-repeat directive clones
HTML elements once for each
item in a collection (in an
Source Code
10. Controllers
❖ Controllers are regular javascript objects that controls data.
❖ Controller is defined as ng-controller which creates
constructor function.
source code
11. Controllers and $scope
❖ $scope is an object that refers to the application mode.
❖ $scope sets up the initial state through properties and functions.
❖ Controller constructor function will be invoked with $scope
variable as a injectable parameter.
❖ Those properties construct View Model.
❖ $scope properties will be available to the template at the point in
the DOM where the controller is registered.
12. Controllers in External
In larger applications, it is common to store controllers in external
files. [Live Example ]
13. Service
❖ Services are substitutable objects that are wired
together using dependency injection (DI).
❖ Service is -
Lazily instantiated
Singleton
❖ Service is a stateless object that contains
useful functions.
These functions can be called from anywhere;
Controllers, Directive, Filters etc.
14. Service
Built in Services: There are many useful built-in services in Angular - $http, $window, $location,
$route.
Custom Services : Generally there are 2 ways to create services -
❖ using service()
❖ using factory()
15. Injecting Dependencies in Services
❖ Angularjs provides out of the box support for dependency management.
❖ AngularJS services are the objects that can be injected in any other Angular
construct (like controller, filter, directive etc).
❖ You can define a service which does certain tasks and inject it wherever you want.
Source Code Example
MVC done right
Most frameworks implement MVC by asking you to split your app into MVC components, then require you to write code to string them up together again. That’s a lot of work. Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connects them.
Because Angular acts as the mediator, developers also won’t feel tempted to write shortcuts between components that break abstractions just to make them fit easier.
A declarative user interface.
Angular uses HTML to define the app’s user interface. HTML is a declarative language which is more intuitive and less convoluted than defining the interface procedurally in JavaScript. HTML is also less brittle to reorganize than an interface written in JavaScript, meaning things are less likely to break. Plus you can bring in many more UI developers when the view is written in HTML.
HTML is also used to determine the execution of the app. Special attributes in the HTML determine which controllers to use for each element. These attributes determine “what” gets loaded, but not “how”. This declarative approach greatly simplifies app development in a sort of WYSIWYG (what you see is what you get) way. Rather than spending time on how the program flows and what should get loaded first, you simply define what you want and Angular will take care of the dependencies.
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
Source Code
AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.
The ng-init directive defines initial values for an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module instead.
You will learn more about controllers and modules later.
Source Code
source code
In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.
Use controllers to:
Set up the initial state of the $scope object.
Add behavior to the $scope object.
Do not use controllers to:
Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.
Format input — Use angular form controls instead.
Filter output — Use angular filters instead.
Share code or state across controllers — Use angular services instead.
Manage the life-cycle of other components (for example, to create service instances).
Source Code
Consider above diagram. Here we divide our application in two controllers: 1. Profile and 2. Dashboard. Each of these controllers require certain user data from server. Thus instead of repeating the logic to fetch data from server in each controller, we create a User service which hides the complexity. AngularJS automatically inject User service in both Profile and Dashboard controller. Thus our application becomes for modular and testable.
Source Code
We already saw in previous tutorials how to use angularjs dependency management and inject dependencies in controllers. We injected $scope object in our controller class.