angular2初入眼帘之－搭个环境_angularjs

上一篇: 高级 Angular 组件模式 (1) 下一篇:Angular 5 开发一个有道翻译

angular2初入眼帘之－搭个环境

发布时间：2019-06-25 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了angular2初入眼帘之－搭个环境，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

angular2是什么？我猜不容我赘述，各位一定略有耳闻，无论是曾经AngularJS的拥趸，亦或是React的粉丝，都或多或少的对她有过一点了解。未见其物、先闻其声，angular2在问世之前已经做足了宣传，想必诸位也一定被下面各种词汇所震慑，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive Programming、 Decorators、 System.js、 webpack...，天花乱坠，美不胜收！但我们不禁要问，“都说AngularJS学习曲线陡峭，也没陡出这些个莫名词汇！”，angular2究竟该如何上手？看了这些个知识点，有木有吓得手抖，都搞不清从何处入手了！？
本教程主旨：多些操作、少点说教(理论是进阶必须的，千万不要误读)，让我们从实践中追寻真理吧！
本章源码：environment
本章使用Angular2版本为：2.4.5, webpack版本为: 2.2.0
推荐开发工具
vscode
这里我推荐使用vscode(原谅我变了，之前推荐的是atom)。很爽的哦！
创建项目

      
      
      
      
      
mkdir environment
cd environment
npm inIT
根据npm init提问，创建package.json文件，创建后去掉不必要的字段，像这样即可：

      
      
      
      
      
{
  "name": "environment",
  "version": "1.0.0",
  "description": "I will show you how to set up angular2 development environment",
  "keywords": [
    "angular2",
    "environment"
  ],
  "scripts": {
    "start": "webpack-dev-server --hot--host 0.0.0.0"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "dePEndencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "core-js": "^2.4.1",
    "RxJS": "5.0.3",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.5",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}
安装依赖

      
      
      
      
      
npm install

@angular: 这个必须的，没意见吧？之所以分了多个包，这是最新2.1.2的变化，可以按需引入，增加灵活性
core-js: javascript的一个标准库实现，包含了大量ES2015, ES2016的ES5实现
rxjs: 一个Reactive PRogramming的JavaScript实现。这里对她的依赖是因为angular2支持多种数据更新模式，比如：flux、Rx.js
zone.js: 用来对异步任务提供Hooks支持，使得在异步任务运行之前/之后做额外操作成为可能。在angular2里的主要应用场景是提高脏检查效率、降低性能损耗。
webpack: 我们这里使用webpack2对源码进行编译、打包，而不是用官网介绍的System.js的运行时加载、解释、执行。合并打包的好处不用我多说吧？减少请求数、uglify、预检查...
webpack-dev-server: 一个轻量级的，支持webpack编译的静态服务器(调试工具)，本章节我们就用它启动程序
ts-loader: Typestrong出品的TypeScript加载器，通过该加载器，TypeScript源码可以顺利被编译成ES5代码
typescript: angular2官方推荐的开发语言，我们在教程里也将使用该语言进行代码编写
@types/core-js: 自typescript 2.0.0以后，使用@types管理声明文件，由于angular2依赖ES2015的诸多特性，譬如：Promise、Map等，所以需要引入这些API的声明

第一个示例
创建index.htML


      
      
      
      
      
touch index.html
向刚才创建的index.html里添加如下内容：

      
      
      -tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


    
    
    environment


    
    
    
    

" title="" data-original-title="复制">
      
      
<!DOCTYPE html>
<@H_673_304@html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>environment</title>
</head>
<body>
    <!--这里引用我们的第一个component-->
    <my-app></my-app>
    <!--加载使用webpack编译后的bundle-->
    <script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>
创建app.ts


      
      
      
      
      
mkdir ts
touch ts/app.ts
向刚才创建的ts/app.ts里添加如下内容：

      
      
      From '@angular/core';

//声明第一个Component
@Component({
    selector: 'my-app',
    template: 'My First Angular 2 App'
})
export class AppComponent { }" title="" data-original-title="复制">
      
      
import {Component} from '@angular/core';

//声明第一个Component
@Component({
    selector: 'my-app',
    template: '<h1>;my First Angular 2 App</h1>'
})
export class AppComponent { }
创建index.ts


      
      
      
      
      
touch ts/index.ts
向刚才创建的ts/index.ts里添加如下内容：

      
      
      
      
      
//不显示引入，你会得到"Uncaught reflect-metadata shim is required when using class decorators"的错误
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

//引入NgModule装饰器
import { NgModule }      from '@angular/core';

//引入浏览器模块
import { BrowserModule } from '@angular/platform-browser';

//引入启动器
import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';

//引入我们刚才创建的第一个component
import { AppComponent }  from './app';

//声明一个应用模块
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

//启动应用
platformBrowserDynamic().bootstrapModule(AppModule);
创建webpack.config.js


      
      
      
      
      
touch webpack.config.js
向刚才创建的webpack.config.js里添加如下内容：

      
      
      
      
      
const {resolve} = require('path');

module.exports = {
    entry: {
        index: './ts/index.ts'
    },
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /.ts$/,
                use: ['ts-loader']
            }
        ]
    },
    resolve: {
        extensions: [
            '.js',
            '.ts'
        ]
    }
};

创建tsconfig.json


      
      
      
      
      
touch tsconfig.json
向刚才创建的tsconfig.json里添加如下内容：

      
      
      
      
      
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": false
    },
    "buildOnSave": false,
    "compileOnSave": false,
    "exclude": [
        "node_modules"
    ]
}
运行
好了，到目前为止，我们第一个示例的开发/运行环境就基本搭好了，现在启动试试看：

      
      
      
      
      
npm start
你会看到：

下回预告：牛刀小试component

脚本宝典总结

以上是脚本宝典为你收集整理的angular2初入眼帘之－搭个环境全部内容，希望文章能够帮你解决angular2初入眼帘之－搭个环境所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Angular Angular AngularJS API API const const const div es5 es6 export export export Map Map node post-format-gallery Promis React

上一篇: 高级 Angular 组件模式 (1) 下一篇:Angular 5 开发一个有道翻译

猜你在找的angularjs相关文章

全站导航更多

最新angularjs教程

热门angularjs教程

angular2初入眼帘之－搭个环境

推荐开发工具

vscode

创建项目

安装依赖

第一个示例

创建`index.htML`

创建`app.ts`

My First Angular 2 App

创建`index.ts`

创建`webpack.config.js`

创建`tsconfig.json`

运行

脚本宝典总结