O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
UNDERSTANDING
KTMJS DEVELOPERS MEETUP
EPISODE 2
AYUSH SHRESTHA
Chief of Design – nLocate
Co-Founder – lishn.com
What is Angular JS?
Angular JS is an open-source JavaScript Framework
maintained by Google for building Single Page Applic...
What is Angular JS?
 Client-side JS Framework for SPA
 Not just a single piece of a puzzle but full client side solution...
Core Features of
Angular JS
DISCLAIMER : THERE WILL BE CODE SNIPPETS IN THE SLIDES WHICH ARE
ONLY FOR DEMO PURPOSE AND MIG...
Two-way Data Binding
ONE WAY DATA BINDING TWO WAY DATA BINDING
VIEW
TEMPLATE Model
One-
time
Merge
TEMPLATE
VIEW
Model
CON...
MVC Framework
 The whole application has 3 major components Model, View
and Controller
 Model is the data layer
 View i...
Templates
Static
Template
Dynamic
Data
Final
View
Templates
 Templates are plain old HTML
 Extended HTML Vocabulary to contain instructions on how
to combine model data i...
Templates
ng-src
Dependency Injection
 Built-in Dependency Injection Subsystem
 Easier to understand and test
 Modular Development
 Jus...
Dependency Injection
Directives
 Extend HTML vocabulary to give
them superpowers
 In-built and custom directives
Core Concepts of
Angular JS
Modules
 Container for different parts of your application –
controllers, services, filters, etc.
 Declaratively specify...
Modules
Modules
Modules
Modules
Modules
 A module for each feature
 A module for reusable features
 An application level module which will depend on ab...
Controllers
 Logic behind the view
 Constructs the Model and publishes it to the View
 Instantiate the ViewModel object...
Controllers
Writing Controllers
Writing Controllers
Writing Controllers
View
 What the users see
 HTML Template that is merged with the model and finally
rendered into the browser DOM
Model
 Data that is merged with the HTML template to produce
views
Model
 Data that is merged with the HTML template to produce
views
Scope
 An object that refers to the application’s data-model
 $scope
 Execution context for expression
 Contains data,...
Scope : Scope Hierarchy
Scope : Scope Hierarchy
Hello World
Hello John Doe
Hello Ramesh
Hello Suresh
Scope : $watch
 API to observe model mutation
Scope : $digest cycle
 A cycle that processes all watcher functions
 Asynchronous Dirty Checking cycle
 Not to be calle...
Scope : $apply
 Explicitly evaluate expressions in angular from outside
angular
 Executes $digest after expression evalu...
Scope : Events
 $emit(‘somethingHappened’, args) – dispatches event
