那些年初识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 { }