Deep Dive into AngularJS Javascript Framework
-
Upload
edureka -
Category
Technology
-
view
302 -
download
4
Transcript of Deep Dive into AngularJS Javascript Framework
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 : [email protected]
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