angular2學習筆記之基本組件和ngFor

wawor4827 發布于2019-08-19 18:39 / 2278人閱讀

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

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}}

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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