in each page we have <script></script> tags if we need module
so each page needs to load all scripts that pages need
So it spend a lot of time and make people see loading bar as long as script are loaded
In present. web page trend is changing step by step
today i want to share how to efficiently make big single webpage with angularJS and RequireJS
First Version
This Structure of this project is below screen shots
1. Angualr MVC Model
- explain
1. view: view is only are consis of html files using angular js tags
2. router : this is routing url to which html should be loaded
3. Controllers : this controlls services and logic after views are loaded
4. service : these are functions that load json datas from server using ajax
2. RequireJS Dependency
- explain
1. angular : this is angular library
2. angular-route : this is angular plugin,
once angular under 1.0.8? I'm not sure angular library contatin route
3. angular-start : this defines route module
4. controller-start : this defines controllers
5. route-start : this defines url routing patterns
6. service-start : this defines services related to this project
3. source Review
3-1. this project tree structure
3-2. main.html
- <div ng-view></div> is the frame that html pages are changed into
- <script data-main="js/main" src="js/libs/require.js" ></script>
first main.js will be called
3-3 main.js
3-4 angular-start(angular-init.js)
- define angular
3-5 controller-start(controller-init.js)
- you can use static controller and dynamic controller
static controller : router will directly mapping html
dynamic controllers : router will mapping using url patterns
3-6 router-start(routing.js)
/view/:id is mapped with static controller
/:cate/:sub is mapped width dynamic contollers
3-7 service-start(service-init.js)
4. get Service from controller
mailListController.js
- getting mailService from services tray
- using mailService function
5. I cannot fully explain all source
later I will share my Project samples
if you need right now reply and write you email
Have a good job
