Angular開山篇

時間 2019-12-04

標籤 angular 開山欄目 AngularJS 简体版

原文原文鏈接

1：環境搭建

今天給你們介紹4種環境搭建的方法。javascript

一：Angular-cli的安裝

官方指導文檔：www.angular.cn/guide/quickstartcss

請使用cnpm來安裝，或者配置淘寶鏡像。html

使用原生npm安裝可能會遇到的問題：前端

須要python的環境
可能會依賴某些franework致使會要求安裝Visual Studio（在下文中會爲你們介紹webstrom的配置）
node-sass // 由於ZF致使，被牆掉了。
node-gyp模塊可能會編譯錯誤。

若是還遇到問題能夠參考：http://blog.csdn.net/zhy13087...java

二：Angular-seed

Angular的種子文件，他有不少的版本，咱們今天經過官方的seed來安裝。node

官方的angular-seed地址：https://github.com/angular/an...python

步驟：webpack

git clone https://github.com/angular/an...安裝種子文件(沒有git的，能夠本身down zip下來，而後打開cmd，執行cnpm install)。

前置需安裝的包文件git

npm install -g webpack webpack-dev-server typescript
npm install
npm start
訪問本地 localhost:3000

seed文件的優勢：github

自帶簡單的路由
自帶From模塊
帶有Http請求模塊
體現出了Angular的核心功能
項目體量小

三：基於webpack安裝（爽歪歪的方法）

優勢：可讓咱們自由的配置webpack.config.js
步驟：https://github.com/kunl/Angul...
場景：從Node轉到前端的公司或者項目推薦用這種方式

手動建立項目（真正的勇士）

條件：大神級別的使用方法（我不是大神，會簡單的介紹一下）
優勢：想要什麼在項目中添加什麼，很是快捷
步驟：

準備工做：

在開始搭建Angular環境前，還須要作一些準備工做，包括安裝Angular所依賴的基礎環境Node.js，能夠在官網(https://nodejs.org/en/download/)下載安裝，須要確認Node.js版本爲v4.x.x以上，npm版本爲v3.x.x以上。使用版本爲node v5.11.0版本。

搭建步驟

1: 建立package.json

{
    "name": "HelloByHand",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
        "start": "npm run server",
        "server": "webpack-dev-server –inline –colors –progress –port 3000"
    },
    "dependencies": {
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/core": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "reflect-metadata": "~0.1.8",
        "core-js": "~2.4.1",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "~0.6.26"
    },
    "devDependencies": {
        "@types/core-js": "~0.9.34",
        "ts-loader": "~1.2.0",
        "webpack": "~1.12.9",
        "webpack-dev-server": "~1.14.0",
        "typescript": "~2.0.0"
    }
}

2：建立tsconfig.json
配置了typescript編譯器的編譯參數。

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments":false,
        "noImplicitAny": true,
        "suppressExcessPropertyErrors": true,
        "typeRoots": [
            "node_modules/@types"
        ],
        "exclude": [
            "node_modules"
        ]
     }
}

3：建立資源文件夾
在項目根目錄下建立一個src文件夾

4：建立組件相關文件
在src目錄下建立app.component.ts文件以及模板文件app.component.html，示例代碼以下：

//app.component.ts
import { Component } from '@angular/core';
@Component({
    selector: 'hello-world',
    templateUrl: 'scr/app.component.ts'
})
export class AppComponent {}  


//app.component.html
<h1>Hello World</h1>

5：建立app.module.ts文件
在Angular應用中須要用模塊來組織一些功能緊密相關的代碼塊，每一個應用至少有一個模塊，習慣上把它叫作AppModule。在src目錄下建立一個app.module.ts文件來定義AppModule，代碼以下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

6: 添加main.ts文件
Angular項目通常有一個入口文件，經過這個文件來串聯起整個項目。示例代碼以下：

//main.ts
import 'reflect-metadata';
import 'zone.js';
import { platforBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platforBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

7：建立index.html宿主頁面

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>加載中....</app-root>
  <script src="bundle.js"></script>
</body>
</html>

8：建立webpack.config.js

//webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './scr/main.js'
    output: {
        filename: './bundle.js'
    },
    resolve: {
        root: [path.join(__dirname, 'scr')],
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    }
}

重點：一個Angular項目必需要有一個模塊和一個組件。

2：詳細介紹Angular-cli命令行工具

官方文檔：https://github.com/angular/an...

建立項目和組件：

ng new (建立angular項目)
ng generate (建立項目中的組件等內容)
具體操做以下圖：

http://chuantu.biz/t6/44/1505...

啓動服務：
- ng serve --open (--open是在瀏覽器中打開的意思)
測試和打包
- ng test
- ng build

特色跟特性：藉助了 Amber Cli （負責：項目構建、項目的組織架構等） / WebPack（負責：調試、打包、測試）

3: Angular文件結構分析

以Angular-cli建立的項目目錄爲基礎。

e2e 文件端對端測試
src 咱們主要的開發代碼的存放位置
angular-cli.json angular-cli配置
karma.config.js 單元測試文件
package.json npm包管理配置
Protractor.conf.js 這也是測試的相關文件
README.md 有咱們的cli說明
Tsconfig.json 咱們的Typescript配置
Tslint.json 是咱們Typescipt代碼格式校驗文件

src 目錄下結構

app 根模塊、根組件
assets 放圖片、字體文件等等
environments 配置環境。生成環境、開發環境、測試環境
index.html 單應用的惟一頁面
main.ts 整個項目的入口腳本
polyfills.ts 兼容老版本的瀏覽器
styles.css 全局樣式配置
test.ts 測試用例的ts

4：源碼的位置分析

@angular/core 存放核心代碼，如變化監測機制、依賴注入機制、渲染等，核心功能的實現，裝飾器也會存放在這個模塊。
@angular/common 存放一些經常使用的內置指令和內置管道等。
@angular/froms 存放表單相關內置組件與指令。
@angular/http 存放網絡請求相關的服務等。
@angular/router 存放路由相關
@angular/platform-<X> 存放引導啓動相關工具。

5：WebStrom配置Angular

選擇File -> settings -> Languages & Frameworks -> Javascript，選擇編譯方式爲ECMAScript 6。
選擇File -> settings -> Languages & Frameworks -> Javascript->Libraries ->右側面板選擇 Add ->在彈出框中選擇綠色加號，再選擇目錄 ->在彈出的窗口中選擇當前項目下的node_modules 文件夾 ->一路ok和apply。等待IDE加載完畢便可。

6: Bootstrap等插件的安裝使用

咱們使用bootstrap的樣式，在控制層方面（bootstrap涉及到js的地方）咱們使用ngx-bootstrap。

官方地址：http://valor-software.com/ngx...涉及到javascript操做的部分在這個連接裏找解決方案。

AngularCli項目集成Bootstrap步驟：

npm install ngx-bootstrap bootstrap –save
在項目目錄下的 .angular-cli.json中的「styles」參數中添加：
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
重啓項目就能夠直接使用bootstrap的樣式了，例如form-group,btn…