ng best practices

โครงการนี้มีวัตถุประสงค์เพื่อเป็นตัวอย่างการสนับสนุนของการสอนที่เดินคุณผ่านแนวทางปฏิบัติที่ดีที่สุดของการพัฒนาส่วนหน้า (เว็บ/มือถือ) ด้วยตัวอย่างคอนกรีตตามโครงการเชิงมุม

หากต้องการดู การสอน มาโดยเร็วที่สุดคุณสามารถลงคะแนนได้ที่นี่

การแนะนำ

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

ฉันสังเกตเห็นว่าทุกครั้งหนึ่งในส่วนที่ยากที่สุดเมื่อเปิดตัวผลิตภัณฑ์คือการกำหนดแนวทางปฏิบัติที่ดีที่สุดและค้นหาเครื่องมือที่ดีที่สุดที่จะวางเวิร์กโฟลว์การพัฒนา

ดังนั้นฉันจึงตัดสินใจที่จะสร้างโครงการนี้ให้มีความเข้มข้นของแนวปฏิบัติที่ดีที่สุดพร้อมที่จะใช้นอกกรอบและอาจช่วยนักพัฒนาและนักเทคโนโลยีชั้นนำ/สถาปัตยกรรมทางเทคนิค-สถาปัตยกรรมวันและแม้กระทั่งเดือนของการทำงานหนักเพื่อค้นหาและกำหนดเวิร์กโฟลว์ที่ดีที่สุดสำหรับโครงการของพวกเขา

โครงการ/บทช่วยสอนหลักนี้เป็นแนวทางปฏิบัติที่ดีที่สุดในการพัฒนา ดังนั้นสำหรับการเริ่มต้นจะไม่รวมเนื้อหาใด ๆ ที่เกี่ยวข้องกับการรวมหรือการปรับใช้แอปพลิเคชันอย่างต่อเนื่อง

ข้อสังเกต 1: แนวทางปฏิบัติที่ดีที่สุดจำนวนมากที่มีอยู่ในโครงการนี้ดังที่ได้กล่าวไว้ก่อนหน้านี้การพัฒนาทั่วไปเพื่อการพัฒนาส่วนหน้าและแม้กระทั่งการพัฒนาโดยทั่วไป (ไม่เพียง แต่ส่วนหน้า) ดังนั้นแม้ว่าคุณจะไม่ได้ใช้ Angular ในโครงการของคุณคุณสามารถเดินผ่านได้เพื่อรับแนวคิดที่น่าสนใจ

ข้อสังเกต 2: คุณสามารถเห็นเนื้อหาของโครงการที่แตกต่างกันมุ่งมั่นที่จะมีความคิดเกี่ยวกับวิวัฒนาการของโครงการและขั้นตอนในการเพิ่ม/รวมเครื่องมือเฉพาะห้องสมุดหรือรูปแบบเฉพาะในโครงการ

ตัวอย่างแนวทางปฏิบัติที่ดีที่สุดเชิงมุม

โครงการนี้สร้างขึ้นด้วย Angular CLI เวอร์ชัน 7.3.1

สำหรับโครงการนี้ฉันใช้เส้นด้ายเป็นหลัก แต่คุณสามารถเรียกใช้สคริปต์/คำสั่งเดียวกันโดยใช้ NPM

ตัวอย่างเช่นในการเริ่มโครงการโดยใช้ yarn คุณเรียกใช้ yarn start ในการทำสิ่งเดียวกันโดยใช้ npm คุณสามารถเรียกใช้ npm run start

ก่อนที่คุณจะเริ่ม: ข้อกำหนดเบื้องต้น

เพื่อให้สามารถเปิดตัวโครงการนี้คุณต้องติดตั้ง:

• node.js (บังคับ)
• NPM: สามารถติดตั้งด้วย nodejs (บังคับ)
• เส้นด้าย: หากคุณต้องการใช้แทน npm เพื่อเรียกใช้สคริปต์ที่แตกต่างกัน (ไม่จำเป็น)
• ตัวเลือก IDE หรือรหัสของตัวเลือกของคุณ ฉันสามารถแนะนำให้คุณใช้รหัส VS ซึ่งฟรีและใช้งานได้จริงสำหรับการพัฒนาส่วนหน้าและมาพร้อมกับปลั๊กอินที่มีประโยชน์มากมาย คุณอาจต้องการใช้ WebStorm ซึ่ง ไม่ฟรี ในเวลาเดียวกันคุณมีการทดลองใช้ฟรี 30 วันเพื่อทดสอบ มีตัวเลือกอื่นซึ่งเป็นอะตอม ดังนั้นจึงขึ้นอยู่กับคุณที่จะเลือกเครื่องมือที่เหมาะกับคุณมากที่สุด

