Angular patterns
Download as PPTX, PDF3 likes213 views
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.
![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]](https://image.slidesharecdn.com/angularpatterns-170424070720/85/Angular-patterns-5-320.jpg)
Angular patterns
- 1. PREM KUMAR M Email: [email protected] 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]
- 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
- 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.
- 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