Architecture for single page application (JavaScript)

Question

I wanted to understand the overall architecture for designing single page application (mainly through JavaScript)

Let\'s say I have a login page (Usernam/Password) a

Answer 1

You need index.html page like below

  
    
 
      
 ... 
 
      
 ... 
      
 ... 
      
 ... 

     

  
  

When application loaded, all views (divs with view class) are hidden (display:none) except login view. Login view should have login form on it, when it submitted by user it initiates ajax request. When ajax successful application hides login page and displays home page instead.

You may structure your code next way. For every module you will have model, view and controller files.

For example, for login module you may have loginModel.js, loginView.js, loginCtrl.js. In model file you will connect to DB and check credentials provided. In view you will bind listeners to controls. In controller you will react to user pressed Submit button.