KEMBAR78
Deep Dive into AngularJS Javascript Framework | PDF
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: #askEdureka
Post on Facebook /edurekaIN
For more details please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email 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
Static
DOM
Dynamic
DOM
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 Routes
DEMO
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 Widgets
DEMO
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

Deep Dive into AngularJS Javascript Framework

  • 1.
    www.edureka.co/angular-js View AngularJS coursedetails at www.edureka.co/angular-js For Queries during the session and class recording: Post on Twitter @edurekaIN: #askEdureka Post on Facebook /edurekaIN For more details please contact us: US : 1800 275 9730 (toll free) INDIA : +91 88808 62004 Email us : sales@edureka.co Deep dive into angularJS JavaScript Framework
  • 2.
    Slide 2 www.edureka.co/angular-js Objectives Atthe end of the session you will be able to learn: ï‚źIntorduction to AngularJS ï‚źAngularJS Features ï‚źController Inheritance ï‚źNested Routes ï‚źBuilding widgets
  • 3.
    Slide 3 www.edureka.co/angular-jsSlide Whatis 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
  • 4.
  • 5.
    Slide 5 www.edureka.co/angular-jsSlide Static DOM Dynamic DOM DOMContent Load Event ng-app=“application name” $injector $compile $rootscope $compile(dom, $rootscope) Browser AngularJS HTML AngularJS: Architecture
  • 6.
    Slide 6 www.edureka.co/angular-js ControllerInheritance ï‚ź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 :
  • 7.
  • 8.
    Slide 8 www.edureka.co/angular-js AngularRoutes ï‚ź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.
  • 9.
  • 10.
    Slide 10 www.edureka.co/angular-js BuildingAngularJS 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.
  • 11.
  • 12.
    Slide 12 www.edureka.co/angular-js CourseTopics ï‚ź 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
  • 13.
    Slide 13 www.edureka.co/angular-js LIVEOnline Class Class Recording in LMS 24/7 Post Class Support Module Wise Quiz Project Work Verifiable Certificate Course Features
  • 14.
  • 15.