2、angular学习第一天（环境搭建)

1、node 安装

直接搜索node 到官网下载对应版本安装就好
安装完成后的验证指令是
node -v
npm -v

2、安装angular-cli

实现自动化开发流程，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

命令:

sudo npm install -g @angular/cli

验证： ng -v

3、使用angular-cli创建一个angular项目

当前目录下命令：

ng create myapp

myapp 就是项目名称

4、 使用webstream 开发集成工具打开当前项目目录

其中目录
e2e 端到端的测试目录 用来做自动测试的
node_modules 第三方依赖包存放目录
src 源代码目录
|_app 是项目的默认主模块
|_assets 是静态资源 图片之类的
|_environments 是当前环境（开发，发布）
|_index.html 整个应用的根html，程序启动就是访问这个页面
|_main.ts 整个项目的入口点，Angular通过这个文件来启动项目
|_polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
|_styles.css 主要是放一些全局的样式
|_tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
|_tsconfig.spec.json 不用管
|_test.ts 也是自动化测试用的
|_typings.d.ts 不用管
angular.json Angular命令行工具的配置文件。后期
可能会去修改它，引一些其他的第三方的包 比如jquery等
package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
README.md 说明文件
tslint.json 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它

5 引用 jquery 和 bootstrap

命令

npm install jquery --save
npm install bootstrap --save

为了让ts识别js代码应该做类型声明

npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev

6创建模块

cli 提供了创建模块的命令

ng g component navbar
ng g component footer
ng g component search
ng g component carousel
ng g component product
ng g component start

7重写app模块中的root-root

上方是navbar
左侧是search

右侧分上下两部分
上方轮播
下方产品列表

<app-navbar></app-navbar>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">

      <div class="row">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>

</div>

<app-footer></app-footer>

8启动项目

ng serve [--open] [--port 4200] [--host 0.0.0.0]