angular2学习笔记之基本组件和ngFor

wawor4827 发布于2019-08-19 18:39 / 2122人阅读

摘要：的思想非常先进，摒弃了那种复杂的构建模式，采用了组件化开方的方，那我们一起来看一看，一个基础的组件是什么样子的呢。

angular2的思想非常先进，摒弃了angular1那种复杂的构建模式，采用了组件化开方的方，那我们一起来看一看，一个基础的组件是什么样子的呢。angular2-demo

一、简介 1. 目录结构

.ts 组件代码

.scss 样式

.png 效果图

.html 模板文件

2. 效果图

二、代码实例

https://github.com/qq83387856/angular2-demo/tree/master/src/ts/component/basic

三、详细解读 1. Basic.ts

一个基本的组件就长个样子，并没有那么神秘

import {Component} from "@angular/core";
import {UserModel} from "./../../model/UserModel";

// 创建模拟数据
let xiaomo:UserModel = new UserModel( "xiaomo");
let xiaoming:UserModel = new UserModel("xiaoming");

@Component({
    selector: "basic",
    styles:[require("./Basic.scss")], //内联样式,注意使用row-loader
    template: require("./Basic.html")
})

export class BasicComponent {

    users:Object;
    // 在构造函数中赋值
    constructor() {
            this.users= [ xiaomo,xiaoming];
    };
}

2. UserModel.ts

这里使用了uuid来创建一个随机的id作为唯一标识符
使用 public 可以不用再 this.name = name

import { uuid } from "./../util/uuid";

export class UserModel{
    id :string;
    constructor(public name:string){
            this.id = uuid();
    }
}

3. Basic.html

使用ngFor 循环,index可以取到索引值(从0开始)


    
        {{i+1}} Hello {{item.name}}

私有云服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79820.html

AngularJS 2 Quick Start

摘要：引言是用于构建基于浏览器的复杂应用的下一代框架。它涵盖了的一些基本概念，包括组件模型服务管道传入传出以及事件播散等使用方法，并介绍了项目的基本组织结构等。用于双向绑定，使用来定义，专门用于定义双向绑定。引言 Angular2 是 Google 用于构建基于浏览器的复杂应用的下一代 MV* 框架。该项目是我学习 Angular2 的入门项目，我觉得它很友好地表达了 Angular2 的...

Channe 2019-08-19 17:43 评论0 收藏0
Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0
angular2初入眼帘之－了解component

摘要：通过增加删除元素改变布局的。譬如和控制元素显示隐藏，或者改变元素行为的。譬如设计看过我之前介绍以手写依赖注入的朋友应该已经对行为驱动多少有些了解了。她有，并且包含了至少一个和一个标签。，将左边的事件传递给了右边的表达式通常就是事件处理函数。前集回顾在上一章里我们讲了如何为angular2搭建开发环境(还没搭起来的赶紧去看哦)，并使之跑起来我们的第一个My First Angular...

ixlei 2019-08-19 18:06 评论0 收藏0
angular2初入眼帘之－多components协作

摘要：我们使用了模式书写，并引入了思想，这些以前只在里见到的设计，现在里也有体现，并且在本章中会着重讲解多的协作。如果之前写过，那对于这种书写方式一定无比熟悉。每次数据的变更，无论是还是，都将变化冒泡到，然后由再向下逐级推送各组件是否重绘。前集回顾在上一章里我们讲了如何在angular2下开发一个component(还没做的赶紧去学吧)。我们使用了Unidirectional Data ...

dreamans 2019-08-19 18:08 评论0 收藏0
Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0