Download - Understanding angular js
![Page 1: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/1.jpg)
UNDERSTANDING
KTMJS DEVELOPERS MEETUPEPISODE 2
![Page 2: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/2.jpg)
AYUSH SHRESTHA
Chief of Design – nLocateCo-Founder – lishn.com
![Page 3: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/3.jpg)
![Page 4: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/4.jpg)
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.
![Page 5: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/5.jpg)
![Page 6: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/6.jpg)
![Page 7: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/7.jpg)
![Page 8: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/8.jpg)
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
![Page 9: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/9.jpg)
Core Features of Angular JSDISCLAIMER : 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.
![Page 10: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/10.jpg)
Two-way Data BindingONE WAY DATA BINDING TWO WAY DATA BINDING
VIEW
TEMPLATE Model
One-time
Merge
TEMPLATE
VIEW
Model
CONTINUOUS UPDATE
Change in viewUpdates model
Change in modelUpdates view
![Page 11: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/11.jpg)
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
![Page 12: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/12.jpg)
Templates
Static Template
Dynamic Data
Final View
![Page 13: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/13.jpg)
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)
![Page 14: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/14.jpg)
Templates
ng-src
![Page 15: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/15.jpg)
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)
![Page 16: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/16.jpg)
Dependency Injection
![Page 17: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/17.jpg)
Directives Extend HTML vocabulary to give
them superpowers
In-built and custom directives
![Page 18: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/18.jpg)
Core Concepts of Angular JS
![Page 19: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/19.jpg)
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)
![Page 20: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/20.jpg)
Modules
![Page 21: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/21.jpg)
Modules
![Page 22: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/22.jpg)
Modules
![Page 23: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/23.jpg)
Modules
![Page 24: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/24.jpg)
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.
![Page 25: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/25.jpg)
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
![Page 26: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/26.jpg)
Controllers
![Page 27: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/27.jpg)
Writing Controllers
![Page 28: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/28.jpg)
Writing Controllers
![Page 29: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/29.jpg)
Writing Controllers
![Page 30: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/30.jpg)
View What the users see
HTML Template that is merged with the model and finally rendered into the browser DOM
![Page 31: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/31.jpg)
Model Data that is merged with the HTML template to produce
views
![Page 32: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/32.jpg)
Model Data that is merged with the HTML template to produce
views
![Page 33: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/33.jpg)
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.
![Page 34: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/34.jpg)
Scope : Scope Hierarchy
![Page 35: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/35.jpg)
Scope : Scope HierarchyHello WorldHello John DoeHello RameshHello Suresh
![Page 36: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/36.jpg)
Scope : $watch API to observe model mutation
![Page 37: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/37.jpg)
Scope : $digest cycle A cycle that processes all watcher functions
Asynchronous Dirty Checking cycle
Not to be called directly, instead we use $apply
![Page 38: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/38.jpg)
Scope : $apply Explicitly evaluate expressions in angular from outside
angular
Executes $digest after expression evaluation
![Page 39: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/39.jpg)
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.
![Page 40: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/40.jpg)
Filters Formats the value of an expression for display
Change form of data
Return a subset of list according to some rule
![Page 41: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/41.jpg)
Filters
![Page 42: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/42.jpg)
Filters : Custom
![Page 43: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/43.jpg)
Filters : Custom
![Page 44: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/44.jpg)
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
![Page 45: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/45.jpg)
Services
![Page 46: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/46.jpg)
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
![Page 47: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/47.jpg)
Directives : In-built directives Ng-app
Ng-bind
Ng-model
Ng-class
Ng-controller
Ng-show /Ng-Hide
Ng-if
Ng-switch
![Page 48: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/48.jpg)
Directives : Custom Directives
![Page 49: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/49.jpg)
Directives : Custom Directives
![Page 50: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/50.jpg)
Directives : Custom Directives
![Page 51: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/51.jpg)
That’s All For Today!! Routing using angular-ui-router
Scope Life Cycle
$resource
Services/Factories/Providers
Ng-include and $templateCache
Custom Directives
![Page 52: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/52.jpg)
One more thing…
![Page 53: Understanding angular js](https://reader035.vdocuments.mx/reader035/viewer/2022062523/58f9a8d3760da3da068b6838/html5/thumbnails/53.jpg)
AYUSH SHRESTHA
fb.me/ShresthaAayush@AayushShrestha+AayushShresthaOriginal
[email protected]@gmail.com