angular2指令学习笔记

angular2发展小姿势：

angular2是由angular.js(可以理解为angular1)衍生而来，但是与我们常规的理解不同，例如boostrap目前已经更新到bootstrap4,每一个版本都是在原先版本的基础上进行更新优化的，老的版本的某些事件新版本的调用方法依旧存在，而angular2与angular1可以说在实现以及方法调用上面天差地别。原因与angular的发展有些关系。angular.js原先是有一对基佬研究创造出来，而且在美国引起的很大反响。但是angular是一个很好的创造，两个人无法提供更加强大的支持，后面被Google收购，而其中一只基佬随着angular去了Google。Google组件新的团队，沿用angular的概念去重新编写了框架，相当于重构，此时angular2以全新的姿态问世，它更加强大，功能丰富（渲染，组件之间数据传输，更丰富，更容易调用的方法等等）。其实angular与我们常规的html+css+js组成的前端页面最大的不同在于，我们常规见到的前端页面，他是以页面划分的数据渲染，访问不同的店html可以看到不同的资源。此时浏览器上显示的也是不同的html文件。但是angular的概念是组件渲染，所谓的组件渲染，就是把页面不同的组成部分划分结构，例如标题菜单栏，主体内容显示区域，以及底部结构（三个部分，这里是做简单直白的描述，方便快速理解思想），每一个部分称之为一个组件，而不同的组件同样是有不同的html去承担着页面结构。但是不同的是，他们会把组件页面，也就是组件html中对应渲染的画面加载到主页面上，例如主页面是index.html,其他三个组件html分别是header.html;body.html,footer.html.三个组件页面上编写了不同的组件渲染代码，header.html上写的是头部，其他的不管，其他两个同理，而在渲染的过程中，angular会把三个组件页面的内容加载到index.html。这就类似于模块化渲染，也就是组件渲染，当然，有人此时会考虑到，我可能整个页面结构发生了变化呢，此时它同样并不矛盾，比如有一个index123.html这个页面，分成很多模块，例如头部导航菜单，主体左侧选择列表，主体右侧内容展示，没有底部。这个页面的不同区域同样由其他小组件页面组成，只不过最终这个页面最为一个大的组件页面被加载到index.html这个页面。angular这种做法，有人看到这里可能觉得有些多次一举，但是，因为她是组件（模块化渲染），每个组件有变动都可以在局部刷新某个组件的情况下去做出响应，从而不必整个页面刷新，这是其一，其二是，angular让数据渲染，双向数据绑定变得更加简单，这也是她带来的好处，当然还有其他好处，我现在无法理解到位，现在angular的发展，以及与常规页面渲染的不同也稍微浅显的说了，现在开始讲解angular一些指令的使用。

2.angular指令学习：

1  .ng new demoName,      创建名称为demoName的项目，也就是创建文件夹，最外层名称即为demoName,里面的结构会src,readme.md 等等，记住分层再多也就是创建多层文件夹，这里所说的项目就一堆有结构的文件夹以及文件组成。angular-cli脚手架实际意思就是，一套能够帮你自动创建项目结构的系统脚本，在你输入ng new demoName时，会被识别到从而去创建文件夹项目的一套系统脚本，windows以bat结尾，linux以sh结尾。有了脚手架，你每次创建项目，它都可以帮助你去自动创建好项目文件结构，从而避免了你去手动创建的低效率，以及失败率。

2.ng server  这个命令的执行需要进入的名称为demoName的文件夹下，这样才能成功启动项目。ng server的大致意思相当于javaweb项目在jdk环境下启动，而ng server则是启动node环境下的angular项目。可以使人在web浏览器端直接访问。

3.ng generate component component-name  这个命令表示的是创造一个组件，一般组件放在app路径或者其他文件夹下，但是肯定是在名为demoName这个文件夹下面的某一个，所以运行之前要首先进入对应的文件夹。

4.ng build 类似于讲web项目打成war或者jar包，会将angular下的ts文件打包成浏览器可以识别的js文件。象征着项目完成。

5.ng test 目前不清楚

6.angular-cli 或者 ng help查看更多的angular指令

7.npm install -g angular-cli 搭建脚手架 npm -v查看npm版本 node -v 查看node 版本