My Blog List

Thursday, January 23, 2014

Big Hompage with Angular and RequireJS (MVC Pattern)

In the past, usually we made webpage multipages
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

No comments:

Post a Comment