Angular（一）

前端踩坑之Angular起步
为了证明自己曾经学过，赶紧写下笔记顺带分享

1、安装Angular CLI，在已经安装node环境下，运行npm install -g angular 创建手脚架

npm install -g angular-cli

2、在创建手脚架后，通过命令ng new XX(项目名字）创建项目，输入命令后将会自动创建各层级目录，对项目进行初始化

ng new agDemo

3、进入项目目录，cd agDemo

cd agDemo

4、启动项目，ng serve --open，由于使用了命令–open，项目启动后将会自动打开默认浏览器，进入手脚架网页，如果没有使用–open，也可以自行进入localhost:4200,至此，angular项目启动成功

ng serve --open

5、创建模块，关于模块，主要目的就是为了偷懒，减少重复代码，通过ng g c xx（模块名）创建,创建成功后，手脚架将会自动帮我们引入这个模块到app.js中

ng g c helloword
//等价于
ng generate component helloword

6、模块结构分析，第五步成功后，手脚架会在当前src/app目录下创建了一个helloword目录，里面有四个文件：helloword.component.css、helloword.component.html、helloword.component.spec.ts、helloword.component.ts，前两个文件很明显是css和html页面，后两个不好说，而在helloword.component.ts中，有一个@Component标记的对象，只要把对象里面的selector复制到上级目录的app.commonent.html中，就可以把hellowork模块的内容展示出来，这里为了明显，直接就把原来的内容删了再加上。

7、双向绑定？angular能够使用**{{}}**进行类似vue的数据绑定，也类似Java中模板引擎，反正觉得像什么就是什么，在第六步中生成的文件helloword.component.ts中

export class AppComponent {
  sthName= '靓仔';
}

这个输出的类，里面可以定义变量，然后在同模块下，helloword.component.html中可以通过*{{sthName}}*就可以使用变量，

<p>helloword {{sthName}}！</p>