一、初步瞭解模組和元件
之前給大家介紹了構建工程，這篇文章簡單講述一下angular2中的模組和元件。
app資料夾下有五個檔案，其中，app.component.spec.ts應該是和模組測試有關的檔案，目前不用管它。剩下的四個檔案就是典型的模組+元件的檔案組成模式。
angular2應用由模組和元件構成，每個模組這樣明明name.module.ts,元件則是name.component.ts。
這幾個檔案的關係是從屬關係：
|--app.module.ts(模組)
|--app.component.ts(元件)
|--app.component.html(html模板)
|--app.component.css(css樣式表)
一個模組可以有多個元件，一個元件也可以有多個樣式表,但只有一個html模板。
1.1元件的含義
angular2中的元件，就是我們自定義的一段html**，給他取個名字，就可以當作html的標籤使用了。假如元件的名字是my-app，那麼就可以這樣使用：
//可以像原生標籤一樣新增屬性，而且元件能接收的屬性更豐富
//標籤裡面也可以放內容
元件其實是一個類，它定義了一系列方法和屬性，並且把html模板封裝起來。它的意義是，你可以把它當做一個獨立的隔離的盒子,並利用其中的方法和屬性進行盒子內部的操作，以及和外界的父元件、兄弟元件互動。
1.2模組的含義
模www.cppcns.com塊就是將一系列的元件還有指令、服務整合封裝到一起，提供一個完整的功能。模組可以被外部模組引用。
二、模組詳解和根模組
2.1 根模組
每個應用會有一個根模組，按照約定，它的類名叫做appmodule，被放在app.module.ts檔案中。應用啟動時，就會載入這個模組。
每個根模組會有一個根元件，預設就是app.component.ts，名字是app-root。
檢視專案目錄中的index.html，會發現有loading...這樣的**，就是在載入這個根模組。
2.2 模組詳解
下面是app.module.ts的**。
import from '@angular/platform-browser';//每個在瀏覽器中執行
//的應用的根模組都需要引入browsermodule
import from '@angular/core';//每個模組都需要引入的核心庫中的ngmodule
import from '@angular/forms';//表單模組，在應用中使用表單時引入
import from '@angular/http';//http模組，當需要進行http遠端請求時引入
import from './app.component';//自己建立的元件
@ngmodule()
export class appmodule
angular2用typescript組織**的方式大致就像這個檔案一www.cppcns.com樣。
1、在頂部使用import語句，匯入模組或者元件需要使用的外部模組。
在模組中需要使用自己建立的元件或者其他服務、指令，也需要import。
2、import語句之後，使用@ngmodule()語句描述本模組的後設資料。
3、最後，使用export語句，建立模組的類並暴露出去。
模組、元件只有暴露出去，其他的模組才能引用。
三、元件詳解
import from '@angular/core'; //所有元件必須引入
@component()
export class appcomponent
1、import語句匯入需要的模組。
2、使用@component()來描述本元件的後設資料。
3、最後，使用export建立元件的類並暴露出去。在類中，可以建立屬性和方法。
四、應用啟動過程
整個應用的啟動流程：載入根模組，載入所需的其他模組，建立引導元件，顯示元件內容。
注意：我覺得學習angular2很好的方法之一就是去看官方教程，有中文版的程式設計客棧，很方便。看完前面的開發指南部分就足以瞭解angular2的大致原理了，當然官方教程有的地方概念可能很模糊，有地方不瞭解的同學，可以留言交流，謝謝大家對我們的支援。
本文標題: angular2入門教程之模組和元件詳解
本文地址: /ruanjian/j**a/192424.html
SharePoint 2013 入門教程之入門手冊
當我們搭建完環境，建立應用程式和 集後，就已經正式開啟了我們的sharepoint之旅了，進入 以後，開始基本的使用 設定，瞭解sharepoint相關特性，下面，來簡單瞭解下sharepoint吧。圖1 sharepoint 釋出站點首頁 如上圖，可能畫的比較亂，11是共享本 12是關注此 12右...
RimWorld模組教程之物品
在本教程中,我們將建立一種新的物品,它可以被拖運和消耗.先決條件 您應該已經閱讀入門章節,它讓您快速的瞭解rimworld的模組結構.您同時已經熟悉各檔案的位置 如about.xml,def xml檔案,在 放材質貼圖等等 建立目錄 如果您尚未按入門章節建立了thingdef目錄,您還需要建立一個新...
gitbook 入門教程之 gitbook 簡介
gitbook是一個基於node.js的命令列工具,使用github git和markdown asciidoc構建精美的電子書.gitbook支援輸出靜態網頁和電子書等多種格式,其中預設輸出靜態網頁格式.不僅適用於軟體說明文件的釋出更新,同樣適用於文字文件的 更新.既適合具有一定程式設計經驗的軟體...
Hadoop入門教程之6HBASE解析
hadoop入門教程之6hbase解析。hbase利用hadoop hdfs作為其檔案儲存系統，利用hadoop mapreduce來處理hbase中的海量資料，利用zookeeper作為協調工具。hbase的幾個必須知道的3個概念 1 row key 主鍵 是用來檢索記錄的主鍵，訪問hbase t...
MVC3教程之新手入門
一 工具的選擇 要進行mvc3的開發，請確保你的計算機上面已經安裝瞭如下的軟體 你還可以通過web platform installer將這些軟體一起安裝到本地。二 從helloworld開始 我們從最簡單的helloworld程式開始，體驗mvc3帶來的強勁便捷的功能。step1.新建mvc3專案...
gitbook 入門教程之 gitbook 簡介
gitbook是一個基於node.js的命令列工具,使用github git和markdown asciidoc構建精美的電子書.gitbook支援輸出靜態網頁和電子書等多種格式,其中預設輸出靜態網頁格式.不僅適用於軟體說明文件的釋出更新,同樣適用於文字文件的 更新.既適合具有一定程式設計經驗的軟體...
ThinkPHP入門教程（一） 模組 方法與模板
這一章開始，我們來實戰thinkphp。需要知道一些細節 模組 方法與模板 寫在前面 一定要注意變數名 類名 方法名以及檔名的大小寫！thinkphp採用utf 8編碼，這意味著我們的編輯器 ide和資料庫也需要設定uft 8。但是這裡一定要注意的是，千萬不要用windows自帶的記事本開啟 裡面的...
Angular2入門系列教程4 服務
在程式設計中，我們通常會將資料提供單獨分離出來，以免在編寫程式的過程中反覆複製貼上資料請求的 angular2中提供了依賴注入的概念，使得我們可以很優雅得做到這一點。這裡簡單描述下，依賴注入可以使我們在編寫 的時候不用使用new 去生成一個類，這樣就達到了解耦的目的，更多關於依賴注入的知識我覺得不應...
git 入門教程之版本管理
在上一節中我們已經成功建立版本庫並且已經新增test.txt等檔案,這一節我們繼續講解如何進行版本控制.首先我們先檢視test.txt檔案有什麼內容吧 檢視檔案內容 cat test.txt git test git init git diff 接下來模擬正常工作,接著輸入一下內容 追加新內容到 t...
git 入門教程之配置 git
安裝完成後,還需要最後一步配置就可以愉快使用了,在命令列輸入 git config global user.name your username git config global user.email example example.com 因為git是分散式版本控制系統,所以每個機器都必須自報家...