This document provides an overview of AngularJS including its advantages, uses, required tools, architecture, key concepts like directives, filters, dependency injection and services. AngularJS is a JavaScript MVC framework created by Google that focuses on the HTML side of web apps. It enhances HTML with directives, templates and bindings and is well-suited for single page apps. Development requires a code editor, browser and optional tools like NodeJS, GitHub, NPM and Gulp. The document outlines Angular's modular structure and core components like controllers, modules and scopes.

1. PREM KUMAR M
Email: mpremkumardpk@gmail.com
Github Link:
https://github.com/prem2k17/angularPatterns

2. What is AngularJS ?
• AngularJS is a JavaScript MVC Framework created by Google.
• Focus more on HTML side of web apps.
• It deals everything within the browser, making it an ideal
partner with any server technology
• Angular supports hundreds of JavaScript components to
integrate.

3. Advantages
• Enhances HTML by attaching directives, custom tags, attributes,
expressions, templates within HTML
• Good for Single Page Applications (SPA)
• Easy Data binding, Two way data binding
• Re-usable Components
• Dependency Injection
• E2E Testing, Unit testing is easier

4. Where to use AngularJS ?
• Single Page Applications
• Dynamic Web Applications
• RESTful applications
• CRUD based applications
• Mobile applications

5. Tools Required for
development
• Eclipse or Visual studio code (Code Editor)
• Google Chrome browser (Recommended browser)
• NodeJS (For client server) [Optional]
• GitHub (For accessing external repositories) [Optional]
• NPM, Bower (For managing 3rd party resources) [Optional]
• Gulp (Task runner) [Optional]

6. Framework Architecture

8. LIFT Guideline
Why LIFT ?
Provides a consistent structure that scales well, is modular,
and makes it easier to increase developer efficiency by finding
code quickly.
L – Locating our code easy
I – Identify code at glance
F – Flat structure as long as we can
T – Try to stay dry

9. Application Structure
Folders by Type Folders by Feature

10. Dependency Injection
The process of injecting dependent functionality into modules at
run time.
Using an "constructor function".
using an "injectable factory method"

11. Modules

13. Scopes and RootScopes
• Scopes : Accessible inside only particular controller
• RootScopes : Accessible through any controller

14. Controllers
Controllers are the view handlers. Binds data into view using model

15. Services

16. Factories

17. Services Vs Factory

18. Directives
• Markers on a DOM element (such as arrtibute, element name,
comment or css class) that tells angularJS HTML compiler
($compile) to attach a specific behaviour
• It works via event listeners
• It also capable to transform the DOM element and its children.

20. Filters
• Filters format the value of an expression for display to the user
• They can be used in view templates, controllers or services.

21. Constants Vs Values

22. Angular Events

23. Dynamic views

24. UI Routing
• UI-Router is a routing framework for AngularJS built by the Angular
Team.
• It changes your application views based on state of the
application and not just the route URL.

25. Sample UI Routing template

26. API call using Angular Resource
$resource was meant to retrieve data from an endpoint,
manipulate it and send it back

27. Angular Resource Methods