Angular.js (29) 썸네일형 리스트형 ts 파일에서 : 와 = 차이점 export class hello{ name:string; //변수의 타입지정 nickname="hiMan"; //변수 초기화 } 새로운 컴포넌트 등록 및 데이터 바인딩 다음과 같이 컴포넌트를 생성한다. ng generate component heroes 1.hero.ts export class={ id:number, name: string } 2.hero.component.ts import 'hero' from './hero' //6-10번줄을 사용하기 위함 export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'winstrom', }; constructor() {} ngOnInit(): void {} } 3.hero.component.html (바인딩) {{title}} 해당 hero.name 으로 바인딩 된다. 4.app.Modules.ts import { FormsModule } .. 데이터 바인딩 영웅을 화면에 나타내기 위해 영웅클래스를 만들어준다. -------app.component.js---------- >>@Component 의 templatedp 작성할 내용들을 적어준다. @Component({ //루트 컴포넌트이다. selector: 'app-root', //templateUrl: './app.component.html', template: ` {{ title }} // export class의 title사용 {{ hero.name }} //히어로 라는 클래스의 name을 사용 ( ngModel로 바인딩 되어있음 id: {{ hero.id }} 이름 : //아래와 같이 모델링 해준다. `, styleUrls: ['./app.component.css'], }) [(ngModel)]을 사용.. Angular Cli 으로 프로젝트 시작 Anglar Cli 로 자동으로 프로젝트를 생성 할 수 있다. 1.npm 으로 cli 을 설치한다. npm install -g @anuglar/cli 2.폴더를 생성하고 3. cli 로 프로젝트를 생성한다. ng new AppName 4. 서빙 해본다. ( 프로젝트의 변경이 있을 경우 자동으로 컴파일 &서버 ng serve 5. 프로젝트 이해 ------------------------------------------ app.component.ts 첫번째 컴포넌트가 생성된 것이고 루트컴포넌트라고 하며 app-root라고 한다. 앱이 커지면서 컴포넌트 트리의 루트가 될 컴포넌트이다. app.component.css 에서 스타일을 지정 할 수 있고, app.component.html 에 내용을 작성 할 수 .. TypeScript in VS_Code typescript 는 모든 브라우져에서 호환 가능한 스크립트 언어이다. 이를 사용하기 위해서는 브라우져로 전송하기 전에 JS 언어로 컴파일 해주어야 한다. 순서는 이렇다. 1. npm install -g typescript 2. test.ts 파일 생성 3. tsc test.ts 로 컴파일 >> .js 파일 나옴 4. node test.js 파일 실행 ======================================= 또한 우리는 tsc 컴파일러의 기본 컴파일 옵션이 아닌 추가 설정을 하고 싶을떄 tsconfig.json 파일을 생성해서 설정해주면 된다. 우리는 컴파일된 .js 파일을 특정 폴더에 저장해주도록 설정해보겠다. { "compilerOptions": { "target": "es5", "m.. 이전 1 2 3 4 다음