Angular2从环境搭建到开发

最新推荐文章于 2021-08-18 15:07:44 发布

水痕01

最新推荐文章于 2021-08-18 15:07:44 发布

阅读量3.2k

点赞数 5

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/kuangshp128/article/details/70224289

版权

angular 专栏收录该内容

44 篇文章 6 订阅

订阅专栏

本文章讲述两种配置的方法分别为:手动配置和一键配置

一、手动配置的方法:

|--hello word
|----src
|------app.component.html
|------app.component.ts
|------app.module.ts
|------main.ts
|----index.html
|----package.json
|----tsconfig.js
|----webpack.config.js

2、index.html代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular 2 Hello World</title>
    <base href="/">
  </head>
  <body>
    <hello-world>
      加载中...
    </hello-world>
    <script src="bundle.js"></script>
  </body>
</html>

3、package.json代码

{
  "name": "HelloWorld",
  "version": "1.0.0",
  "description": "Hello-world project for Angular 2",
  "scripts": {
    "server": "webpack-dev-server --inline --colors --progress --port 3000",
    "start": "npm run server"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/core-js": "0.9.34",
    "ts-loader": "1.2.0",
    "typescript": "2.0.0",
    "webpack": "1.12.9",
    "webpack-dev-server": "1.14.0"
  },
  "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",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  }
}

4、tsconfig.js代码

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

5、webpack.config.js代码

var webpack = require('webpack');
var path = require('path');
module.exports = {
  entry: './src/main.ts',

  output: {
    filename: './bundle.js'
  },

  resolve: {
    root: [ path.join(__dirname, 'src') ],
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

6、src/app.component.html代码

<h3>
  Hello Angular2!
</h3>

7、src/app.component.ts代码

import {Component} from '@angular/core';

@Component({
  selector: 'hello-world',
  templateUrl: 'src/app.component.html'
})
export class AppComponent {
}

8、src/app.module.ts代码

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

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

9、src/main.ts代码

// import 'reflect-metadata';
import 'core-js'; // include reflect & polyfill
import 'zone.js';

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

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

10、直接运行npm install 安装包
11、npm run server

二、利用`Angular-CLI`脚手架配置详细见

说明	命令
安装angular-cli	npm install -g angular-cli
新建一个项目	ng new 项目名称
新建一个带路由的项目	ng new 项目名称 –routing(是两个-)
新增一个组件	ng g component 组件名称
新增一个自定义指令	ng g directive 名称
新增一个目录下的指令	ng g directive 文件夹名称/指令名称
新增一个管道	ng g pipe 名称
新增一个服务	ng g service 名称

三、在`typescript`中支持`jquery`与`bootstrap`

npm install jquery –save
npm install bootstrap –save
npm install @types/jquery–save-dev
npm install @types/bootstrap –save-dev
在angular-cli.json中引入安装地址

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],