Angular 4.x快速入門到項目發佈 （一）

一、簡介

        angular-cli的使用以及一些重要參數配置以及在以前的文章裏說過了，這裏就不在廢話了。

        首先咱們知道Angular建立的項目是用typescript寫的，因此咱們不得不簡單學習一下typescript的相關知識,而後就能夠開始咱們愉快代碼之旅了，代碼方面咱們主要涉及到是組件建立，路由配置以及異步加載的路由配置等。

二、typescript快速入門

TypeScript能夠給變量指定類型。指定類型後只能給該變量賦指定類型的值，若是不給初始值的話默認是undefined。 
格式： 變量聲明 變量名：類型=初始值； 
例：var isDone:boolean=false; 
在TypeScript中，若是不指定類型直接給初始值的話,編譯器會認爲你給的初始值的類型就是這個變量的類型。

1.boolean類型

let isDone: boolean = false;

 

2.number類型 
和JavaScript同樣，TypeScript裏的全部數字都是浮點數。 這些浮點數的類型是 number。 除了支持十進 制和十六進制字面量，Typescript還支持ECMAScript 2015中引入的二進制和八進制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

 

3.String類型 
String類型有兩個新特性，用起來很方便 
1）多行文本 
用鍵盤1左邊的反引號括起來後，直接編寫要顯示的內容，編譯成js會自動加上雙引號和加號。 
好比在平時開發中咱們拼接html代碼，這個時候用多行文本就很方便了省去了編寫加號和雙引號，可讀性也提升了。很是好用！

這是TypeScript代碼

var str1 = `<div><h1>Hello TypeScript</h1><span>xxx</span></div>`;

 

編譯成js代碼後：

var str1 = "<div><h1>Hello TypeScript</h1><span>xxx</span></div>";

 

2)字符串模版 
字符串模版就是在多行文本里插入表達式或調用方法。表達式的形式是${ expr }。 
這是TypeScript代碼

var name: string = "yzq";
function getAge(){
    return 23;
}
var info: string = `hello my name is ${name},
I'm ${getAge()} years old`;

 

編譯成js代碼後：

var name = "yzq";
function getAge() {
    return 23;
}
var info = "hello my name is " + name + ",\nI'm " + getAge() + " years old";

 

3）自動拆分字符串 
自動拆分字符串是指當你用字符串模版去調用一個方法的時候，字符串模版中的表達式的值會自動賦給被調用方法的參數。

TypeScript代碼

var name: string = "yzq";
function getAge(){
    return 23;
}
function showInfo(template,name,age){
    console.log(template);
    console.log(name);
    console.log(age);
}
showInfo`my name is ${name},I'm ${getAge()} years old.`;//調用方式爲方法命後面跟上反引號，將值傳入。

 

編譯成js代碼後：

var name = "yzq";
function getAge() {
    return 23;
}
function showInfo(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}
(_a = ["my name is ", ",I'm ", " years old."], _a.raw = ["my name is ", ",I'm ", " years old."], showInfo(_a, name, getAge())); //調用方式爲方法命後面跟上反引號，將值傳入。
var _a;

 

打印結果，能夠看到，當咱們調用這個方法的時候，會把傳進去參數根據表達式的數量自動拆分了。 
第一個template的值就是被拆分的字符串模版的一個數組，後面的參數值就是相應表達式的值。 

4.Array 
TypeScript像javascript同樣能夠操做數組元素。 有兩種方式能夠定義數組。 
第一種，能夠在元素類型後面接上 []，表示由此類型元素組成的一個數組：

var list:number[]=[1,2,3];

 

第二種方式是使用數組泛型，Array<元素類型>：

var list1:Array<String>=["1","2","3"];

 

5.Enum（枚舉） 
通常在數據個數固定且值固定的狀況下使用枚舉。例如一個星期有七天，週一到週日。

enum Color{red,green,blue};
var c:Color=Color.blue;
var c1:Color=Color[0];
console.log(c);//這裏打印的是下標
console.log(c1);//這裏打印的是值

 

能夠手動指定下標

enum Color{red=2,green=4,blue};
var c:Color=Color.blue;
var c1:Color=Color[2];
console.log(c);//這裏打印的是下標  5
console.log(c1);//這裏打印的是值   red

 

