【Angular2】ng2的开始_组件
一直想学习下ng2，但是总有中无从下手的感觉，昨天找了几个例子，但在配置环境方面总出错，好不容易有一个能试通
https://github.com/DanielYKPan/ng2-auth
npm install
grunt lint
此时报错说需要安装ruby和sass，因为它的样式文件都是scss，需要用sass编译为css，不然没样式，scss是css3语法的的拓展级
sass安装 这里面的安装步骤很详细 如果完成后还报错，那再次gem install sass 就可以了
之后grunt 就可以看到结果
github上有一篇教程，搭配使用，能很快做出自己的一个小应用
第一个小例子弄得差不多了，里面讲解很详细，来记一下知识点吧
首先index.html里面加载的文件，es6-shim angular2-polyfills SystemJS RxJS 这四个是基本的
system.import('app')是入口
app.ts里面
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
引入bootstrap模块和component模块，然后文件最后bootstrap(test)启动应用
ng2中组件是重要的一块，相当于angular1的指令，定义后可用作页面中的标签
一个组件包括component注解以及一个类
@component({
selector:'test' ,//标签名字<test></test>
host:{class:'row'},//host即指该组件元素，相当于在标签中添加class="row"
directives：[includeComponent],//这里添加includeComponent组件，即可以在template中添加<include></include>
inputs：['name'],//可以看作父组件到子组件参数的传递，父里<include [name]='lww' ></include>,则include组件里this.name的值就是lww
template:`<div>test</div>`,//注意用反引号，里面内容即html内容
templateUrl:'./test.html' //也可将页面单独拿出来，引入html文件
})
类里需要注意的是this代替了scope
而页面中，NgFor相当于angular1的ng-repeat，<li *ngFor="#item of items></li>
input标签后面加#newname，可以将值绑定到newname这个变量，与ng-model有点类似？
ng-click变成了(click)
感觉ng1和ng2的变化真是相当大，虽然目前处于摸索状态，但ng2的组件还是很不错