angularjs architecture
TRANSCRIPT
AngularJS ArchitectureMichael He
Good Architecture
• Between each 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.
Actually, Most of the 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)
How to do the architecture
Look at what we need
Look at what we have
Make the decision about what we can do.
Let check we have in the AngularJS for Architect
1. Config (Blueprint)
Define everything for the system.
2. routing system (Map)
Root
Spot
TripDay
Help you find the place you want to go.
3. Page (Room)
Define how the room look like, How many things in there (Template) How the room functioning (Controller)
4. Directive (Component)
Define how the component look like (Template) What’s the function of it. (Controller)
5. Service (Company or GOV)
Service Name Service Content
TV service Provide TV program
Internet service Provide Internet
Gas service Provide Gas
… …
6. Filter(Decorates)
Make the room(page) looks better, hide those ugly stuff. View Helpers.
7. Event (Phone call)
Most useful way to communicate between Components, without dependency.
Open Internet >
< OK, Done Sir
8. Model?• In AngularJS 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.
In the Real Project
/trips
/new
ItinerarySpot ListSearch Box
Routing
Page (Template + C
ontroller)
Directive
Service
Itinerary Data Sharing
Spot Searching
Itinerary Saving
Filter
Message
Message
Recenter
Add Spot to Itinerary
Talk
ItinerarySpot ListSearch Box
Page (Template + C
ontroller)
Sharing Data Between them
• Send Message by event.
• Use Service, it’s Singleton so you need to clean the data manually. (Tip: scope $destroy)
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
We are not using• 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.)
More?Please go to http://blog.memoryforcer.com