zoukankan      html  css  js  c++  java
  • 【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上有一篇教程,搭配使用,能很快做出自己的一个小应用 

    编写你的第一个Angular2 Web应用

    第一个小例子弄得差不多了,里面讲解很详细,来记一下知识点吧

    首先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的组件还是很不错

  • 相关阅读:
    redis运维手册
    grafana展示ES中的nginx日志-地图展示
    nginx针对yum安装nginx重编译
    K8S-yaml里初始化容器
    K8S-资源配置清单补充1
    K8S-资源配置清单详解
    Docker cp 提示“no space left on device”
    磁盘
    ansible 对文件内容的操作
    ansible 初始化系统分区格式化
  • 原文地址:https://www.cnblogs.com/lww930/p/5565864.html
Copyright © 2011-2022 走看看