那些因为工作需要刚接触Angular的，因为在学习一门新语言的时候喜欢买一本相关的书，还记得我的第一本Angular的书是关于Angular2的学习，自此正式进入Angular的学习。写这篇文章的主要目的是想通过这篇文章了解学习Angular的过程以及自己的一些思考。如果这篇文章可以为您提供一些帮助，那就太好了。废话不多说，正式进入正文。搭建开发环境首先需要安装node.jshttps://nodejs.org/en/download/根据自己的操作系统选择对应的版本安装Angular-cli工具。这个工具可以帮助你快速构建Angular项目并生成项目文件。所需的组件通过npm在这里安装在控制台上。npminstall-g@angular/cli至此，整体开发环境搭建完成，生成你的第一个Angular项目。打开控制台，使用ng命令生成Angular项目ngnewmy-app以下是我生成的一个初始Angular项目结构，了解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在老版本下正常运行-party依赖添加tsconfig.spec.json:don'tcaretest.ts:也是用于自动化测试的typings.d.ts:don'tcare我们主要的开发精力在app目录。通常，一个Angular应用程序至少需要一个组件和一个模块。这个在我们生成Angular项目的时候已经帮我们生成了，如图：使用初始的Angular项目梳理一下组件、模块、模板的概念。在我们的Angular初始项目中生成一个app.component.ts文件。这就是我们的Components，下面是我根据这个文件整理的一系列组件相关的知识。如果有不对的地方请指出?//从angular核心模块引入Component装饰器import{Component}from'@angular/core';/*这段代码中的@Components是一个装饰器，告诉Angular框架如何处理Typescript类。它包含几个属性，其值称为元数据。Angular基于元数据渲染组件并执行组件逻辑。简单的说，我们可以看到这段代码的最后三行定义了一个AppComponent类，它看起来就是一个普通的ts类，但是我们需要告诉Angular这个类是一个组件，这就需要一个装饰器来包装这些附加的Metadata到班级。元数据将告诉Angular将这个Typescript类作为一个组件来绘制和处理。*/@Component({/*Metadataselector:'app-root':这段代码表示可以通过html标签app-root调用这个组件，打开项目根目录下的index.html可以看到有这样一段代码实际上调用了我们的组件用于解释组件显示的内容。文件路径就是这个组件对应的模板。模板用于定义组件的外观。打开app.component.html代码如下

{{title}}

styleUrls:['./app.component.css']:这个和上面类似，表示组件的css*/selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})/*controlAppComponent其实是一个很简单的ts类，但是这里它是这个组件的控制器。我们组件所有相关的业务逻辑都写在这个controller里面，包括组件的所有属性和方法，controller和模板的双向数据绑定就是模板中的{{variablename}}。这里的两个花括号是双向数据绑定的格式*/exportclassAppComponent{}module:/*mainmodule*//*importarray导入项目需要的指令，比如ngif等经常需要的指令,ngif等指令在CommonModule类中导入。不要在import数组中引入ngmodule类型以外的类。如果有两条指令同名，可以在指令后面加上。asalias为命令添加另一个同名的别名。BrowserModule：在浏览器中运行的每个应用程序都需要引用此命令*/import{BrowserModule}from'@angular/platform-b??rowser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';/*使用的每个组件都必须在Ngmodule类中声明不要在声明中添加除管道之外的组件、指令和类型*/@NgModule({declarations:[AppComponent],imports:[BrowserModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}