.NET CORE 1.0, MVC6 & ANGULARJS2 -启动

下载CoreMVCAngular2.zip - 5.5 MB

表的内容: ASP的设置环境概述。net从。net Core 1.0开始。探索初始模板(空)如何添加mvc6 angularjs2 使用包管理器(NPM)管理客户端依赖关系。使用类型脚本使用任务运行器引导构建和运行应用程序 1. 设置环境先决条件:需要以下先决条件。 Visual Studio 2015 asp。1.0网络核心 Visual Studio 2015:如果你已经安装了Visual Studio 2015的副本，你可以用update 3更新Visual Studio 2015。或免费下载Visual Studio Community 2015。 net核心下载: 你可以下载其中一项: net核心SDK 工具。net Core 1.0.0—VS 2015工具预览2(使用。net Core运行时运行应用程序) 我们都准备好了要走。在深入我们的主题之前，让我们先来概述一下ASP.Net。 2. 在ASP.Net上概述让我们区分两种。 net框架: 仅在Windows平台上开发和运行。构建在。net框架运行时上。支持(MVC, Web API &依赖注入(DI)。MVC,Web Api控制器是分开的。 ,。Net核心: 开源的。发达,在跨平台上运行。构建在。net核心运行时上也是在。net框架上。动态编译的工具。内置依赖注入(DI)。MVC,Web Api控制器是统一的，从相同的基类继承。智能工具(Bower, NPM, Grunt &)杯)。命令行工具。 3.从。net Core 1.0开始让我们用Visual Studio 2015 >创建一个新项目;文件比;新比;项目选择空模板，点击>好的。 Visual Studio将创建一个新的asp.net项目。Net Core空项目。现在我们将逐个研究所有初始文件。 4. 探索初始模板标记从解决方案探险家正在一个一个地探索。首先我们知道program.cs文件。好，让我们集中注意力。程序。cs:这里我们有一段代码样本，让我们来解释一下。隐藏,复制Code

namespace CoreMVCAngular
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var host = new WebHostBuilder()
                .UseKestrel()
                .UseContentRoot(Directory.GetCurrentDirectory())
                .UseIISIntegration()
                .UseStartup<Startup>()
                .Build();

            host.Run();
        }
    }
}

. usekestrel():定义web服务器。ASP。NET Core支持IIS和IIS Express中的托管。 HTTP服务器: Microsoft.AspNetCore.Server。红隼microsoft.aspnetcore.server(跨平台)。WebListener (windows) . usecontentroot (Directory.GetCurrentDirectory()):用于指定应用程序根目录路径的应用程序基本路径。 . useiisintegration():用于在IIS和IIS Express中托管。 . usestartup<Startup>():指定启动类。 .Build():构建将托管应用程序的IWebHost管理传入的HTTP请求。启动。cs:这是每个。net核心应用程序的入口点，提供应用程序所需的服务。隐藏,复制Code

namespace CoreMVCAngular
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            
        }
    }
}

正如你所看到的，有两种方法，一种是配置服务&另一个是配置。在Configure方法中，指定了三个参数。 IApplicationBuilder定义了一个类，它提供了配置应用程序请求的机制。我们可以使用“Use”扩展方法将MVC(中间件)添加到请求管道中，稍后我们将使用它。 ConfigureServices是一个公共方法，配置为使用多个服务。项目。json:这里列出了我们的应用程序依赖项的名称。的版本。该文件还管理运行时、编译设置。依赖:所有的应用依赖，如果需要，我们可以添加新的依赖，智能感知将帮助包括名称和。的版本。保存更改后，它会自动从NuGET恢复依赖关系。这里是我更改的代码片段。隐藏,复制Code

"dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.0",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Diagnostics": "1.0.0",

    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
    "Microsoft.Extensions.Logging.Console": "1.0.0",
    "Microsoft.AspNetCore.Mvc": "1.0.0"
  },

要卸载，请访问解决方案资源管理器>右键单击package >卸载包工具:本部门管理及管理。列表命令行工具，我们可以看到IISIntegration。默认情况下添加的工具是一个包含dotnet publish iis命令的工具，用于在iis上发布应用程序。隐藏,复制Code

"tools": {
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
  },

框架:正如我们最初看到的，我们的应用程序默认运行在。net核心平台上，带有运行时代码隐藏,复制Code

