Download as PDF, PPTX
Uploaded byMichael He
Angularjs architecture
This document discusses the architecture of AngularJS applications. It outlines several key components of AngularJS architecture: 1. Configurations define everything needed for the system using a blueprint approach. 2. The routing system acts like a map to help users navigate between different routes, spots, trips, and days. 3. Pages define templates and controllers to determine how each room (page) looks and functions. 4. Directives define templates and controllers for reusable components. 5. Services provide reusable functionality like data access across the application similarly to companies or government agencies. 6. Filters decorate pages by hiding unwanted content to improve visuals.
Angularjs architecture
- 1.
- 2. Good Architecture • Betweeneach other has good interface design. • Very easy to understand the function. • You can add more to make even bigger system. • After having rule, I never worried about the compatibility. • Visualisable, it’s easiest way for human to understand.
- 3. Actually, Most ofthe situation • What shall I put my code? (C) • How to understand this module? (R) • How can I modify this part? (U) • How can I remove this function? (D)
- 4. How to dothe architecture
- 5. Look at whatwe need
- 6. Look at whatwe have
- 7. Make the decisionabout what we can do.
- 8. Let check wehave in the AngularJS for Architect
- 9. 1. Config (Blueprint) Defineeverything for the system.
- 10. 2. routing system(Map) Root Spot Trip Day Help you find the place you want to go.
- 11. 3. Page (Room) Definehow the room look like, How many things in there (Template) How the room functioning (Controller)
- 12. 4. Directive (Component) Definehow the component look like (Template) What’s the function of it. (Controller)
- 13. 5. Service (Companyor GOV) Service Name Service Content TV service Provide TV program Internet service Provide Internet Gas service Provide Gas … …
- 14. 6. Filter(Decorates) Make theroom(page) looks better, hide those ugly stuff. View Helpers.
- 15. 7. Event (Phonecall) Most useful way to communicate between Components, without dependency. Open Internet > < OK, Done Sir
- 16. 8. Model? • InAngularJS there is no model. • Model in ROR, just a class mapped data in database. • In front end side, model will be mapping the data from JSON to object to a Class. • I don’t like ngResource to mapping the API path only, when you Get or Post data you won’t have a callback to be able to process it.
- 17. In the RealProject
- 18. /trips /new ItinerarySpot List Search Box Routing Page(Template+Controller) Directive Service ItineraryData Sharing Spot Searching Itinerary Saving Filter Message Message Recenter Add Spot to Itinerary Talk
- 19. ItinerarySpot List Search Box Page(Template+Controller) SharingData Between them • Send Message by event. • Use Service, it’s Singleton so you need to clean the data manually. (Tip: scope $destroy)
- 20. File Structure • Principle:You can find your file very fast. • /trips/new /app/modules/trips/controllers/new.js.coffee • Spot list panel /app/modules/trips/directives/spot_list_panel.js.coffee • Trip Manager (manager we say it used for data sharing) /app/services/trip_manager.js.coffee • UI-Router Config /app/configs/routes.js.coffee
- 21. We are notusing • Angular modularization (It’s good way to force developer to think about the module independent. But it’s much more complicated many situations. For small or middle project no need to use it.) • require.js (we use assets pipeline to put all file in to one, super simple, no need to manage the complicated loading dependency.) • Pure Javascript (We use coffeescript to avoid many javascript traps, also much simpler and smaller.)
- 22. More? Please go tohttp://blog.memoryforcer.com