PowerPoint Presentation

UNDERSTANDING

KTMJS DEVELOPERS MEETUPEPISODE 2

AYUSH SHRESTHAChief of Design nLocateCo-Founder lishn.com

It all started because we wanted a better User Experience.We wanted dynamic things without having to refresh the page.Angular JS is a product of that want.3What 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.

What is Angular JS?Client-side JS Framework for SPANot just a single piece of a puzzle but full client side solutionModel-View-Controller frameworkFor front-end of your applicationSteroids for your UICore 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.Two-way Data BindingOne way data bindingTwo way data bindingVIEWTEMPLATEModelOne-timeMergeTEMPLATEVIEWModelCONTINUOUS UPDATEChange in viewUpdates modelChange in modelUpdates view10MVC FrameworkThe whole application has 3 major components Model, View and ControllerModel is the data layerView is the UI layerController is the logic layerActually, MVVM (Model-View-ViewModel) architectureTemplatesTemplatesTemplates are plain old HTMLExtended 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)

Templates

ng-srcDependency InjectionBuilt-in Dependency Injection SubsystemEasier to understand and testModular DevelopmentJust ask for things that you want to use (built-in or custom services)Dependency Injection

DirectivesExtend HTML vocabulary to give them superpowersIn-built and custom directives

Core Concepts of Angular JSModulesContainer for different parts of your application controllers, services, filters, etc.Declaratively specify how an application is to be bootstrappedBuilds reusable component packagesCan be loaded in any order (or even in parallel)Modules

Modules

Modules

Modules

ModulesA module for each featureA module for reusable featuresAn application level module which will depend on above modules and will be auto-bootstrapped.

ControllersLogic behind the viewConstructs the Model and publishes it to the ViewInstantiate the ViewModel object or $scopeSet up the initial state of the $scopeAdd behavior to $scope

Controllers

Writing Controllers

Writing Controllers

Writing Controllers

ViewWhat the users seeHTML Template that is merged with the model and finally rendered into the browser DOMModelData that is merged with the HTML template to produce views

ModelData that is merged with the HTML template to produce views

ScopeAn object that refers to the applications data-model$scopeExecution context for expressionContains data, behaviors and other APIs to manage model mutation and events.Scope : Scope Hierarchy

Scope : Scope Hierarchy

Hello WorldHello John DoeHello RameshHello SureshScope : $watchAPI to observe model mutation

Scope : $digest cycleA cycle that processes all watcher functions Asynchronous Dirty Checking cycleNot to be called directly, instead we use $apply Scope : $applyExplicitly evaluate expressions in angular from outside angularExecutes $digest after expression evaluation

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.FiltersFormats the value of an expression for displayChange form of dataReturn a subset of list according to some rule

Filters

Filters : Custom

Filters : Custom

ServicesInjectable objects that can be used to organize and share code and functions across the applicationCould be used to share utility functionsAngular provides useful services like $http to make AJAX requestsWe can also make custom servicesServices

DirectivesCoolest feature of angular jsMarkers on DOM elements (attributes, element names, class names, comment) that attach specified behaviors to that DOM element, or even transform the elementSuperpowers for your DOM

46Directives : In-built directivesNg-appNg-bindNg-modelNg-classNg-controllerNg-show /Ng-HideNg-ifNg-switch47Directives : Custom Directives

48Directives : Custom Directives

49Directives : Custom Directives

50Thats All For Today!!Routing using angular-ui-routerScope Life Cycle$resourceServices/Factories/ProvidersNg-include and $templateCacheCustom Directives51One more thing

52

AYUSH SHRESTHAfb.me/ShresthaAayush@AayushShrestha+AayushShresthaOriginalaayush@nLocate.comaayushonweb@gmail.com53