大部分的項目結構是以 directives , service, controller 為基礎來搭建的項目架構的，但這里更偏向于以應用場景來進行項目架構，因此這里的目錄結構可能與您之前遇到的結構不同，如果有不喜歡的小伙伴請只看技術不討論架構，如果覺得好的可以在這個的架構基礎上提出改進意見

項目描述

項目以一個聊天室為場景的應用，實現用戶列表，對話，朋友圈，基本設置等基礎功能

項目拓展

實現聊天室功能后，接入電商模式，實現產品列表，下單，支付

項目結構

本項目以 angularjs 為核心框架，通過 gulp+webpack 進行打包和發布

結構如下

• project (項目目錄)

  • dist （發布目錄）
  • node_modules （NODE 模塊）
  • src （源碼目錄）
    
    • app （應用目錄）
      
      • images （圖片目錄）
      • scss （scss 樣式目錄）
        
        • mixin
          
          • _button.scss （mixin 文件）
        • app.scss （scss 統一調用文件）
      • pages （頁面目錄）
        
        • home （主頁面）
        • chat （聊天頁面）
        • contact （通訊錄）
        • circle （圈子）
          
          • circle.js
          • circle.html
        • setting （基本設置）
      • sections （塊目錄）
        
        • public
          
          • footer.js
          • footer.html
      • services （factory,service,provider）
        
        • user
          
          • user.js
        • func (通用函數 service 目錄)
          
          • base64.js
          • jssdk.js
          • md5.js
      • filters （過濾器目錄）
        
        • range
          
          • range.js
      • components （組件目錄）
        
        • alert
          
          • alert.js
          • alert.html
        • button
          
          • button.js
          • button.html
        • …
      • font （字體源文件目錄）
        
        • scss
        • svg
    • index.html （入口文件）

  期望，麻雀雖小，五臟俱全，希望這樣的一個結構能讓開發人員更清晰的知道每個應用場景所在的工作目錄，以期達到高效便捷開發方式。

補充：項目準備在 GIT@OSC 開源，并且會跟著博文一步步的往下完善項目內容，因為不是事先準備，過程中肯定會有錯誤出現，因此希望小伙伴們多 FORK 以及 PUSH 內容上來（僅合并能自動合并的部分），后臺 REST 部分，準備采用 YII2.0 框架，不熟悉的小伙伴也可以不用管他，這是后端的事，搞前端的小伙伴只需要處理好數據展示即可，這里盡量采用 MOCK 數據來模擬

總結

以上是生活随笔為你收集整理的Angularjs1.x 项目结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。