摘要:開始項目前,你需要先安裝和,然后執行安裝。一用命令行新建一個項目執行上面的命令就會自動新建一個項目,并啟動了項目。
作者:心葉
時間:2018-04-22 09:13
Angular CLI是一個命令行界面工具,它可以創建項目、添加文件以及執行一大堆開發任務,比如測試、打包和發布,這里的快速開始就是基于這個命令。
開始項目前,你需要先安裝node和npm,然后執行npm install -g @angular/cli安裝Angular CLI。
一:用命令行新建一個項目ng new newApp --skip-install cd newApp cnpm install ng serve --open
執行上面的命令就會自動新建一個Angualr項目,并啟動了項目。
其中--skip-install表示node包先不安裝,我們接著使用cnpm install安裝會快多了。
二:目錄結構現在來看看ng命令幫助我們生成了什么,也就是項目的目錄結構,里面都是干什么的,先有個大致了解,你可以不知道全部,不過先記住下面幾個個人感覺重要的:
1.src:應用代碼存放的地方;
2.src/app:你的代碼主要存放的地方,這樣說也許不合適,不過你開發的時候,大部分時間都是在修改這里的代碼;
3.src/assets:圖片等存放的地方,構建時會復制到發布包里;
4.src/main.js:你基本不會修改它,它是程序的主入口;
5.src/styles.css:特別用的樣式寫在對應的地方,后面會說,對于公共的樣式就會寫在這里;
6.karma.conf.js:給Karma的單元測試配置,當運行ng test時會用到它。
三:自定義組件import { Component } from "@angular/core"; @Component({ selector: "my-comp", template: "
上面就已經定義好了一個非常簡單的組件,不過在使用前,你還需要在模塊中定義,此時就是src/app/app.module.ts中注冊:
import { NgModule } from "@angular/core"; import { MyComponent } from "./my.component"; @NgModule({ declarations: [ MyComponent ] }) ......
現在已經注冊好了,你就可以使用了,上面的例子的使用方法很簡單,就是自定義了一個標簽my-comp,和普通的div的用法一模一樣。
需要注意的是,為了方便查看,在注冊的例子中我去掉了無關的代碼,實際情況還好有包括啟動,別的組件,服務等的注冊,你可以看看命令行自動生成的別的指令,這里主要還是說明更重要的東西,下同。
類似AngularJS,Angular的selector除了上面的自定義標簽,還有別的:
1.selector: "element-name"http://自定義標簽選擇器;
2.selector: ".class"http://樣式選擇器;
3.selector: "[attribute]"http://屬性選擇器;
4.selector: "[attribute=value]"http://屬性值選擇器;
5.selector: ":not(sub_selector)"http://取反選擇器;
6.selector: "selector1, selector2"http://多種選擇器。
四:自定義服務和組件一樣,我們先來定義一個服務。
import { Injectable } from "@angular/core"; export class DataFormat { id: number; info: string; } @Injectable() export class MyServ { getData(): DataFormat[] { return [ { id: 1, info: "Angular" }, { id: 2, info: "React" }, { id: 3, info: "Vue" } ]; } }
接著來注冊它,服務和組件在注冊上有點不同,我們現在先注冊在主組件上面吧,默認就是在arc/app/app.component.ts文件中注冊:
import { Component } from "@angular/core"; import { MyServ } from "./my.service"; @Component({ providers: [MyServ] })
服務的使用也很簡單,我們這里用構造函數來演示一下:
import { MyServ } from "./my.service"; ...... export class MyComponent { dataList: any[]; constructor(private demoService: MyServ) { this.dataList = this.demoService.getData(); } }
還記得自定義組件的代碼嗎?我們就在其中演示了服務的用法,上面只給出了修改的部分代碼。
五:路由的使用我們這里給出路由的一個簡單用法,具體的細節和上面的類似,會多帶帶再去討論,這篇文章的目的就是快速入門使用。
為了方便演示,我們默認已經定義好了二個組件:MyComponent和My2Component。
首先需要確定index.html頁面的head標簽中定義好了
我們先在src/app/app.module.ts中注冊路由:
...... import { RouterModule } from "@angular/router"; @NgModule({ declarations: [MyComponent,My2Component], imports: [ RouterModule.forRoot([ {path: "my",component: MyComponent}, {path: "my2",component: My2Component} ]) ] ...... }) ......
使用就很簡單了:
toMycomp toMy2comp
點擊toMycomp或者toMy2comp就會跳轉對應的路由設置的組件了。
六:HTTP由于@angular/http庫中的HttpModule保存著http相關的服務,需要先引入進來(這里是在src/app/app.module.ts中引入):
import { HttpModule } from "@angular/http"; @NgModule({ imports: [HttpModule] }) ......
現在,http就是一個服務,下面簡單演示一種用法:
...... import { Http } from "@angular/http"; ...... constructor(private http: Http) { http.get("assets/XXX.json").forEach(function (data) { console.log(data["_body"]); }); } ......
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94492.html
摘要:正文架構概覽正文架構概覽接觸大概一個月吧,期間寫了個項目,趁現在稍微有點時間,來回顧梳理一下。里的模塊,并不等同于項目中的模塊概念。當然,這只是我目前階段的理解。聲明 本系列文章內容梳理自以下來源: Angular 官方中文版教程 官方的教程,其實已經很詳細且易懂,這里再次梳理的目的在于復習和鞏固相關知識點,剛開始接觸學習 Angular 的還是建議以官網為主。 因為這系列文章,更多的會...
摘要:首先,我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉,定義該路由激活時的樣式類。 剛實習的時候用過AngularJS,那時候真的是連原生JavaScript都不會寫,依樣畫葫蘆做了幾個管理后臺。然后突然換項目了,AngularJS就不寫了,感覺前前后后接觸了一年多的Angula...
摘要:它包含多個屬性,這些屬性值叫做元數據。會根據元數據渲染組件,并執行組件邏輯。元數據會告訴圖和將這個類處理成一個組件。元數據這段代碼表示這個組件可以通過這個標簽來調用。 那些年初識Angular 由于工作需要初識了Angular,由于個人在學習一門新語言的時候喜歡買一本相關的書籍自己鉆研,還記得自己的第一本Angular書籍是關于Angular2的學習,自此正式踏入Angular的學習。...
摘要:業界動態發布版本,同時發布了版本以及首個穩定版本的。程序人生如何用人類的方式進行二關于如何在中進行良好的溝通,避免陷入一些潛在的陷阱。技術周刊由小組出品,匯聚一周好文章,周刊原文。 業界動態 Angular 5.1 & More Now Available Angular發布5.1版本,同時發布了Angular CLI 1.6版本以及首個穩定版本的Angular Material。CL...
閱讀 953·2021-11-24 09:39
閱讀 2689·2021-09-26 09:55
閱讀 14155·2021-08-23 09:47
閱讀 3577·2019-08-30 15:52
閱讀 849·2019-08-29 13:49
閱讀 997·2019-08-23 18:00
閱讀 844·2019-08-23 16:42
閱讀 1635·2019-08-23 14:28