ก่อนที่จะสามารถเริ่มโครงการได้คุณต้องติดตั้งการพึ่งพา/ไลบรารีที่แตกต่างกัน ในการดำเนินการดังกล่าว:

 # if npm
npm install

# if yarn
yarn

เครื่องมือเสริม

นี่คือรายการเครื่องมือเสริมที่คุณอาจต้องการโดยทั่วไปสำหรับการพัฒนาโครงการของคุณ:

• GIT: สำหรับการควบคุมแหล่งที่มาและสามารถแชร์รหัสกับเพื่อนร่วมงานคนอื่น ๆ หรือเพียงแค่จัดเก็บรหัสของคุณและสามารถเข้าถึงประวัติของวิวัฒนาการโครงการของคุณ
• Sourcetree: เครื่องมือที่ใช้งานง่ายและเป็นเครื่องมือในการจัดการการควบคุมแหล่งที่มาของคุณ

กิ่งก้าน

สาขาหลักที่คุณสามารถค้นหารหัสการทำงานและการทดสอบล่าสุดคือหลัก

คุณสามารถติดตามการกระทำและการพัฒนาวันต่อวันในสาขาการพัฒนา

ระบบการติดแท็กจะมาพร้อมกับการอัพเกรดและการเผยแพร่โครงการที่แตกต่างกัน

เซิร์ฟเวอร์การพัฒนา

เรียกใช้ yarn start สำหรับเซิร์ฟเวอร์ dev ไปที่ http://localhost:4200/ แอพจะโหลดซ้ำโดยอัตโนมัติหากคุณเปลี่ยนไฟล์ต้นฉบับใด ๆ

การนั่งร้านรหัส

เรียกใช้ ng generate component component-name เพื่อสร้างส่วนประกอบใหม่ นอกจากนี้คุณยังสามารถใช้ ng generate directive|pipe|service|class|guard|interface|enum|module

สร้าง

เรียกใช้ yarn build เพื่อสร้างโครงการ สิ่งประดิษฐ์สร้างจะถูกเก็บไว้ใน dist/ Directory ใช้ธง --prod สำหรับการสร้างการผลิต

การทดสอบหน่วยรัน

ที่จริงแล้วโครงการที่สร้างขึ้นจากเชิงมุม-CLI เริ่มต้นใช้เครื่องมือคาร์มาสำหรับการทดสอบหน่วย ปัญหาเกี่ยวกับกรรม (อาจเป็นข้อได้เปรียบในบางกรณี) คือมันจำเป็นต้องเปิดเบราว์เซอร์เพื่อเรียกใช้การทดสอบซึ่งในหลายกรณีไม่จำเป็นและในเวลาเดียวกันขยายเวลาการดำเนินการทดสอบ นอกจากนี้คุณอาจมีการรวมการรวมเข้ากับกระบวนการพัฒนา/การจัดส่งของคุณอย่างต่อเนื่องซึ่งทำงานบนสภาพแวดล้อมที่คุณสามารถมีเบราว์เซอร์ได้

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

jest-preset-angular: ใช้เพื่อทำให้การกำหนดค่า jest ง่ายขึ้น เวอร์ชันที่ใช้จริงคือ 6.0.2 ดังนั้นเอกสารและการกำหนดค่าจะแตกต่างกันไปตามรุ่นอนาคตของไลบรารีนี้

เรียกใช้ yarn test:all เพื่อดำเนินการทดสอบหน่วยผ่าน JEST ในโครงการทั้งหมด

หากคุณต้องการเรียกใช้การทดสอบหน่วยในโครงการเฉพาะเช่นโครงการ connection เรียกใช้ yarn test:connection อย่าลืมเพิ่มสคริปต์ที่จำเป็นลงในไฟล์ package.json ของคุณใน addiion ไปยังไฟล์การกำหนดค่า jest ที่ตรงกันเพื่อให้สามารถเปิดการทดสอบบนไลบรารีใหม่ คุณสามารถนำตัวอย่างของวิธีการทำสำหรับไลบรารี connection

