Angular(一) - Typescript&Angular入门熟悉
<ul><li>1. Typescript
<ul>
<li>1.1 安装typescript</li>
<li>1.2 typescript的小例子
<ul>
<li>1.2.1 新建一个index.ts</li>
<li>1.2.2 编译ts成js</li>
<li>1.2.3 查看生成的index.js</li>
<li>1.2.4 运行javascript</li>
</ul>
</li>
<li>1.3 typescript的一些特性</li>
</ul>
</li>
<li>2. Angular
<ul>
<li>2.1 Angular Cli的安装</li>
<li>2.2 创建项目</li>
<li>2.3 安装依赖并启动</li>
<li>2.4 文件目录树</li>
</ul>
</li>
</ul>
<h1 id="1-typescript"><span id="head1">1. Typescript</span></h1>
<h2 id="11-安装typescript"><span id="head2">1.1 安装typescript</span></h2>
<p>全局安装typescript</p>
<pre><code class="language-shell">npm install -g typescript
</code></pre>
<h2 id="12-typescript的小例子"><span id="head3">1.2 typescript的小例子</span></h2>
<h3 id="121-新建一个indexts"><span id="head4">1.2.1 新建一个index.ts</span></h3>
<pre><code class="language-typescript">function hello(user:string) {
return `${user}: hello world`
}
let user = 'tom'
console.log(hello(user))
</code></pre>
<h3 id="122-编译ts成js"><span id="head5">1.2.2 编译ts成js</span></h3>
<pre><code class="language-shell">`tsc index.ts
</code></pre>
<h3 id="123-查看生成的indexjs"><span id="head6">1.2.3 查看生成的index.js</span></h3>
<pre><code class="language-javascript">function hello(user) {
return user + ": hello world";
}
var user = 'tom';
console.log(hello(user));
</code></pre>
<h3 id="124-运行javascript"><span id="head7">1.2.4 运行javascript</span></h3>
<pre><code class="language-shell">node index.js
</code></pre>
<p><img src="http://pic.codepie.fun/img/20200904235617.png" alt="" loading="lazy"></p>
<h2 id="13-typescript的一些特性"><span id="head8">1.3 typescript的一些特性</span></h2>
<ul>
<li>由于是javascript的超集，所以支持所有javascript的语法，包括ES6等</li>
<li>可以自定义类型</li>
<li><strong>typexcript如果报错，通过<code>tsc</code>依然可以生成javascript文件</strong></li>
</ul>
<h1 id="2-angular"><span id="head9">2. Angular</span></h1>
<h2 id="21-angular-cli的安装"><span id="head10">2.1 Angular Cli的安装</span></h2>
<pre><code class="language-shell">npm install -g @angular/cli
</code></pre>
<h2 id="22-创建项目"><span id="head11">2.2 创建项目</span></h2>
<pre><code class="language-shell">ng new angularapp
</code></pre>
<h2 id="23-安装依赖并启动"><span id="head12">2.3 安装依赖并启动</span></h2>
<pre><code class="language-shell">npm install && npm start
</code></pre>
<p><img src="http://pic.codepie.fun/img/20200905001136.png" alt="" loading="lazy"></p>
<h2 id="24-文件目录树"><span id="head13">2.4 文件目录树</span></h2>
<pre><code class="language-js">|-- 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
</code></pre><br><br>
来源：https://www.cnblogs.com/baoshu/p/13616870.html
頁:
[1]