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.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

 

查看更多关于Angular(一) - Typescript&Angular入门熟悉的详细内容...