"frameworks": {
    "netcoreapp1.0": {
      "imports": [
        "dotnet5.6",
        "portable-net45+win8"
      ]
    }
  },

构建选项:在构建应用程序时传递给编译器的选项。隐藏,复制Code

"buildOptions": {
    "emitEntryPoint": true,
    "preserveCompilationContext": true
  },

RuntimeOptions:在应用程序运行时管理服务器垃圾收集。隐藏,复制Code

"runtimeOptions": {
    "configProperties": {
      "System.GC.Server": true
    }
  },

PublishOptions:定义发布应用程序时要包含/排除到输出文件夹的文件/文件夹。隐藏,复制Code

"publishOptions": {
    "include": [
      "wwwroot",
      "web.config"
    ]
  },

脚本:脚本是对象类型，它指定在构建或发布应用程序期间运行的脚本。隐藏,复制Code

"scripts": {
    "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
  }

5. 添加MVC6 是时候添加MVC6了。在。net Core 1.0 MVC中Webapi是统一的，成为继承相同基类的单一类。让我们将MVC服务添加到应用程序中。开放的项目。json添加新的依赖项。在依赖项部分中添加两个依赖项。隐藏,复制Code

"Microsoft.AspNetCore.Mvc": "1.0.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0" //Serving static file

单击Save。它将开始恢复pa自动ckages。现在让我们在启动类的配置方法中添加MVC(midleware)来请求管道。隐藏,复制Code

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

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    //app.UseStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

在ConfigureServices方法中，需要添加框架服务。我们添加了services.AddMvc(); 隐藏,复制Code

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
}

MVC文件夹结构: 让我们在示例应用程序中添加MVC文件夹结构。我们已经在视图文件夹中添加了视图文件。控制器文件夹中的MVC控制器，就像旧的MVC应用程序。在这里，您可能会注意到views文件夹“_ViewImports”中有一个新文件。cshtml”，该文件负责设置项目中的视图可以访问的名称空间，这之前是由web完成的。配置文件在views文件夹中。差不多做完了。让我们用欢迎消息修改视图内容。现在运行应用程序，可以看到主页上出现了欢迎消息。输出: 6. AngularJS2 AngularJS2是一个用于应用程序开发的现代客户端JavaScript框架。这个JavaScript框架是全新的。基于TypeScript编写。我们将遵循以下步骤来学习如何安装到我们的应用程序: 使用包管理器(NPM)管理客户端依赖关系。使用类型脚本使用任务运行器引导客户端依赖:我们需要为Node Package Manager(NPM)添加一个json配置文件。单击add祝辞新项目在端-端比;npm配置文件，然后单击Ok。打开新添加的npm配置文件并修改初始设置。隐藏,复制Code

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "Dependencies": {
    "angular2": "2.0.0-beta.9",
    "systemjs": "0.19.24",
    "es6-shim": "^0.33.3",
    "rxjs": "5.0.0-beta.2"
  },
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-concat": "2.5.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "rimraf": "2.2.8"
  }
}

在依赖部分，我们需要添加AngularJS2与其他依赖，这里他们是什么: 是一个库，提供了对旧环境的兼容性。Rxjs:提供多种格式的更模块化的文件结构。SystemJS:启用系统。直接导入TypeScript文件。正如你所看到的，有两种不同类型的对象，一种是用于生产目的的依赖。另一个是与开发相关的devDependencies，如gulp是运行不同的任务。单击save，它将自动恢复。在依赖项部分中，我们有所有需要的包。在这个应用程序中，我们添加了另一个名为Bower的包管理器，单击add >新项目在端-端比;配置文件，然后单击Ok。与NPM相比, 鲍尔: 管理html, css, js组件加载最小的资源加载与平面依赖 NPM: 递归加载嵌套依赖管理NodeJS模块打开配置文件，然后在特定版本的依赖项部分添加所需的依赖项。保存JSON文件后，它将自动恢复该包在我们的项目。这里你可以看到我们添加了Jquery &。引导包与鲍尔包管理器。现在让我们添加一个gulp配置文件来运行task。单击Add祝辞新项目在然后客户端选择要包含的gulp json文件。 Gulp.json 隐藏,收缩,复制Code

/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

"use strict";

var gulp = require("gulp");
var root_path = { webroot: "./wwwroot/" };

//library source
root_path.nmSrc = "./node_modules/";