นอกจากนี้คุณยังสามารถเปิดตัวการทดสอบของคุณและดูการเปลี่ยนแปลงโดยการวิ่งสำหรับ yarn test:all:watch

VS CODE และ JEST DEBUG: หากคุณใช้ VS CODE คุณสามารถดีบั๊กการทดสอบหน่วยที่ใช้ JEST โดยเพิ่มไฟล์ launch.json ภายใต้โฟลเดอร์ .vscode ของคุณ (คุณสามารถค้นหาไฟล์ตัวอย่างใน repo จริง) ดีบักเกอร์จะใช้ตัวดีบักโหนดในตัว เอกสารที่สมบูรณ์ยิ่งขึ้นสามารถเป็นที่รักได้ที่นี่

การทดสอบแบบ end-to-end

เรียกใช้ yarn e2e เพื่อดำเนินการทดสอบแบบ end-to-end ผ่านไม้โปรแทรกเตอร์

การนำเข้า

หากเราต้องการนำเข้าส่วนประกอบจากไลบรารี connection เราสามารถใช้คำอธิบายประกอบ @connection

ตัวอย่าง: import { ConnectionModule } from '@connection' ;

นี่เป็นไปได้ด้วยการเพิ่มแอตทริบิวต์พา paths ไปยังไฟล์ tsconfig.json

 "compilerOptions" : {
    ...,
    "paths" : {
      "@connection" : [
        " projects/connection/src/public_api "
      ],
      ...
    },
    ...
}

หากเราต้องการเฉพาะเจาะจงมากขึ้นเกี่ยวกับเส้นทาง (ตัวอย่างเช่นในกรณีที่มีการพึ่งพาวงกลม) เราสามารถเพิ่มเส้นทางอื่นไปยังไฟล์ tsconfig.json เช่นติดตาม:

 "compilerOptions" : {
    ...,
    "paths" : {
      "@connection" : [
        " projects/connection/src/public_api "
      ],
      "@connection/*" : [
        " projects/connection/src/* "
      ]
      ...
    },
    ...
}

มันจะอนุญาตให้นำเข้าส่วนประกอบหรือฟังก์ชันการส่งออกเชิงมุมอื่น ๆ เช่นตัวอย่างต่อไปนี้:

ตัวอย่าง: import { ConnectionComponent } from '@connection/lib/modules/main/pages'; -

กระตวน

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

• CZ-CLI: เมื่อคุณยอมรับด้วยความมุ่งมั่นคุณจะได้รับแจ้งให้กรอกข้อมูลการกระทำใด ๆ ที่จำเป็นในเวลากระทำ

ใน package.json คุณเพิ่ม:

 " scripts " {
  "commit" : " git-cz " ,
  ...
}

ดังนั้นเมื่อคุณเรียก yarn commit ที่ใช้ cz-cli ดังนั้นจึงไม่มี git commit โดยตรงอีกต่อไป

• CZ-CASTOMIZABLE: ปลั๊กอินที่ปรับแต่งได้เพื่อช่วยให้บรรลุข้อความการกระทำที่สอดคล้องกันเช่นทีม AngularJS มันมาถึงปลั๊กอิน cz-cli ที่สมบูรณ์

ใน package.json คุณเพิ่ม:

 "config" : {
  "commitizen" : {
    "path" : " node_modules/cz-customizable "
  },
  "cz-customizable" : {
    "config" : " path/to/custom/cz-config.js "
  }
},
...

หากคุณไม่ได้ให้ไฟล์ที่กำหนดเองในการกำหนดค่า ( config.cz-customizable.config ) ไฟล์. .cz-config.js จะใช้งานที่รูทของโครงการ

