Angular(一) - Typescript&Angular入门熟悉

• 1. Typescript
  • 1.1 安装typescript
  • 1.2 typescript的小例子
    • 1.2.1 新建一个index.ts
    • 1.2.2 编译ts成js
    • 1.2.3 查看生成的index.js
    • 1.2.4 运行javascript
  • 1.3 typescript的一些特性
• 2. Angular
  • 2.1 Angular Cli的安装
  • 2.2 创建项目
  • 2.3 安装依赖并启动
  • 2.4 文件目录树

1. Typescript

1.1 安装typescript

全局安装typescript

npm install -g typescript

1.2 typescript的小例子

1.2.1 新建一个index.ts

function hello(user:string) {
    return `${user}: hello world`
}

let user = 'tom'
console.log(hello(user))

1.2.2 编译ts成js

`tsc index.ts

1.2.3 查看生成的index.js

function hello(user) {
    return user + ": hello world";
}
var user = 'tom';
console.log(hello(user));

1.2.4 运行javascript

node index.js

1.3 typescript的一些特性

• 由于是javascript的超集，所以支持所有javascript的语法，包括ES6等
• 可以自定义类型
• typexcript如果报错，通过tsc依然可以生成javascript文件

2. Angular

2.1 Angular Cli的安装

npm install -g @angular/cli

2.2 创建项目

ng new angularapp

2.3 安装依赖并启动

npm install && npm start

2.4 文件目录树

|-- angularapp
    |-- .browserslistrc   // 配置各种前端工具之间共享的目标浏览器和 Node.js 版本
    |-- .editorconfig     // 代码编辑器的配置
    |-- .gitignore        // 配置git忽略文件
    |-- angular.json      // 为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor
    |-- karma.conf.js     // 应用专属的 Karma 配置
    |-- package-lock.json // 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息
    |-- package.json      // 配置工作空间中所有项目可用的 npm 包依赖
    |-- README.md         // 根应用的简介文档.
    |-- tsconfig.app.json // 应用专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器的选项
    |-- tsconfig.json     // 工作空间中各个项目的默认 TypeScript 配
    |-- tsconfig.spec.json// 应用测试的 TypeScript 配置
    |-- tslint.json       // 应用专属的 TSLint 配置
    |-- e2e               // e2e测试相关的
    |   |-- protractor.conf.js
    |   |-- tsconfig.json
    |   |-- src
    |       |-- app.e2e-spec.ts
    |       |-- app.po.ts
    |-- src
        |-- favicon.ico
        |-- index.html
        |-- main.ts // 应用的主要切入点。用 JIT 编译器编译应用，然后引导应用的根模块（AppModule）在浏览器中运行
        |-- polyfills.ts // 提供浏览器支持的polyfills脚本。
        |-- styles.css // 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器
        |-- test.ts
        |-- app     // 包含定义应用逻辑和数据的组件文件
        |   |-- app-routing.module.ts
        |   |-- app.component.css // 为根组件 AppComponent 定义了基本的CSS
        |   |-- app.component.html// 定义与根组件 AppComponent 关联的 HTML 模板
        |   |-- app.component.spec.ts// 为根组件 AppComponent 定义了一个单元测试
        |   |-- app.component.ts // 为应用的根组件定义逻辑，名为 AppComponent
        |   |-- app.module.ts // 定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时，它们也必须在这里声明
        |-- assets   // 包含要在构建应用时应该按原样复制的图像和其它静态资源文件
        |   |-- .gitkeep
        |-- environments // 包含特定目标环境的构建配置选项。默认情况下，有一个无名的标准开发环境和一个生产（“prod”）环境
            |-- environment.prod.ts
            |-- environment.ts