angular2學(xué)習(xí)筆記之基本組件和ngFor

wawor4827 發(fā)布于2019-08-19 18:39 / 2283人閱讀

摘要：的思想非常先進，摒棄了那種復(fù)雜的構(gòu)建模式，采用了組件化開方的方，那我們一起來看一看，一個基礎(chǔ)的組件是什么樣子的呢。

angular2的思想非常先進，摒棄了angular1那種復(fù)雜的構(gòu)建模式，采用了組件化開方的方，那我們一起來看一看，一個基礎(chǔ)的組件是什么樣子的呢。angular2-demo

一、簡介 1. 目錄結(jié)構(gòu)

.ts 組件代碼

.scss 樣式

.png 效果圖

.html 模板文件

2. 效果圖

二、代碼實例

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

三、詳細(xì)解讀 1. Basic.ts

一個基本的組件就長個樣子，并沒有那么神秘

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

// 創(chuàng)建模擬數(shù)據(jù)
let xiaomo:UserModel = new UserModel( "xiaomo");
let xiaoming:UserModel = new UserModel("xiaoming");

@Component({
    selector: "basic",
    styles:[require("./Basic.scss")], //內(nèi)聯(lián)樣式,注意使用row-loader
    template: require("./Basic.html")
})

export class BasicComponent {

    users:Object;
    // 在構(gòu)造函數(shù)中賦值
    constructor() {
            this.users= [ xiaomo,xiaoming];
    };
}

2. UserModel.ts

這里使用了uuid來創(chuàng)建一個隨機的id作為唯一標(biāo)識符
使用 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 循環(huán),index可以取到索引值(從0開始)


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

GPU云服務(wù)器云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79820.html

相關(guān)文章

AngularJS 2 Quick Start

摘要：引言是用于構(gòu)建基于瀏覽器的復(fù)雜應(yīng)用的下一代框架。它涵蓋了的一些基本概念，包括組件模型服務(wù)管道傳入傳出以及事件播散等使用方法，并介紹了項目的基本組織結(jié)構(gòu)等。用于雙向綁定，使用來定義，專門用于定義雙向綁定。引言 Angular2 是 Google 用于構(gòu)建基于瀏覽器的復(fù)雜應(yīng)用的下一代 MV* 框架。該項目是我學(xué)習(xí) Angular2 的入門項目，我覺得它很友好地表達(dá)了 Angular2 的...

Channe 2019-08-19 17:43 評論0 收藏0
Angular 4 簡單入門筆記

摘要：首先，我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉(zhuǎn)，定義該路由激活時的樣式類。剛實習(xí)的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

whlong 2019-08-20 17:44 評論0 收藏0
angular2初入眼簾之－了解component

摘要：通過增加刪除元素改變布局的。譬如和控制元素顯示隱藏，或者改變元素行為的。譬如設(shè)計看過我之前介紹以手寫依賴注入的朋友應(yīng)該已經(jīng)對行為驅(qū)動多少有些了解了。她有，并且包含了至少一個和一個標(biāo)簽。，將左邊的事件傳遞給了右邊的表達(dá)式通常就是事件處理函數(shù)。前集回顧在上一章里我們講了如何為angular2搭建開發(fā)環(huán)境(還沒搭起來的趕緊去看哦)，并使之跑起來我們的第一個My First Angular...

ixlei 2019-08-19 18:06 評論0 收藏0
angular2初入眼簾之－多components協(xié)作

摘要：我們使用了模式書寫，并引入了思想，這些以前只在里見到的設(shè)計，現(xiàn)在里也有體現(xiàn)，并且在本章中會著重講解多的協(xié)作。如果之前寫過，那對于這種書寫方式一定無比熟悉。每次數(shù)據(jù)的變更，無論是還是，都將變化冒泡到，然后由再向下逐級推送各組件是否重繪。前集回顧在上一章里我們講了如何在angular2下開發(fā)一個component(還沒做的趕緊去學(xué)吧)。我們使用了Unidirectional Data ...

dreamans 2019-08-19 18:08 評論0 收藏0
Angular2 VS Angular4 深度對比：特性、性能

摘要：的特性和性能是的超集，用于幫助的開發(fā)。注解提供了連接元數(shù)據(jù)和功能的工具。通過在庫中提供基本信息可以調(diào)用函數(shù)或創(chuàng)建類的實例來檢查相關(guān)元數(shù)據(jù)，從而簡化了對象實例的構(gòu)建。停用它會響應(yīng)跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應(yīng)用開發(fā)領(lǐng)域，Angular被認(rèn)為是最好的開源JavaScri...

孫淑建 2019-08-20 18:37 評論0 收藏0