那些年初识Angular(1)

那些年初识Angular

由于工作需要初识了Angular，由于个人在学习一门新语言的时候喜欢买一本相关的书籍自己钻研，还记得自己的第一本Angular书籍是关于Angular2的学习，自此正式踏入Angular的学习。
书写这篇文章的主要目的是想以此文章几年自己学习Angular的历程和自己的一些感想，如果这篇文章能为你提供些许帮助也是极好的，废话不多说，正式进入正文。

1. 搭建开发环境

   首先你需要安装node.js
   https://nodejs.org/en/download/
   

根据自己的操作系统选择相应的版本安装
安装Angular-cli工具，这个工具可以帮助你快速构建Angular项目,生成项目所需要的组件
这里通过npm在控制台安装

npm install -g @angular/cli

至此整体开发环境搭建完成

1. 生成你的第一个Angular项目
   打开控制台,利用ng命令生成Angular项目

   ng new my-app

   以下是我生成的一个初始Angular项目结构

   

2. 了解Angular项目基本结构
   首先我们来解释首层结构
   node_modules ：第三方依赖包存放目录
   e2e ：端到端的测试目录 用来做自动测试的
   src ：应用源代码目录
   .angular-cli.json ：Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包 比如jquery等
   karma.conf.js ：karma是单元测试的执行器，karma.conf.js是karma的配置文件
   package.json ：这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依 赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
   protractor.conf.js ：也是一个做自动化测试的配置文件
   README.md ：说明文件
   tslint.json ：是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它
   然后是src目录
   app目录 ：包含应用的组件和模块，我们要写的代码都在这个目录
   assets目录 ：资源目录，存储静态资源的 比如图片
   environments目录 ：环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
   index.html ：整个应用的根html，程序启动就是访问这个页面
   main.ts ：整个项目的入口点，Angular通过这个文件来启动项目
   polyfills.ts ：主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
   styles.css ：主要是放一些全局的样式
   tsconfig.app.json ：TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
   tsconfig.spec.json ：不用管
   test.ts ：也是自动化测试用的
   typings.d.ts ：不用管
   我们主要的开发精力都在app这个目录下，一般一个Angular应用程序，最少需要一个组件，一个模块。这个在我们生成Angular项目的时候已经给我们生成了，如图：

   

3. 以初始Angular项目来梳理组件，模块，模板的概念

   在我们的Angular初始项目中生成一个app.component.ts的文件，这个就是我们的组件，以下就是我在这个文件的基础上所对组件牵扯到的一系列知识的整理，如果有不对的地方欢迎指出☺

   // 从angular核心模块中引入Component装饰器
   import { Component } from '@angular/core';
   
   /* 这段代码中的@Components就是一个装饰器，它用来告知Angular框架来如何处理一个Typescript类。
   它包含多个属性，这些属性值叫做元数据。Angular会根据元数据渲染组件，并执行组件逻辑。
   简单的说就是我们可以看到这段代码的后三行定义了一个AppComponent类，它看着就是一个普通的ts类，
   但是我们需要告诉Angular这个类是一个组件，这就需要用装饰器将这些元数据附加到类上。元数据会告
   诉Angular图和将这个Typescript类处理成一个组件。 */
   
   @Component({
   
     /* 元数据
           selector: 'app-root'：
           这段代码表示这个组件可以通过app-root这个html标签来调用。打开项目根目录下的index.html
           可以看到里面有这样一行代码
           <app-root></app-root>
           这其实就是调用了我们的这个组件
   
           templateUrl: './app.component.html' ：
           既然已经知道了怎么调用组件，这行代码就是用来说明组件显示的内容是什么。文件路径就是这个
           组件对应的模板，模板用来定义组件的外观
           打开app.component.html代码如下
           <h1>
             {{title}}
           </h1>
   
           styleUrls: ['./app.component.css'] ：
           这个和上面的类似，表示组件的css
      */
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   /* 控制器
      AppComponent其实是一个很简单的ts类，但是在这里他是这个组件的控制器，我们这个组件所有相关的
      业务逻辑都在这个控制器里书写，包含了组件的所有属性和方法，控制器和模板进行双向数据绑定也就是
      模板中的{{变量名}}，这里的两个花括号就是双向数据绑定的格式
   
    */
   export class AppComponent {
   }
   

   模块：

   /* 主模块 */
   
   /* import数组 引入项目需要的指令
       例如需要经常需要的ngif等指令 ngif等指令都在CommonModule类中
       引入项目需要的类
       不要在import数组中引入ngmodule类型之外的类
       如果有两个同名的指令 可以在指令后面添加 as 别名 另外再给同名指令添加一个别名，就可以了
       BrowserModule：每个在浏览器中运行的应用都需要引用这个指令
       */
   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   
   /* 必须在Ngmodule类中声明每一个用到的组件
      不要在declarations添加组件，指令和管道以外的类型
   */
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }