Angular学习笔记（一）

安装Node.js

官网地址：https://nodejs.org/en/

Angular

官网地址：https://angular.io/

安装Angular脚手架

#安装脚手架全局安装
npm install -g @angular/cli
#查看版本
ng v

创建Angular项目

ng new ngdemo

创建成功后目录如下：

启动项目

ng serve --open
#或者
ng serve -o

启动成功在浏览器输入http://localhost:4200

 创建组件

#home为component名
ng g c home 

创建成功目录如下：

 简单测试{{DOM插值}} [DOM属性] (DOM事件)

home.component.ts如下：

home.component.html如下：

<p>{{name}}</p>
<!--通过该事件，实现[input]和(output)-->
<button (click)="toggle()">toggle事件</button>
<p [hidden]="hide">隐藏的文本</p>

修改app.component.html内容

<app-home></app-home>

app-home是创建的组件，app是项目配置的前缀，在文件angular.json中：部分代码截图如下：

 刷新浏览器就可以看到效果了，到此简单的Angular页面数据交互、属性交互、事件交互就实现了

总结

       Angular是2009年Google推出的前端框架。支持数据双向绑定，也支持单项数据绑定。由于双向绑定是基于Observer和Watcher（观察者设计模式类似于消息订阅发布）以及Compile（DOM编译器具体实现需要深入研究了），消耗比较大资源，建议使用单项绑定。

       Angular是MVC模式，将DOM抽离为Moudle和Component，模块可以控制多个组件，而整个项目main.ts又可以控制多个组件,层次分明。学习Angular可以帮助你更好使用和理解Vue框架，Vue是2012年出来的借鉴了Angualr的思想，简化了模块和组件，增加了生命周期的概念，该生命周期可以理解为对一个组件的创建（前）、数据加载（前）、更新(前)、销户(前)；这种思想同样也出现在近年来非常火爆的小程序内。不仅如此，java后台的大名鼎鼎的Spring框架bean的初始化、执行加载、销毁也有类似生命周期的概念，其形成要早于前端架构，更多细节需要自己研究了。

        不积跬步无以至千里，不积小流无以成江河。技术需要不断积累才能不断成长，未来才有竞争的资本。