[Angular 2] Create Angular 2 Porject with Angular CLI
Angular with create CLI
2023-09-14 08:59:19 时间
Install:
npm i -g angular-cli
Create a project:
ng new hello-angular2
Run the project:
cd hello-angular2
ng serve
Change the port:
ng serve --port 4201 --live-reload-port 49153
Create a component:
ng g component contact-list-component
The component will be created in src/app/contact-list-component.
// app.component.ts import { Component } from '@angular/core'; import {ContactListComponentComponent} from "./contact-list-component/contact-list-component.component"; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [ContactListComponentComponent] }) export class AppComponent { title = 'app works!'; }
Generate a child component:
The child component should live inside parent component, for example, we create a contact-detail-component:
cd ./contact-list-component
ng g component ./contact-detail-component
//contact-iist-component.ts import { Component, OnInit } from '@angular/core'; import {ContactDetailComponentComponent} from "./contact-detail-component/contact-detail-component.component"; @Component({ moduleId: module.id, directives: [ContactDetailComponentComponent], selector: 'app-contact-list-component', templateUrl: 'contact-list-component.component.html', styleUrls: ['contact-list-component.component.css'] }) export class ContactListComponentComponent implements OnInit { constructor() {} ngOnInit() { } }
If everything went well, you should see:
相关文章
- [Angular Unit Testing] Testing component with content projection
- [Angular 8] Calculate and Measure Performance budgets with the Angular CLI
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Angular] Implement a custom form component by using control value accessor
- [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
- [Angular 2] Rendering an Observable with the Async Pipe
- [Angular 2] Using Promise to Http
- [Angular 2] ng-model and ng-for with Select and Option elements
- [Angular 2] Passing data to components with 'properties'
- [Unit Testing] Karma with Angular mocks
- [ngx-formly] Implement multi-column layout Forms with Angular Formly
- [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular
- [Angular] Modify User Provided UI with Angular Content Directives
- [Angular] Setup automated deployment with Angular, Travis and Firebase
- [Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup
- [Angular] Service facotry(), custom filter
- Angular DefaultDomRenderer2.setProperty - HTML的值是如何从Angular Component flow过来的,以及跨平台支持
- Angular应用里使用rxjs提供的观察者和发布者实现事件处理
- Angular 应用 bootstrapModule 映射的 app Component 的初始化逻辑
- 为什么按照 Angular 官网教程执行简单的测试代码,会遇到expect is not defined的错误消息
- Angular ngIf 指令运行时执行原理
- SAP Spartacus 中 Angular json pipe 的工作原理
- 给Angular初学者介绍一个非常方便的例子学习网站