โครงสร้างโฟลเดอร์ AngularJS [ปิด]

คุณจัดวางโครงสร้างโฟลเดอร์สำหรับแอปพลิเคชัน AngularJS ขนาดใหญ่และปรับขนาดได้อย่างไร

จัดเรียงตามประเภท

ทางด้านซ้ายเรามีแอพที่จัดเรียงตามประเภท ไม่เลวร้ายเกินไปสำหรับแอปขนาดเล็ก แต่ที่นี่คุณสามารถเริ่มเห็นได้ว่ามันยากที่จะหาสิ่งที่คุณกำลังมองหา เมื่อฉันต้องการค้นหามุมมองเฉพาะและตัวควบคุมมุมมองเหล่านั้นจะอยู่ในโฟลเดอร์อื่น มันเป็นการเริ่มต้นที่ดีถ้าคุณไม่แน่ใจว่าจะจัดระเบียบรหัสได้อย่างไรเพราะมันค่อนข้างง่ายที่จะเปลี่ยนไปใช้เทคนิคทางด้านขวา: โครงสร้างโดยคุณสมบัติ

จัดเรียงตามคุณสมบัติ (ที่ต้องการ)

ด้านขวาของโปรเจคถูกจัดเรียงตามคุณสมบัติ มุมมองเลย์เอาต์และตัวควบคุมทั้งหมดไปที่โฟลเดอร์เลย์เอาต์เนื้อหาของผู้ดูแลระบบจะอยู่ในโฟลเดอร์ผู้ดูแลระบบและบริการที่ใช้โดยพื้นที่ทั้งหมดจะอยู่ในโฟลเดอร์บริการ แนวคิดในที่นี้คือเมื่อคุณกำลังมองหารหัสที่ทำให้ฟีเจอร์ทำงานได้จะอยู่ในที่เดียว บริการมีความแตกต่างกันเล็กน้อยเนื่องจากบริการเหล่านี้มีคุณสมบัติมากมาย ฉันชอบสิ่งนี้เมื่อแอปของฉันเริ่มเป็นรูปเป็นร่างเพราะมันง่ายต่อการจัดการสำหรับฉัน

โพสต์บล็อกที่เขียนดี: http://www.johnpapa.net/angular-growth-structure/

แอปตัวอย่าง: https://github.com/angular-app/angular-app

หลังจากสร้างบางแอปพลิเคชั่นบางตัวใน Symfony-PHP,. NET MVC บางตัว, ROR บางตัวฉันได้พบว่าวิธีที่ดีที่สุดสำหรับฉันคือการใช้Yeoman.ioกับเครื่องกำเนิด AngularJS

นั่นเป็นโครงสร้างที่ได้รับความนิยมและเป็นที่นิยมที่สุดและได้รับการดูแลรักษาอย่างดีที่สุด

และที่สำคัญที่สุดโดยการรักษาโครงสร้างนั้นจะช่วยให้คุณแยกรหัสฝั่งไคลเอ็นต์ของคุณและทำให้ไม่เชื่อเรื่องเทคโนโลยีฝั่งเซิร์ฟเวอร์ (โครงสร้างโฟลเดอร์ที่แตกต่างกันทุกชนิด

ด้วยวิธีนี้คุณสามารถทำซ้ำและนำโค้ดของคุณและผู้อื่นมาใช้ซ้ำได้ง่าย

นี่คือก่อนที่จะทำเสียงฮึดฮัด: (แต่ใช้เครื่องกำเนิดไฟฟ้าแบบเสรีอย่าเพิ่งสร้างมัน!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

และหลังจากทำเสียงฮึดฮัด (concat, uglify, rev, ฯลฯ ... ):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

ฉันชอบรายการนี้เกี่ยวกับโครงสร้าง angularjs

มันเขียนโดยหนึ่งในนักพัฒนา angularjs ดังนั้นควรให้ข้อมูลเชิงลึกที่ดีแก่คุณ

นี่คือข้อความที่ตัดตอนมา:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

นอกจากนี้ยังมีวิธีการจัดระเบียบโฟลเดอร์โดยโครงสร้างของเฟรม แต่โดยโครงสร้างของฟังก์ชันของแอปพลิเคชัน มีแอพพลิเคชั่นเริ่มต้น Github Angular / Express ที่แสดงสิ่งนี้เรียกว่าแองกูลาร์

ฉันใช้งานแอพเชิงมุมที่สามของฉันและโครงสร้างโฟลเดอร์ได้รับการปรับปรุงทุกครั้ง ตอนนี้ฉันรักษาความเรียบง่ายไว้แล้ว

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

ฉันพบว่าดีสำหรับแอปเดียว ฉันยังไม่ได้มีโครงการจริงๆ