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

创建一个项目

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

  2. yarn global add @angular/cli@9
  4. sudo ng new myapp 
  6. yarn  start

创建好得项目目录如下，
image.png
启动成功之后如下：
image.png
关于 ng new 这个cli命令 这里不详细的展开了， 你可以看这里的文档 ngCli命令参考 ，上述的new 命令实际上可以简化成下面的命令, （不过感觉没必要怎么搞 怎么长 你记得住？）

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

关于项目文件夹结构

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

在ng中引入 第三方插件

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

使用CDN的方法引入

  1. 在根文件引入

index.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Myapp</title>
  6.   <base href="/">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  9.   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  10. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  11. </head>
  12. <body>
  13.   <app-root></app-root>
  14. </body>
  15. </html>
  1. 自接给定html 就好了

app.component.html

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

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

  1. 先去把文件夹下载到本地

image.png

  1. 然后去修改angulaerJson文件

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

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

  1. yarn add bootstrap@3
  1. # main.ts 中
  3. import { enableProdMode } from '@angular/core';
  4. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  5. import { AppModule } from './app/app.module';
  6. import { environment } from './environments/environment';
  8. import  'bootstrap';
  9. if (environment.production) {
  10.   enableProdMode();
  11. }
  13. platformBrowserDynamic().bootstrapModule(AppModule)
  14.   .catch(err => console.error(err));
  1. // styles.scss
  2. @import "~bootstrap";