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…

7：启动过程详解

须要掌握的内容：

启动时加载哪儿页面。（index.html）
启动时加载哪一个脚本。（main.ts）
启动时作了什么事情。

第三个问题要从main.ts来分析重点：

在main.ts中platformBrowserDynamic是动态引导项目加载。会把项目指引到AppModule中去。
AppModule中的bootstrap元数据，会指定模块的根组件也就是app.component.ts
根组件暴露出select选择器为app-root。而index.html中加载了<app-root></app-root>标签。从而实现了页面的显示