6.any（任意值） 
有時候，咱們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容，好比來自用戶輸入或第三方代碼庫。 這種狀況下，咱們不但願類型檢查器對這些值進行檢查而是直接讓它們經過編譯階段的檢查。 那麼咱們可使用 any類型來標記這些變量。 
若是變量被指定位any類型，則能夠任意賦值。

var anyStr:any=123;
anyStr="字符串";
anyStr=false;
var list:Array<any>=[1,"2",false];

 

7.void 
void類型像是與any類型相反，它表示沒有任何類型。 當一個函數沒有返回值時，你一般會見到其返回值類型是 void

function tell():string{//指定返回值類型爲string
    return "1";
}
function tell1():void{//無返回值

}

以上爲轉載類容，原文地址：http://blog.csdn.net/yuzhiqiang_1993/article/details/54136491

三、目錄結構&啓動

• 建立項目

        如何建立項目以及配置一些重要的json參數以前的文章以及講過了這裏再也不重複了。傳送門：http://www.javashuo.com/article/p-ozosgmxr-co.html

• 目錄結構

        

根目錄：

e2e                 端到端的測試目錄  用來作自動測試的
node_modules        第三方依賴包存放目錄
src                 應用源代碼目錄

src目錄：

app目錄               包含應用的組件和模塊，咱們要寫的代碼都在這個目錄
assets目錄            資源目錄，存儲靜態資源的  好比圖片
environments目錄      環境配置。Angular是支持多環境開發的，咱們能夠在不一樣的環境下（開發環境，測試環境，生產環境）共用一套代碼，主要用來配置環境的
index.html          整個應用的根html，程序啓動就是訪問這個頁面
main.ts             整個項目的入口點，Angular經過這個文件來啓動項目
polyfills.ts        主要是用來導入一些必要庫，爲了讓Angular能正常運行在老版本下
styles.css          主要是放一些全局的樣式
tsconfig.app.json   TypeScript編譯器的配置,添加第三方依賴的時候會修改這個文件
test.ts             自動化測試

app目錄：

app.module.ts           根模塊
app.component.ts        根模塊的組件
app.component.css       組件的樣式
app.component.html      組件的template

        每一個 Angular 應用至少有一個模塊（根模塊），經過angular-cli建立一個新的項目這個更模塊的文件也直接在app目錄下幫咱們生成了——app.module.ts（這就是應用的根模塊（AppModule））

src/app/app.module.ts
======================
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

        能夠看到這裏使用import語法導入了2個Angular模塊和一個根組件（這裏暫時把app.component.ts叫根組件），而後就是@NgModule裝飾器的應用：

        @NgModule裝飾器將該文件標記爲 Angular 模塊類。@NgModule接受一個元數據對象，告訴 Angular 如何編譯和啓動應用：

• imports——模塊把特性合併成離散單元的一種方式，當應用須要模塊的特性時，將其添加到imports數組中，它告訴Angular應用須要它們來正常工做。好比要用到input的雙向數據綁定指令[(ngModel)]時就遇到導入FormsModule。
• declarations——告訴Angular那些組件屬於AppModule,目前這裏只聲明瞭一個根組件。
• bootstrap——經過引導AppModule（根模塊）啓動應用，將bootstrap數組裏的組件插入到瀏覽器的DOM結構中。

        AppModule介紹完了，如今咱們來看看如何引導AppModule啓動應用。首先找到Angular引導啓動的入口點，前面介紹目錄時也標示了，就是main.ts       

src/main.ts
===========
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

        引導過程搭建運行環境，從模塊的bootstrap數組中提出根AppComponent， 建立該組件的實例，並將其插入到組件selector標識的元素標籤中，AppComponent選擇器 — 在這裏以及文檔大部分例子中 — 是my-app， 因此 Angular 在index.html中查找像這樣的<my-app>標籤【ps:這裏有一點點組件語法的東西，不清楚能夠跳過，組件語法後面教程會有的】。

src/index.html
===========
<app-root></app-root>

          就這樣Angular經過main.ts這個入口點動態 (JiT) 編譯建立瀏覽器平臺並引導AppModule啓動。

       至此，咱們也算簡單入門了typescript,同時瞭解了項目的目錄結構以及Angular是如何引導AppModule啓動應用的。