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: 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]
- 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