หมายเหตุ: เพื่อให้สามารถใช้ VS Code เพื่อแก้ไข GIT COMMENT ความคิดเห็นหรืองานการจัดการไฟล์อื่น ๆ แทนที่จะเป็นค่าเริ่มต้น vim คุณสามารถเรียกใช้ git config --global core.editor "code --wait" ที่การลงโทษที่รหัส VS พร้อมใช้งานจากสาย code --help (คุณสามารถตรวจสอบได้

ข้อมูลเพิ่มเติมที่นี่

• Husky: เพื่อแก้ไข Git Hooks ได้อย่างง่ายดาย

เพิ่มการกำหนดค่า husky ที่รูทของไฟล์ package.json :

 "husky" : {
  "hooks" : {
    "pre-commit" : " yarn lintstaged " ,
    "prepush" : " yarn prod "
  }
}

หากคุณต้องการข้าม hools เพียงเพิ่ม --no-verify คำสั่งลงในคำสั่ง GIT ของคุณ ตัวอย่าง: git push --no-verify

• commitlint/CLI: ในฐานะที่เป็นชื่อของมันเครื่องมือนี้ให้ความเป็นไปได้ที่จะเพิ่มการตรวจสอบอื่น ๆ เกี่ยวกับข้อความ commit และหากการประชุมรูปแบบการกระทำแบบดั้งเดิมหรืออนุสัญญาที่คุณกำหนดเอง

ดังนั้นสำหรับการกำหนดค่า husky Hooks ที่กำหนดไว้แล้วคุณสามารถเพิ่ม hook commit-msg :

 "husky" : {
  "hooks" : {
    ...,
    "commit-msg" : " commitlint -E HUSKY_GIT_PARAMS "
  }
}

commit-msg Hook ช่วยให้คุณสามารถผูกมัดได้ก่อนที่จะถูกสร้างขึ้น

คุณสามารถเพิ่มไฟล์ commitlint.config.js ที่รูทของโครงการเพื่อกำหนดกฎเกณฑ์/การประชุมผ้าสำลี

commitlint.config.js ตัวอย่าง:

 module . exports = {
  // we use the default @commitlint/config-conventional rules.
  // you have to install @commitlint/config-conventional library to be able to use it.
  extends : [ '@commitlint/config-conventional' ] ,
  // Any rules defined here will override rules from @commitlint/config-conventional
  // => custom rules
  rules : {
    'header-max-length' : [ 2 , 'always' , 100 ] ,
    'subject-case' : [
      2 ,
      'never' ,
      [ 'sentence-case' , 'start-case' , 'pascal-case' , 'upper-case' ]
    ] ,
    ...
  }
} ;

หมายเหตุ: หากคุณต้องการลองใช้คำมั่นสัญญาอีกครั้งเพื่อที่คุณจะได้ไม่ต้องป้อนข้อมูลเดียวกันอีกครั้งอีกครั้งเพียงเรียกใช้ yarn commit:retry

การกำหนดเส้นทาง

ใช้ Routermodule ของ Angular เอกสารของ Angular นั้นสมบูรณ์มากและฉันแนะนำให้คุณดู

ในโครงการนี้ฉันได้เลือกที่สำหรับโครงการ app (สแตนด์อโลน) ฉันใช้การกำหนดเส้นทาง/โหลดโดยตรง ในทางกลับกันสำหรับแอพหลัก (แอพรูท) โมดูลจะโหลดขี้เกียจและมันมีผลต่อวิธีการทำงานของการกำหนดเส้นทาง

หากต้องการดูว่าการโหลด LZAY นั้นได้รับการจัดการอย่างไรคุณสามารถดูไดเรกทอรี src/app/lazy ที่กำหนดโมดูล Lazy Loaded จากนั้นโมดูลเหล่านี้คือ "จริง" ขี้เกียจที่โหลดภายในไฟล์ src/app/app-routing.module.ts สำหรับแต่ละโมดูลที่โหลดขี้เกียจจะมีการกำหนดเส้นทาง เส้นทางนี้จะต้องนำหน้าเส้นทางทั้งหมดที่กำหนดไว้ในโมดูลดั้งเดิม

ตัวอย่าง: สมมติว่าในโมดูล orignal ของคุณคุณเข้าถึงเนื้อหา page-one ผ่าน URL localhost:4200/page-one เมื่อคุณโหลดโดยตรง (เช่นในโครงการแอพ/สแตนด์อโลน) ในเวลาเดียวกันเส้นทางที่คุณกำหนดให้ LAZY LOAD โมดูลเดียวกันคือ my-lazy-loaded-path ดังนั้นในการเข้าถึงเนื้อหา/หน้าเดียวกันคุณควรใช้ URL localhost:4200/my-lazy-loaded-path/page-one แทน

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

รูปแบบปฏิกิริยา

เมื่อพูดถึงการจัดการรูปแบบในเชิงมุมคุณมีทางเลือกระหว่างรูปแบบปฏิกิริยาและรูปแบบที่ขับเคลื่อนด้วยเทมเพลต

ในเอกสารเชิงมุมอย่างเป็นทางการคุณสามารถหาได้:

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

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

คุณสามารถค้นหาตารางความแตกต่างที่สำคัญได้ที่นี่

สำหรับโครงการนี้ฉันได้เลือกที่จะใช้แบบฟอร์มปฏิกิริยาสำหรับข้อดีทั้งหมดที่มาพร้อมกับการมีแบบจำลองข้อมูล strcutered หรือใช้ประโยชน์จากการซิงโครไนซ์ระหว่างเทมเพลตของคุณ (View/HTML) และตัวควบคุม (คลาสคอมโพเนนต์/โมเดล) นอกจากนี้โดยทั่วไปในโครงการขนาดใหญ่คุณอาจมีรูปแบบที่ซับซ้อนและ reactive forms ทำให้งานสร้างง่ายขึ้นสำหรับคุณ

สไตล์: bootstrap

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

นี่คือตัวอย่างของห้องสมุดที่คุณสามารถใช้ได้:

• Bootstrap: มันไม่เฉพาะเจาะจงกับ Angular คุณสามารถใช้กรอบใดก็ได้ที่คุณใช้ และเพื่อให้การใช้งานง่ายขึ้นในโครงการเชิงมุมคุณอาจใช้ไลบรารี NG-Bootstrap
• วัสดุเชิงมุม: เฉพาะเชิงมุม ให้ส่วนประกอบของวัสดุ deisgn สำหรับเชิงมุม
• มูลนิธิ Zurb: ตัวอย่างของส่วนประกอบพื้นฐานสำหรับเว็บไซต์ที่นี่
• วัสดุ.

ที่จริงแล้วสำหรับโครงการนี้มันเป็น bootstrap ซึ่งใช้ (ไม่ใช่ ng-boostrap )

NGXS และรูปแบบหน้า

ngxs

ห้องสมุดส่วนใหญ่เช่น React, Angular ฯลฯ ถูกสร้างขึ้นด้วยวิธีการสำหรับส่วนประกอบในการจัดการสถานะภายในโดยไม่จำเป็นต้องมีห้องสมุดหรือเครื่องมือภายนอก มันทำได้ดีสำหรับแอปพลิเคชันที่มีส่วนประกอบน้อย แต่เมื่อแอปพลิเคชันใหญ่ขึ้นการจัดการสถานะที่ใช้ร่วมกันในส่วนประกอบกลายเป็นงานที่น่าเบื่อ

ในแอพที่มีการแชร์ข้อมูลระหว่างส่วนประกอบอาจทำให้เกิดความสับสนที่จะรู้ว่ารัฐควรอาศัยอยู่ที่ไหน ตามหลักการแล้วข้อมูลในส่วนประกอบควรอยู่ในองค์ประกอบเดียว ดังนั้นการแบ่งปันข้อมูลระหว่างส่วนประกอบพี่น้องจึงกลายเป็นเรื่องยาก (แหล่งที่มา)

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

ตัวอย่างเช่นสำหรับ React หนึ่งในไลบรารีการจัดการสถานะที่ใช้มากที่สุดคือ Redux และการใช้แพ็คเกจ React-Redux ทำให้ง่ายขึ้น แน่นอนว่าคุณมีไลบรารีการจัดการสถานะอื่น ๆ สำหรับ react Like Flux ของ Facebook ดังนั้นเลือกสิ่งที่เหมาะกับคุณมากที่สุดว่า redux นั้นใช้ flux มากกว่าเพราะมันไม่ได้อยู่กึ่งกลาง react และสามารถใช้กับไลบรารีมุมมองอื่น ๆ ได้

สำหรับ angular คุณมีตัวเลือกมากมายสำหรับการจัดการสถานะเช่น:

• NGXS: NGXS เป็นรูปแบบการจัดการสถานะ + ไลบรารีสำหรับ Angular มันทำหน้าที่เป็นแหล่งเดียวของความจริงสำหรับสถานะของแอปพลิเคชันของคุณโดยให้กฎง่ายๆสำหรับการกลายพันธุ์ของรัฐที่คาดการณ์ได้
• NGRX: ร้านค้าคือการจัดการสถานะที่ขับเคลื่อนด้วย RXJS สำหรับแอปพลิเคชันเชิงมุมซึ่งได้รับแรงบันดาลใจจาก Redux ร้านค้าเป็นคอนเทนเนอร์สถานะควบคุมที่ออกแบบมาเพื่อช่วยเขียนแอพพลิเคชั่นที่มีประสิทธิภาพและสม่ำเสมอด้านบนของ Angular
• Datorama/Akita: Akita เป็นรูปแบบการจัดการของรัฐที่สร้างขึ้นบน RXJS ซึ่งใช้ความคิดของการจัดเก็บข้อมูลหลายอย่างจากฟลักซ์และการอัปเดตที่ไม่เปลี่ยนรูปจาก Redux พร้อมกับแนวคิดของการสตรีมข้อมูลเพื่อสร้างโมเดลข้อมูลที่สังเกตได้

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

ใช้ปลั๊กอิน ngxs สำหรับ repo นี้:

• Logger: ปลั๊กอินบันทึกคอนโซลอย่างง่ายเพื่อบันทึกการกระทำเมื่อประมวลผล
• Devtools: ปลั๊กอินที่มีการรวมเข้ากับส่วนขยาย Redux Devtools
• เราเตอร์: เพื่อช่วยคุณจัดการการนำทาง

รูปแบบของอาคาร

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

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

ในขณะที่สิ่งนี้ดูเหมือนจะเป็นการเปลี่ยนแปลงเล็กน้อย (และเลเยอร์พิเศษ) อาคารมีผลกระทบเชิงบวกอย่างมากของผลผลิตของนักพัฒนาซอฟต์แวร์และให้ความซับซ้อนน้อยลงอย่างมีนัยสำคัญในเลเยอร์มุมมอง (แหล่งที่มา)

ข้อได้เปรียบอื่น ๆ คือทำให้ตัวควบคุมของคุณ (ส่วนประกอบเชิงมุมเป็นตัวอย่าง), เป็นอิสระจากไลบรารีการจัดการสถานะที่คุณเลือกใช้

การทำให้เป็นสากล

สำหรับความเป็นสากลคุณมีสองตัวเลือก:

1 - ใช้ระบบ I18N ของ Angular

2 - ใช้ไลบรารี NGX -Translate

ฉันจะไม่เข้าไปดูรายละเอียด แต่ตัวเลือกสำหรับโครงการนี้และการผลิตอื่น ๆ อีกมากมายเช่นโครงการคือการใช้ ngx-translate เหตุผลหลักคือเพื่อผลลัพธ์เดียวกันมันง่ายกว่าที่จะใช้และพัฒนาด้วยและ Angular i18n บังคับให้คุณสร้างแอปพลิเคชันต่อภาษาและมันโหลดแอปพลิเคชันในการเปลี่ยนแปลงภาษา

ความช่วยเหลือเพิ่มเติม

เพื่อรับความช่วยเหลือเพิ่มเติมเกี่ยวกับ CLI เชิงมุมใช้ ng help หรือไปดู readme CLI เชิงมุม

ปลั๊กอินรหัส VS

หากคุณใช้รหัส VS คุณอาจพบว่าปลั๊กอินต่อไปนี้มีประโยชน์มาก:

• TS-BARRELR: ทำการผลิตไฟล์ BARREL INDEX.TS โดยอัตโนมัติ
• Jest Runner: วิธีง่ายๆในการเรียกใช้หรือดีบักการทดสอบแบบ jest เดียวหรือหลายครั้งจากเมนูบริบท เป็นไปได้ใน Intellij / Webstorm
• TSLINT: เพิ่มรหัส TSLINT ไปยัง VS โดยใช้ปลั๊กอิน TypeScript Tslint Language Service Service
• TypeScript ผู้นำเข้า: ค้นหาคำจำกัดความ TypeScript โดยอัตโนมัติในไฟล์ Workspace และให้สัญลักษณ์ที่รู้จักทั้งหมดเป็นรายการที่เสร็จสมบูรณ์เพื่อให้รหัสเสร็จสมบูรณ์

ใบอนุญาต

ลิขสิทธิ์โดย @haythem-ouederni แหล่งที่มาโครงการทั้งหมดได้รับการเผยแพร่ภายใต้ใบอนุญาต Apache