www.edureka.co/angular-js

View AngularJS course details at www.edureka.co/angular-js

For Queries during the session and class recording:Post on Twitter @edurekaIN: #askEdurekaPost on Facebook /edurekaIN

For more details please contact us: US : 1800 275 9730 (toll free)INDIA : +91 88808 62004Email us : sales@edureka.co

Deep dive into angularJS JavaScript Framework

Slide 2 www.edureka.co/angular-js

Objectives

At the end of the session you will be able to learn:

Intorduction to AngularJS

AngularJS Features

Controller Inheritance

Nested Routes

Building widgets

Slide 3 www.edureka.co/angular-jsSlide

What is AngularJS?

Now its an OpenSource client side JavaScript framework

created by Google

It designed for web developers and designers, who

needs to have more control over their web Applications

For a web developer, it means having a rich feature

that allows them to add more value to the client side of

the applications

AngularJS accomplishes a lot by embracing HTML,

JavaScript and CSS

AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech LLC, firstly

named as GetAngular

Slide 4 www.edureka.co/angular-js

Features of AngularJS

Slide 5 www.edureka.co/angular-jsSlide

StaticDOM

DynamicDOM

DOM Content Load Event

ng-app=“application name”

$injector

$compile $rootscope

$compile(dom, $rootscope)

Browser AngularJS

HTML

AngularJS: Architecture

Slide 6 www.edureka.co/angular-js

Controller Inheritance

Inherit parent controller property in child controller.

It's main uses are to enabling polymorphism and code re usability.

Keep the common methods in parent controller. So we should be able to access that method in all child controllers.

Sample :

Slide 7 www.edureka.co/angular-js

Controller Inheritance DEMO

Slide 8 www.edureka.co/angular-js

Angular Routes

ng-router

» ngView directive that uses $route service to render the template into main layout.

» Every time the current route changes, the included view changes with it according to the configuration of the

$route service.

» The $routeParams service allows you to retrieve the current set of route parameters in controller, filters or

directives.

UI Router :

» AngularUI Router is a routing framework for AngularJS, which allows you to apply the view based on sates

instead of routes.

» States are bound to named, nested and parallel views, allowing you to powerfully manage your application's

interface.

Slide 9 www.edureka.co/angular-js

Angular RoutesDEMO

Slide 10 www.edureka.co/angular-js

Building AngularJS Widgets

Using AngularJS custom directive feature we can create our own reusable functionality

Custom directives let you to define the view and functionality of the element.

Directives can be four different types.

» Element

» Attribute

» Class

» Comment

Directives creates it's own scope (isolated scope). So we cannot access those scope variables from controller.

We can pass controller scope variables and methods to directive.

Slide 11 www.edureka.co/angular-js

Building Angular WidgetsDEMO

Slide 12 www.edureka.co/angular-js

Course Topics

Module 1

» Introduction to JavaScript MVC Framework and AngularJS

Module 2

» Dependency Injection and Controllers

Module 3

» Route, Directive and Filters

Module 4

» Creating Custom Directives and Filters

Module 5

» Third-party AngularJS Modules and Testing Angular

Module 6

» AngularJS with Node.js, Yeoman and Rest Exposure

Module 7

» Project Discussion

Slide 13 www.edureka.co/angular-js

LIVE Online Class

Class Recording in LMS

24/7 Post Class Support

Module Wise Quiz

Project Work

Verifiable Certificate

Course Features

Slide 14 www.edureka.co/angular-js

Questions

Slide 15 www.edureka.co/angular-js