Walk in the shoe of Angular

withFiyaz Bin Hasan

What?A client-side technology. Written completely in

JavaScript.Structural framework for building dynamic web apps

Why?Building SPA was never been so easy before.

Makes it easy to build interactive modern web applications

FeaturesTakes care of some advanced features that users

have become accustomed to in modern web applications

Separation of application logic, data models and viewsAjax servicesDependency injection Browser historyTesting and many more

‘Nuff Said!Write the hello world program please!

InstallDownload and add the script (angular.js) to the

script section. Install via Nuget in VS. You can also use bower.

Know AngularAdding pieces together

View DirectiveModelData Binding

Control Your App Behavior Adding controller and create bridge between views

and controller

View DirectiveModelData BindingControllerScope

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

View DirectiveModelData BindingControllerScopeModule

Providers that makes your code

cleanUse value, factory, service, provider, contant to

separate business logic from the controllers. Increase reusability and introduce a unit of work.

ValueLet'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:

FactorySince 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:

ServiceThe 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.

View DirectiveModelData BindingControllerScopeModuleProvider

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

way

ValidationCheck if:

ng-valid ng-invalidng-pristine

(Unchanged)ng-dirty (Changed)

Get Errors with:ng-error

A little animation can make you

smile.Please enter. Move Around a bit. Now Leave!

AnimationUse enter, move and leave class on angular ngRepeat, ngSwitch and ng-View

View DirectiveModel

Data BindingControllerScope

ModuleProviderValidationAnimation

Lets apply what we studied!

Building a data driven application with angular (Front-end) and asp.net web api

(Back-end)

Wrap Up!