Angular + C# + TypeScript Visual Studio 환경을 하나의 템플리적으로 가지고 있다.

9802 단어 AngularTypeScriptC#VisualStudio2017

개요



Angular + C# + TypeScript 환경을 Visual Studio에서 만들고,
최강의 개발 환경을 만들고 싶다고 생각해, 해외의 사이트를 참고로 VS로 간단한 것을 만들었습니다.
왜 Angular인가, 라는 것은, TypeScript를 사용하고 싶으니까. 왜 TS인가, 라는 것은 강력한 형식화와
정적 분석이 좋기 때문입니다. 그리고 최강의 개발 환경에서 Visual Studio의 파워를 발휘시키는 것이 궁극의 목적입니다.

절차의 기초가되는 사이트 : h tp : // c 샤 rp ゔ ぃ에서 お お お お お み ろ ㄱ. bgs포 t. 코 m / 2017/06 / 앙구 ぁ ー ー 2 개 l ー ぉ r ベギン rs_12. html 　

<하고 싶은 것 이미지도>


했던 일



설치 시스템



  • Visual Studio 2017 커뮤니티
  • 떨어뜨리는 방법은 여러 가지 있습니다만, MSDN 의 무료판, DevEssentials 에 입회하고 나서 이하의 사이트에 갔습니다. htp://my.ゔぃすあ lsつぢお。 이 m

  • Node 설치 다운로드 사이트
  • TypeScript SDK for Visual Studio 2017 다운로드 사이트
  • github.com/angular/quickstart github 사이트
  • VS 경로 설정 $ (PATH)를 위로 가져갑니다

    • In Visual Studio click on Tools - Options.
    In the "Options"window, expand "Projects and Solutions"and select "External Web Tools"
    In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.
    Click "OK"to close the "Options"window and then restart Visual Stduio for the changes to take effect



    템플리 작성


  • Visual Studio 2017에서 먼저 빈 프로젝트 만들기
  • Web ⇒ Visual C# ⇒ ASP Net MVC ⇒ 빈 페이지 (SPA 등은 선택하지 않음)


  • Angular의 QuickStart Zip 파일에서 다음 네 가지를 VS 솔루션에 복사
  • src folder and it's contents
  • bs-config.json
  • package.json
  • tslint.json


  • 복사하면 이렇게

  • Package.json을 마우스 오른쪽 버튼으로 클릭하고 복원합니다.



    • Restore the required packages.
    In the "Solution Explorer"right click on "package.json"file and select "Restore Packages"from the context menu. This takes a few minutes to load all the modules. You can see the status in "Visual Studio Output"window. After the restoration is complete, you will see a message "Installing Packages Complete". To see all the installed node modules, click on "Show all Files"icon in Solution Explorer. DO NOT include "node_modules"folder in the project.

    패스를 만지십시오.



    우선 지금의 그대로라면,/src/아래에 흔히 있는 상태이므로, 패스가 어긋나 버리고 있습니다.
    시도해 보면 다음과 같이 오류가 발생합니다.



    src/index.html





    위의 경로를 다음과 같이 고치십시오 (4 곳)
      <head>
    <title>Angular QuickStart</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>

    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

    src/systemjs.config.js





    위의 패스를 다음과 같이 고쳐 준다
    (function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '/node_modules/'
    },

    고쳤습니다.



    이처럼 TypeScript로 개발할 수 있습니다.



    파일: src/app\app.component.ts
    import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular!!'; }





    TypeScript는 브라우저가 그대로 이해할 수 없기 때문에 빌드하지 않으면 수정이 반영되지 않기 때문에,
    "tsconfig.json"에 ComplieOnSave를 넣고 저장시 Compile을 받도록 한 줄 추가.

    추가하는 것도 이대로, Visual Studio의 인텔리센스가 써 주기 때문에, 쉽습니다.



    모듈을 추가했을 때의 import도 어시스트해 줍니다.



    이제 코드가 다소 커져도 개발이 효율적으로 이루어질 수 있습니다.
    Cannot find compiler 'cl.exe' in PATH
    Visual Studio2017에서 node.exe 중지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage