Understanding angular js
Download as PPTX, PDF•54 likes•5,424 views
This document provides an overview of AngularJS, including its core features and concepts. It discusses how AngularJS is a client-side JavaScript framework that uses MVC architecture. Key points covered include two-way data binding, templates, dependency injection, modules, controllers, views, models, scopes, filters, services, and directives. Custom directives and their creation are demonstrated. The document aims to give attendees an introduction to AngularJS and its basic building blocks.
Understanding angular js
- 2. AYUSH SHRESTHA Chief of Design – nLocate Co-Founder – lishn.com
- 4. 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.
- 8. 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
- 9. 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.
- 10. 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
- 11. 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
- 13. 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)
- 14. Templates ng-src
- 15. 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)
- 17. Directives Extend HTML vocabulary to give them superpowers In-built and custom directives
- 18. Core Concepts of Angular JS
- 19. 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)
- 20. Modules
- 21. Modules
- 22. Modules
- 23. Modules
- 24. 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.
- 25. 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
- 26. Controllers
- 30. View What the users see HTML Template that is merged with the model and finally rendered into the browser DOM
- 31. Model Data that is merged with the HTML template to produce views
- 32. Model Data that is merged with the HTML template to produce views
- 33. 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.
- 34. Scope : Scope Hierarchy
- 35. Scope : Scope Hierarchy Hello World Hello John Doe Hello Ramesh Hello Suresh
- 36. Scope : $watch API to observe model mutation
- 37. Scope : $digest cycle A cycle that processes all watcher functions Asynchronous Dirty Checking cycle Not to be called directly, instead we use $apply
- 38. Scope : $apply Explicitly evaluate expressions in angular from outside angular Executes $digest after expression evaluation
- 39. 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.
- 40. Filters Formats the value of an expression for display Change form of data Return a subset of list according to some rule
- 41. Filters
- 42. Filters : Custom
- 43. Filters : Custom
- 44. 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
- 45. Services
- 46. 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
- 47. Directives : In-built directives Ng-app Ng-bind Ng-model Ng-class Ng-controller Ng-show /Ng-Hide Ng-if Ng-switch
- 48. Directives : Custom Directives
- 49. Directives : Custom Directives
- 50. Directives : Custom Directives
- 51. That’s All For Today!! Routing using angular-ui-router Scope Life Cycle $resource Services/Factories/Providers Ng-include and $templateCache Custom Directives
- 52. One more thing…
Editor's Notes
- #4: 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.