1. Introduction to Angular
1

2. Who uses Angular ?
• PayPal, The Home Depot, Under Armor, JetBlue and many more.
• Google sites : Google express, Google cloud platform etc.
https://www.madewithangular.com/#/
©2015 PayPal Inc. Confidential and proprietary. 2

3. Why angular ?
• Data-Binding
• DOM Manipulation
• MVW Architecture / Modules / Dependency Injection
• REST Easy
• Easy to test (Karma.js)
• Single Page App
• Developed by Google
©2015 PayPal Inc. Confidential and proprietary. 3

4. What is angular ?
• AngularJS is a client-side web application framework.
• It lets you use good old HTML and lets you extend HTML’s syntax to express your
application’s components clearly.
• It automatically synchronizes data from your UI (view) with your JavaScript objects
(model) through 2-way data binding.
• To help you structure your application better and make it easy to test, AngularJS teaches
the browser how to do dependency injection and inversion of control.
©2016 PayPal Inc. Confidential and proprietary. 4

5. AngularJS components
• Module
• Directive
• Controllers
• Filters
• Services
©2015 PayPal Inc. Confidential and proprietary. 5

6. Module
• Where we write pieces of our Angular application.
• Makes our code more maintainable, testable, and readable.
• Where we define dependencies for our app.
Example :
https://github.com/hitesh00025/Angular-Fundamentals/blob/master/Angular%20Fundamentals/hello-angular.html
©2015 PayPal Inc. Confidential and proprietary. 6

7. Controller
• Controllers are where we define our app’s behavior by defining functions and values.
©2015 PayPal Inc. Confidential and proprietary. 7

8. Directives
• HTML annotations that trigger JavaScript behaviors
©2015 PayPal Inc. Confidential and proprietary. 8

9. Custom Directives
https://github.com/hitesh00025/Angular-Fundamentals/blob/master/Angular%20Fundamentals/hello-directives.html
©2015 PayPal Inc. Confidential and proprietary. 9

10. Filters
• Filters are use for formatting input data or can be used for validations.
©2015 PayPal Inc. Confidential and proprietary. 10

11. Single Page App
• Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update
that page as the user interacts with the app.
https://github.com/hitesh00025/Angular-Fundamentals/blob/master/Angular%20Fundamentals/hello-spa.html
©2015 PayPal Inc. Confidential and proprietary. 11

12. Two way data binding
• Data-binding in Angular apps is the automatic synchronization of data between the model and view
components.
• The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your
application.
• The view is a projection of the model at all times. When the model changes, the view reflects the change, and
vice versa.
• https://docs.angularjs.org/guide/databinding
https://github.com/hitesh00025/Angular-Fundamentals/blob/master/Angular-Fundamentals/twoWayDataBinding.html
©2015 PayPal Inc. Confidential and proprietary. 12

13. Angular Services
• Angular services are substitutable objects that are wired together using dependency injection (DI). You can use
services to organize and share code across your app.
• Angular services are:
• Lazily instantiated – Angular only instantiates a service when an application component depends on it.
• Singletons – Each component dependent on a service gets a reference to the single instance generated by the
service factory.
https://github.com/hitesh00025/Angular-Fundamentals/blob/master/Angular%20Fundamentals/angularServices.html
©2015 PayPal Inc. Confidential and proprietary. 13

14. Angular Demo
https://github.com/hitesh00025/Sample-Angular-App
©2015 PayPal Inc. Confidential and proprietary. 14