//library destination
root_path.package_lib = root_path.webroot + "lib-npm/";

gulp.task("copy-systemjs", function () {
    return gulp.src(root_path.nmSrc + '/systemjs/dist/**/*.*', {
        base: root_path.nmSrc + '/systemjs/dist/'
    }).pipe(gulp.dest(root_path.package_lib + '/systemjs/'));
});

gulp.task("copy-angular2", function () {
    return gulp.src(root_path.nmSrc + '/angular2/bundles/**/*.js', {
        base: root_path.nmSrc + '/angular2/bundles/'
    }).pipe(gulp.dest(root_path.package_lib + '/angular2/'));
});

gulp.task("copy-es6-shim", function () {
    return gulp.src(root_path.nmSrc + '/es6-shim/es6-sh*', {
        base: root_path.nmSrc + '/es6-shim/'
    }).pipe(gulp.dest(root_path.package_lib + '/es6-shim/'));
});

gulp.task("copy-rxjs", function () {
    return gulp.src(root_path.nmSrc + '/rxjs/bundles/*.*', {
        base: root_path.nmSrc + '/rxjs/bundles/'
    }).pipe(gulp.dest(root_path.package_lib + '/rxjs/'));
});

gulp.task("copy-all", ["copy-rxjs", 'copy-angular2', 'copy-systemjs', 'copy-es6-shim']);

要运行该任务，请右键单击Gulp。json文件重新加载。右键点击复制-所有&单击Run。任务运行,就像你看到的那样。在解决方案资源管理器中复制所有必需的包。我们还需要为es6-shim(键入文件夹)输入类型定义，否则会导致错误——“无法找到name 'Promise'”。引导与打印稿 tsConfig.json 隐藏,复制Code

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",

    //add this to compile app component
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib"
  ]
}

noImplicitAny:在隐含的“any”类型的表达式和声明上引发错误。 noEmitOnError:如果报告了任何错误，则不发出输出。目标:指定ECMAScript目标版本:‘es5’(默认)、‘es5’或‘es6’。实验者:启用对ES7装饰器的实验支持。这里有更多关于编译器选项的细节。在wwwroot文件夹中为。ts文件创建一个app文件夹。在解决方案资源管理器中，您可以添加如下文件。在主。ts代码片段，引导AngularJS导入组件。隐藏,复制Code

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {enableProdMode} from 'angular2/core';

enableProdMode();
bootstrap(AppComponent);

Component:从Angular 2库中导入组件函数，使用“导出”，这意味着app组件类可以从其他组件中导入。隐藏,复制Code

import {Component} from 'angular2/core';

@Component({
    selector: 'core-app',
    template: '<h3>Welcome to .NET Core 1.0 + MVC6 + Angular 2</h3>'
})
export class AppComponent { }

MVC视图:是时候更新我们的布局了。结合图书馆。现在我们将添加引用到我们的布局页面。隐藏,复制Code

<!DOCTYPEhtml>

<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>@ViewBag.Title</title>

    <scriptsrc="~/lib-npm/es6-shim/es6-shim.js"></script>
    <scriptsrc="~/lib-npm/angular2/angular2-polyfills.js"></script>
    <scriptsrc="~/lib-npm/systemjs/system.src.js"></script>
    <scriptsrc="~/lib-npm/rxjs/Rx.js"></script>
    <scriptsrc="~/lib-npm/angular2/angular2.js"></script>
</head>
<body>
    <div>
        @RenderBody()
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml 隐藏,复制Code

@{
    ViewData["Title"] = "Home Page";
}
<core-app>
    <div>
        <p><imgsrc="~/img/ajax_small.gif"/>  Please wait ...</p>
    </div>
</core-app>

@section Scripts {
    <script>
        System.config({ packages: { 'app': { defaultExtension: 'js' } }, });
        System.import('app/main').then(null, console.error.bind(console));
    </script>
}

要做的另一件事是启用静态文件服务。将此行添加到启动配置方法中。隐藏,复制Code

app.UseStaticFiles();

7. 构建和运行应用程序最后构建,运行应用程序这里我们可以看到我们的应用程序使用AngularJS2 希望这能有所帮助:) 本文转载于：http://www.diyabc.com/frontweb/news17332.html

posted @ 2020-08-13 02:43 Dincat 阅读(164) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dincat

.NET CORE 1.0, MVC6 & ANGULARJS2 -启动

公告