This document provides an overview of Angular, including what it is, why it is useful, its key features, and how to get started using it. Angular is a client-side framework written in JavaScript that makes it easy to build dynamic web applications. It provides features like separation of concerns, Ajax services, dependency injection, and browser history out of the box. The document demonstrates how to set up an Angular application and introduces concepts like views, directives, data binding, controllers, scopes, modules, and providers to help structure applications. It also covers validation and animation in Angular.

1. Walk in the shoe of
Angular
with
Fiyaz Bin Hasan

2. What?
A client-side technology. Written completely in JavaScript.
Structural framework for building dynamic web apps

3. Why?
Building SPA was never been so easy before. Makes it easy to
build interactive modern web applications

4. Features
Takes care of some advanced features that users have become
accustomed to in modern web applications

5. Separation of
application logic,
data models and
views
Ajax services
Dependency
injection
Browser
history
Testing and
many more

6. ‘Nuff Said!
Write the hello world program please!

7. Install
Download and add the script (angular.js) to the script section.
Install via Nuget in VS. You can also use bower.

9. Know Angular
Adding pieces together

10. View
Directive
Model
Data Binding

11. Control
Your App Behavior
Adding controller and create bridge between views and
controller

12. View
Directive
Model
Data Binding
Controller
Scope

13. Make Your Code
Modular Buddy!
Keep the global namespace clean. Make testing guys life easier.
Make sharing of code between applications easier. Allow your
app to load different parts of the code in any order

14. View
Directive
Model
Data Binding
Controller
Scope
Module

15. Providers that makes
your code clean
Use value, factory, service, provider, contant to separate
business logic from the controllers. Increase reusability and
introduce a unit of work.

16. Value
Let's say that we want to have a
very simple service called
"clientId" that provides a string
representing an authentication id
used for some remote API. You
would define it like this:

17. Factory
Since Factory is more powerful
version of the Value recipe, you
can construct the same service
with it. Using our previous clientId
Value recipe example, we can
rewrite it as a Factory recipe like
this:

18. Service
The Service recipe produces a
service just like the Value or
Factory, but it does so by invoking
a constructor with the new
operator. The constructor can take
zero or more arguments, which
represent dependencies needed
by the instance of this type.

19. View
Directive
Model
Data Binding
Controller
Scope
Module
Provider

20. Please Validate!
Use angular and validate your form in much easier way

21. Validation
Check if:
ng-valid
ng-invalid
ng-pristine (Unchanged)
ng-dirty (Changed)
Get Errors with:
ng-error

22. A little animation can
make you smile.
Please enter. Move Around a bit. Now Leave!

23. Animation
Use enter, move and leave class on
angular ngRepeat, ngSwitch and
ng-View

24. View
Directive
Model
Data Binding
Controller
Scope
Module
Provider
Validation
Animation

25. Lets apply what we
studied!
Building a data driven application with angular (Front-
end) and asp.net web api (Back-end)

26. Wrap Up!