本章节说明：入手一个框架首先嗯就是“用起来”，我们现在跟着官网走一遍，用起来。然后我们来讨论，项目中的文件组织规则和结构浅析和第三方库的引用方式

创建一个项目

首先和官网文档保持一致，先把cli安装上官方, 然后去创建项目就好了( 创建项目的时候选择“需要rourtiing & 使用Scss” ), 然后你就得到了下面的目录，输入命令你就得到了一个可以运行的app

 
yarn global add @angular/cli@9
 
sudo ng new myapp 
 
yarn  start

创建好得项目目录如下，

启动成功之后如下：

关于 ng new 这个cli命令这里不详细的展开了，你可以看这里的文档 ngCli命令参考，上述的new 命令实际上可以简化成下面的命令, （不过感觉没必要怎么搞怎么长你记得住？）

ng new myapp --routing --skip-tests --style scss

关于项目文件夹结构

实际上你可以直接去官方找文档官方文档，所以这里没有深入介绍的必要了，去看文档吧骚年。这个有个地方需要特别的说明一下：module 是 ng中非常重要的组织方式，在react或者vue中大多都是以“页面” 那个页面在那个地方那个页面由哪些组件构成，但是在ng中这种思想并没有 module 重要，我们的页面和组件都是一个一个的module 哪些需要哪里搬，淡化了组件，提供了module

在ng中引入第三方插件

举个例子🌰 我们现在引入bootstartp 和 moment, 首先这两个库的文档你要去看看哈

使用CDN的方法引入

在根文件引入

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myapp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

自接给定html 就好了

app.component.html

<div class="alert alert-success" role="alert">.谢谢谢谢谢寻想学习</div>

使用CDN的方法引入骚操作去改Angularjson （改全局）注意：如果你这么干的话就需要重启项目哈

先去把文件夹下载到本地

然后去修改angulaerJson文件

或者你直接写就好了加到另一个 styles.scss中就好啦

使用ESModule的方法引入（推荐）对于momet 也是一样的使用方式

yarn add bootstrap@3

# main.ts 中
 
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
import  'bootstrap';
if (environment.production) {
  enableProdMode();
}
 
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// styles.scss
@import "~bootstrap";

创建一个项目

关于项目文件夹结构

在ng中引入 第三方插件

在ng中引入第三方插件