آموزش پیکربندی پیشرفته در انگولار ۲

erfan molaei
3 سال پیش
آموزش پیکربندی پیشرفته در انگولار 2

آموزش پیکربندی پیشرفته در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پیکربندی پیشرفته در انگولار ۲ خواهیم پرداخت.

در این درس ما سایر فایلهای پیکربندی را که بخشی از پروژه انگولار ۲ هستند بررسی می کنیم.

tsconfig.json

این فایل برای ارائه گزینه های مربوط به TypeScript مورد استفاده برای پروژه Angular JS استفاده می شود.

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

 

در زیر نکات کلیدی قابل ذکر در مورد کد بالا ذکر شده است.

  • هدف برای کامپایل es5 است و این به این دلیل است که اکثر مرورگرها فقط می توانند نسخه تایپی ES5 را درک کنند.
  • گزینه sourceMap برای تولید فایلهای Map استفاده می شود که هنگام اشکال زدایی مفید هستند. بنابراین در طول توسعه خوب است که این گزینه را به عنوان واقعی نگه دارید.
  • “emitDecoratorMetadata”: true و “experimentalDecorators”: true برای تزئین کنندگان Angular JS مورد نیاز است. در صورت عدم وجود، برنامه Angular JS کامپایل نمی شود.

package.json

این فایل حاوی اطلاعاتی در مورد پروژه انگولار ۲ است. در زیر تنظیمات معمولی در فایل آمده است.

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

 

برخی نکات کلیدی که باید در مورد کد بالا توجه داشته باشید –

  • دو نوع وابستگی وجود دارد، ابتدا وابستگی ها و سپس وابستگی های dev وجود دارد. برنامه های توسعه دهنده در طول فرایند توسعه مورد نیاز است و بقیه برای اجرای برنامه مورد نیاز است.
  • دستور “build: watch”: “tsc -p src/ -w” برای کامپایل نسخه خطی در پس زمینه با جستجوی تغییرات در فایل های تایپ استفاده می شود.

systemjs.config.json

این فایل شامل فایل های سیستمی مورد نیاز برای برنامه Angular JS است. این کار همه فایلهای اسکریپت لازم را بدون نیاز به افزودن تگ اسکریپت به صفحات html بارگذاری می کند. فایلهای معمولی دارای کد زیر خواهند بود.

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

 

برخی نکات کلیدی که باید در مورد کد بالا توجه داشته باشید –

  • ‘npm:’: ‘node_modules/’ مکان پروژه ما را نشان می دهد که همه ماژول های npm در آن قرار دارند.
  • نگاشت برنامه: ‘app’ به پوشه ای که در آن همه پرونده های برنامه های ما بارگذاری شده است، می گوید.

 

 

منبع.

 

لیست جلسات قبل آموزش آنگولار ۲

  1. آموزش انگولار ۲
  2.  مرور کلی آنگولار ۲
  3. آموزش محیط انگولار ۲ 
  4. آموزش Hello World در انگولار ۲
  5. آموزش ماژول ها در انگولار ۲
  6. آموزش معماری در انگولار ۲
  7. آموزش کامپوننت ها در انگولار ۲
  8. آموزش قالب ها در انگولار ۲
  9. آموزش دستورالعمل ها در انگولار ۲
  10. آموزش متادیتا در انگولار ۲
  11. آموزش اتصال داده ها در انگولار ۲
  12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
  13. آموزش مدیریت خطا در انگولار ۲
  14. آموزش مسیریابی در انگولار ۲
  15. آموزش ناوبری در انگولار ۲
  16. آموزش فرم ها در انگولار ۲
  17. آموزش CLI در انگولار ۲
  18. آموزش تزریق وابستگی در انگولار ۲
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه