让我们尝试使用ASP.NET Core + angular2（第一部分）

2 年 ago
新, 韵
4 minutes

创建一个ASP.NET Core + Angular2应用程序（第1部分）

作业仓库在这里

出现的事物

    • ASP.NET core MVC

 

    • Entity Framework core

 

    • Angular2

 

    • Bootstrap4

 

    • fontawesome

 

    • Webpack

 

    • Typescript

 

    Sass

这次我们将使用Visual Studio 2015 Update3。
虽然步骤可能有些不同，但在Mac等设备上也应该可以操作。

首先准备ASP.NET Core MVC环境

我选择了WebApi项目

1468332917162.png

为了在同一台服务器上运行angular2，需要启用静态文件。

要在同一台服务器上运行angular2，需要激活静态文件。

添加到依赖项

"Microsoft.AspNetCore.StaticFiles": "1.0.0"

在Startup.cs中的Configure方法中进行添加

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            ..

            app.UseStaticFiles();

            ..
        }

创建用于运行Angular的视图

@{
    Layout = "_Layout";
}

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="~/dist/vendor-style.css" />
    <link rel="stylesheet" href="~/dist/app-style.css" />
</head>
<body>
    @RenderBody()

    <script src="~/dist/vendor.bundle.js"></script>
    <script src="~/dist/app.bundle.js"></script>
</body>
</html>

@{
    ViewData["Title"] = "Lanos CRM";
}

<div class="container">
    <my-app class="container">Loading...</my-app>
</div>

制作游戏手柄

using Microsoft.AspNetCore.Mvc;

namespace core_angular2.Controllers
{
    public class HomeController : Controller
    {
        [Route("")]
        public IActionResult Index()
        {
            return View();
        }
    }
}

修改Properties/launchSettings中的初始显示路径。

将其空置

"launchUrl": "",

如果能做到这一点并运行，如果出现”加载中”的提示，那就可以了。

安装Angular2和其他所需的库

{
  "name": "core_angular2",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webpack":  "webpack"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^4.0.0-alpha.2",
    "core-js": "^2.4.0",
    "font-awesome": "^4.6.3",
    "jquery": ">=2.0.0 <3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "tether": "^1.3.2",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "font-awesome-sass-loader": "^1.0.1",
    "gulp": "^3.9.1",
    "imports-loader": "^0.6.5",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-merge": "^0.14.0",
    "webpack-stream": "^3.2.0"
  }
}

npm安装!!

在根目录下执行 npm install 命令。

创建tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

也创建typings

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

将依赖模块整合到Typescript中。

import '../node_modules/core-js';
import '../node_modules/zone.js/dist/zone';

import "../node_modules/@angular/common";
import "../node_modules/@angular/compiler";
import "../node_modules/@angular/core";
import "../node_modules/@angular/forms";
import "../node_modules/@angular/http";
import "../node_modules/@angular/platform-browser";
import "../node_modules/@angular/platform-browser-dynamic";
import "../node_modules/@angular/router";

import "../node_modules/bootstrap/dist/js/bootstrap";

import '../node_modules/rxjs/Rx';

import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/font-awesome/css/font-awesome.css';
require("font-awesome-sass-loader");

整理自己定义的风格

import './styles/sample.scss'; /* 適当なscssを作って試すといい */

整理Angular2的代码

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App<span class="fa fa-flag"></span></h1>'
})
export class AppComponent { }

使用webpack将所需的模块打包并使用

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// Webpack Config
var webpackConfig = {
    entry: {
        'app': './Client/app/app.ts',
        'vendor': './Client/vendor.ts',
        'app-style': './Client/app-style.ts',
        'vendor-style': './Client/vendor-style.ts',
    },

    devtool: 'source-map',

    cache: true,
    output: {
        path: './wwwroot/dist',
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery"
      }),
      new webpack.ProvidePlugin({ "window.Tether": "tether" }),
      new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'], minChunks: Infinity }),
      new ExtractTextPlugin("[name].css"),
      new webpack.optimize.DedupePlugin()
    ],

    module: {
        loaders: [
          // .ts files for TypeScript
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
            { test: /\.scss$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
            { test: /\.sass$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
            { test: /\.less$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
    }

};

var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(webpackConfig);

编译并执行该代码

在根目录下执行 npm run webpack

    当您在 Visual Studio 中进行调试时，应该会显示“我的第一个 Angular 2 应用程序”。

如果出现了就代表成功。

更多 duō)

    • VisualStudioの機能でビルド前後や起動時にnpmコマンドを挟み込んだりできので、webpackコマンドをどこかに入れると便利

 

    webpackのコンパイルが遅いのでwebpack-dev-serverを入れると便利

下次 or 下一次.

目前，我仍未开始涉足ASP.NET和angular的组合使用，但我计划在接下来的工作中处理它们的整合，以及进行EntityFramework的设置和认证等方面的任务。

我也做了EF的设置。

我非常感谢公式文件的帮助。

✖
广告
将在 10 秒后关闭
bannerAds