upwards the scope
 $broadcast(‘somethingHappened’, a...
Filters
 Formats the value of an expression for display
 Change form of data
 Return a subset of list according to some...
Filters
Filters : Custom
Filters : Custom
Services
 Injectable objects that can be used to organize and share
code and functions across the application
 Could be ...
Services
Directives
 Coolest feature of angular js
 Markers on DOM elements (attributes, element names,
class names, comment) tha...
Directives : In-built directives
 Ng-app
 Ng-bind
 Ng-model
 Ng-class
 Ng-controller
 Ng-show /Ng-Hide
 Ng-if
 Ng-...
Directives : Custom Directives
Directives : Custom Directives
Directives : Custom Directives
That’s All For Today!!
 Routing using angular-ui-router
 Scope Life Cycle
 $resource
 Services/Factories/Providers
 N...
One more thing…
AYUSH SHRESTHA
fb.me/ShresthaAayush
@AayushShrestha
+AayushShresthaOriginal
aayush@nLocate.com
aayushonweb@gmail.com
Understanding angular js
Understanding angular js
Understanding angular js
Understanding angular js
Próximos SlideShares
Carregando em…5
×

Understanding angular js

4.588 visualizações

Publicada em

In this presentation, I talk about few things that I learned while working on Angular JS that might help you understand Angular JS better.

Publicada em: Carreiras

Understanding angular js

  1. 1. UNDERSTANDING KTMJS DEVELOPERS MEETUP EPISODE 2
  2. 2. AYUSH SHRESTHA Chief of Design – nLocate Co-Founder – lishn.com
  3. 3. What is Angular JS? Angular JS is an open-source JavaScript Framework maintained by Google for building Single Page Applications (SPAs). Its goal is to augment browser-based application with Model-View-Controller (MVC) capability.
  4. 4. What is Angular JS?  Client-side JS Framework for SPA  Not just a single piece of a puzzle but full client side solution  Model-View-Controller framework  For front-end of your application  Steroids for your UI
  5. 5. Core Features of Angular JS DISCLAIMER : THERE WILL BE CODE SNIPPETS IN THE SLIDES WHICH ARE ONLY FOR DEMO PURPOSE AND MIGHT NOT BE TOTALLY ACCURATE SYNTACTICALLY. IT IS ONLY MEANT TO GIVE A BRIEF OVERVIEW OF HOW THINGS WORK.
  6. 6. Two-way Data Binding ONE WAY DATA BINDING TWO WAY DATA BINDING VIEW TEMPLATE Model One- time Merge TEMPLATE VIEW Model CONTINUOUS UPDATE Change in view Updates model Change in model Updates view
  7. 7. MVC Framework  The whole application has 3 major components Model, View and Controller  Model is the data layer  View is the UI layer  Controller is the logic layer  Actually, MVVM (Model-View-ViewModel) architecture
  8. 8. Templates Static Template Dynamic Data Final View
  9. 9. Templates  Templates are plain old HTML  Extended HTML Vocabulary to contain instructions on how to combine model data into view  Its NOT HTML string manipulation (one of the major differences from other frameworks)
  10. 10. Templates ng-src
  11. 11. Dependency Injection  Built-in Dependency Injection Subsystem  Easier to understand and test  Modular Development  Just ask for things that you want to use (built-in or custom services)
  12. 12. Dependency Injection
  13. 13. Directives  Extend HTML vocabulary to give them superpowers  In-built and custom directives
  14. 14. Core Concepts of Angular JS
  15. 15. Modules  Container for different parts of your application – controllers, services, filters, etc.  Declaratively specify how an application is to be bootstrapped  Builds reusable component packages  Can be loaded in any order (or even in parallel)
  16. 16. Modules
  17. 17. Modules
  18. 18. Modules
  19. 19. Modules
  20. 20. Modules  A module for each feature  A module for reusable features  An application level module which will depend on above modules and will be auto-bootstrapped.
  21. 21. Controllers  Logic behind the view  Constructs the Model and publishes it to the View  Instantiate the ViewModel object or “$scope”  Set up the initial state of the $scope  Add behavior to $scope
  22. 22. Controllers
  23. 23. Writing Controllers
  24. 24. Writing Controllers
  25. 25. Writing Controllers
  26. 26. View  What the users see  HTML Template that is merged with the model and finally rendered into the browser DOM
  27. 27. Model  Data that is merged with the HTML template to produce views
  28. 28. Model  Data that is merged with the HTML template to produce views
  29. 29. Scope  An object that refers to the application’s data-model  $scope  Execution context for expression  Contains data, behaviors and other APIs to manage model mutation and events.
  30. 30. Scope : Scope Hierarchy
  31. 31. Scope : Scope Hierarchy Hello World Hello John Doe Hello Ramesh Hello Suresh
  32. 32. Scope : $watch  API to observe model mutation
  33. 33. Scope : $digest cycle  A cycle that processes all watcher functions  Asynchronous Dirty Checking cycle  Not to be called directly, instead we use $apply
  34. 34. Scope : $apply  Explicitly evaluate expressions in angular from outside angular  Executes $digest after expression evaluation
  35. 35. Scope : Events  $emit(‘somethingHappened’, args) – dispatches event upwards the scope  $broadcast(‘somethingHappened’, args) – dispatches event downwards the scope  $on(‘somethingHappened’, listenerFunction) – listens to event fires and executes listener function.
  36. 36. Filters  Formats the value of an expression for display  Change form of data  Return a subset of list according to some rule
  37. 37. Filters
  38. 38. Filters : Custom
  39. 39. Filters : Custom
  40. 40. Services  Injectable objects that can be used to organize and share code and functions across the application  Could be used to share utility functions  Angular provides useful services like $http to make AJAX requests  We can also make custom services
  41. 41. Services
  42. 42. Directives  Coolest feature of angular js  Markers on DOM elements (attributes, element names, class names, comment) that attach specified behaviors to that DOM element, or even transform the element  Superpowers for your DOM
  43. 43. Directives : In-built directives  Ng-app  Ng-bind  Ng-model  Ng-class  Ng-controller  Ng-show /Ng-Hide  Ng-if  Ng-switch
  44. 44. Directives : Custom Directives
  45. 45. Directives : Custom Directives
  46. 46. Directives : Custom Directives
  47. 47. That’s All For Today!!  Routing using angular-ui-router  Scope Life Cycle  $resource  Services/Factories/Providers  Ng-include and $templateCache  Custom Directives
  48. 48. One more thing…
  49. 49. AYUSH SHRESTHA fb.me/ShresthaAayush @AayushShrestha +AayushShresthaOriginal aayush@nLocate.com aayushonweb@gmail.com

×