安装angular-cli
npm install -g angular-cli@latest创建新文件(路径上不能有中文)
ng new 新文件名查看端口并运行文件,自动打开网页
ng serve -o(或在package.json里面做修改设置)
--port XXXX指定端口号(否则默认4200)-
项目文件概览
- 所有的Angular组件、模板、样式、图片以及应用所需的任何东西都在src文件中。src之外的文件都是为构建应用提供支持用的。
- src文件夹
src
——app
————app.component.css
————app.component.html
————app.component.spec.ts
————app.component.ts
————app.module.ts
——assets
————.gitkeep
——environments
————environment.prod.ts
————environment.ts
——favicon.ico
——index.html
——main.ts
——polyfills.ts
——styles.css
——test.ts
——tsconfig.app.json
——tsconfig.spec.json
-
src文件夹
- app/app.component.{ts,html,css,spec.ts}
使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。 - app/app.module.ts
定义AppModule，这个根模块会告诉Angular如何组装该应用。 目前，它只声明了AppComponent。 稍后它还会声明更多组件。 - assets/*
这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。 - environments/*
这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 - index.html
这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。 - main.ts
这是应用的主要入口点。 - polyfills.ts
不同的浏览器对Web标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。 - styles.css
这里是你的全局样式。 - test.ts
这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。 - tsconfig.json
TypeScript编译器的配置文件。
- app/app.component.{ts,html,css,spec.ts}
其他文件
my-app
——e2e
————app.e2e-spec.ts
————app.po.ts
————tsconfig.e2e.json
——node_modules/...
——src/...
——.angular-cli.json
——.editorconfig
——.gitignore
——karma.conf.js
——package.json
——protractor.conf.js
——README.md
——tsconfig.json
——tslint.json
- 其他文件
- e2e/
在e2e/下是端到端（end-to-end）测试。 - .angular-cli.json
Angular CLI的配置文件。 在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。 - .editorconfig
给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。 - karma.conf.js
给Karma的单元测试配置，当运行ng test时会用到它。 - protractor.conf.js
给Protractor使用的端到端测试配置文件，当运行ng e2e的时候会用到它。 - tsconfig.json
TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。 - tslint.json
给TSLint和Codelyzer用的配置信息，当运行ng lint时会用到。 Lint功能可以帮你保持代码风格的统一。
- e2e/
-
创建新的component并自动加入
ng generate component 名称 --inline-template --inline-style- 可以缩写为 : ng g c 名称 -it -is
其中 -it 和 -is 分别表示html和css都写在js内
- 可以缩写为 : ng g c 名称 -it -is
根模块app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [//声明顶层组件
AppComponent,
LoginComponent
],
imports: [//辅助模块
BrowserModule, //浏览器的必备服务和指令
FormsModule, //表单处理和双向绑定
HttpModule //Http请求和响应的服务
],
providers: [],//本模块中注入的服务
bootstrap: [AppComponent]//作为引导性组件,放入index.html的对应位置
})
export class AppModule { }
- 添加事件
<form>
<input type='text' #usernameRef>
<button (click)='hello(usernameRef.value)'>submit</button>
</form>
#usernameRef称为引用
创建新的service并自动加入
ng g s core\auth使用DI（依赖性注入）
