NET Core.اب هارمه MVC 6 و AngularJS زا هدافسا هلاقم ناونع ... ·...

.NET Core باهمراه MVC 6 و AngularJS استفاده از :عنوان مقاله

وتنظیم کننده : مرجع تخصصی برنامه نویسانتهیه

www.barnamenevisan.org [email protected]

ها ، Packge Manager را آموزش دهیم و در کنار آن از ASP.NET core در این مقاله قصد داریم نحوه نصب و اجرای

gulp ،Type Script و از فریم ورک قدرتمند ، Angular2 استفاده کنیم .

. مواردی که در این مقاله بررسی می کنیم

نصب محیط کار.1

ASP.NETبررسی اجمالی .2

NET Core 1.0.وع کار با شر.3

Explorerبررسی .4

MVC 6افزودن .5

2AngularJs 6.

مدیریت وابستگی های سمت کاربر

Pcakage Managerاستفاده از

Task Runnerاستفاده از

http://www.barnamenevisan.org/

http://barnamenevisan.org/Articles/Article5246.html




Type Scriptبوت استرپ با استفاده از

ساخت و اجرای برنامه .7

نصب محیط کار

: پیش نیاز ها

1 . Visual Studio 2015

2 . ASP.NET Core 1 . 0

: Visual Studio 2015 دقت داشته باشید کهVisual Studio 2015 بایدUpdate 3 ر غیر این صورت باشد د

.آن را بروزرسانی کنیدلینک میتوان از طریق این

NET Core.دانلود

. یدمیتوان یکی از این دو را دانلود کن

( SDK 1..NET Core کیت توسعه نرم افزار/ رابط خط فرمان)

2 ( VS 2015 Tooling Preview –2.2 ..NET Core 1 . 0 . 0 با اجرای برنامه ها.NET Core )

.می دهیم ASP.NETحال قبل از این که سراغ موضوع اصلی برویم یک توضیح مختصر راجب

ASP.NETبررسی اجمالی


https://www.visualstudio.com/products/free-developer-offers-vs

https://www.visualstudio.com/news/releasenotes/vs2015-update3-vs

https://www.visualstudio.com/news/releasenotes/vs2015-update3-vs

https://www.microsoft.com/net/core#windows

https://go.microsoft.com/fwlink/?LinkID=809122

https://go.microsoft.com/fwlink/?LinkId=817245




.NET Framework

. اجرا می شود Windowsتنها بر روی پلتفرم .1

NET Framework runtime.ساخته شده بر روی .2

.Dependency Injection (DI )و MVC,Web API &SignalR) ) پشتیبانی از.3

4.MVC & Web API Controller را از هم جدا می کند.

.NET Core

1 . Open Source

Cross Platformتوسعه و اجرا به صورت . 2





NET Framework.و همچنین NET Core runtime.ساخته شده برروی . 3

سهولت در تالیف پویا . 4

Dependency Injectionساخته شده در . 5

6 . MVC & Web API Controller کنند می بری ارث هر دو از کالس اصلی.

( Bower ،NPM ،Grunt & Gulp)ابزار هوشمند . 7

ابزار خط فرمان . 8

NET Core 1.0.شروع کار با

.مایجاد می کنی ASP.NET Core Web Applicationدر ویژوال استودیو یک پروژه جدید از نوع

. را انتخاب کنید تا یک پروژه خالی ایجاد شود Emptyدر این قسمت





. همان طور که مشاهده می کنید یک پروژه خالی در ویژوال استودیو ایجاد شده است





. قرار دارند بررسی می کنند Explorerدر قسمت زیر فایل هایی که درون

Explorerبررسی

. را نمایش می دهد Explorerتصویر زیر فایل های درون

. را بررسی می کنیم Program.csاول از همه فایل

Programe.cs : میخواهیم در این قسمت قطعه کد زیر را بررسی کنیم .

1. namespace CoreMVCAngular

2. {

3. public class Program





4. {

5. public static void Main(string[] args) {

6. var host = new

WebHostBuilder().UseKestrel().UseContentRoot(Directory.GetCurrentDirectory()).UseIISIntegrati

on().UseStartup < Startup > ().Build();

7. host.Run();

8. }

9. }

10. }

.UseKestrel() :برای تعریف وب سرور استفاده می شود.ASP.NET Core ازIIS وISS Express پشتیبانی می

. کند

HTTP Servers

1 . Microsoft.ASP.NET Core.Server.Kestrel(Cross-platform)

2 . Microsoft.ASP.NETCore.Server.WebListener(Windwos-Only)

.UseContentRoot(Directory.GetCurrentDirectory()) : مسیر اصلی برنامه است که آدرسroot directory

. را برای برنامه مشخص می کند

.UsellSintegration() : برای هاست کردن بر رویIIS وIIS Express .

.UseStartup<Startup> : مشخص کردن کالسStartup

Build() : IwebHost را میسازد تا برنامهHost واست های شود و درخHTTP را مدیریت کند .

Startup.cs

. است که سرویس ها را برای برنامه فراهم می کند NET Core.این کالس نقطه شروع تمام برنامه های





1. namespace CoreMVCAngular

2. {

3. public class Startup

4. {

5. // This method gets called by the runtime. Use this method to add services to the

container.

6. // For more information on how to configure your application, visit

http://go.microsoft.com/fwlink/?LinkID=398940

7. public void ConfigureServices(IServiceCollection services) {}

8. // This method gets called by the runtime. Use this method to configure the HTTP

request pipeline.

9. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory

loggerFactory) {}

10. }

11. }

Configureو دیگری ConfigureServicesهمان طور که مشاهده می کنید دو متد در کد باال وجود. یکی از آنها

.سه پارامتر تعریف شده است Configureاست . در متد

IApplicationBuilder ، یک کالس را برای فراهم کردن مکانیزمconfigure درخواست یک برنامه مشخص می

.کند

.را به مسیر درخواست اضافه کرد MVC(middleware)و پسوند متد میتوان ”Use“با استفاده از

ConfigureServices یکExtension Method است که ، پیکربندی استفاده از چند سرویس است .

Project.json : در این فایل وابستگی های برنامه لیست شده است و زمانی برنامه اجرا می شود که تنظیمات را

.گردآوری می کند


http://go.microsoft.com/fwlink/?LinkID=398940%C2%A0




Dependencies : تمام وابستگی های برنامه میتوانند به قسمتDependencies اضافه شوند ، اگر افزودن آنها

.را اضافه کنیدبه شما کمک می کندآنها intellisenseضروری باشد

.باز گردانده می شوند Nuget طریق از خودکار طور به ها وابستگی بعد از این که تغییرات را اعمال کردیم





: در این قسمت کدها تغیر کرده اند

• "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"

• },

را انتخاب کنیم Uninstall packageکلیک راست کرده و Packageبرای حذف ، میتوان بر روی





Tools : در این بخش مدیریت و لیستی ازCommand ها وجود دارد. IISIntegration به طور پیش فرض اضافه می

. است IISروی کردن برنامه بر Publishاست که برای Publish دستور شود و این ابزار شامل

1. "tools": {

2. "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"

3. },

Framework : همان طور که مشاهده میکنید ، در ابتدا زمانی که برنامه اجرا می شود به طور پیش فرض بر روی

.NET Core اجرا می شود .

1. “netcoreapp1 .0”.

2. "frameworks": {

3. "netcoreapp1.0": {

4. "imports": ["dotnet5.6", "portable-net45+win8"]

5. }

6. },

Build Option : Option ها در حین کامپایل شدن برنامه ساخته شده اند.

1. "buildOptions": {

2. "emitEntryPoint": true,

3. "preserveCompilationContext": true

4. },

RuntimeOption : مدیریت جمع آوریgarbage زمان اجرا برنامه .

1. "runtimeOptions": {

2. "configProperties": {





3. "System.GC.Server": true

4. }

5. },

PublishOptions : تعریف کردنFile/Folder وinclude/exclude کردن آنها از خروجی پوشه زمانPublish

. شدن برنامه

1. "publishOptions": {

2. "include": ["wwwroot", "web.config"]

3. },

Scripts : Scripts یک نوعObject است کهScript ها را زمان اجرا یاPublish مشخص می کند .

1. "scripts": {

2. "postpublish": ["dotnet publish-iis --publish-folder %publish:OutputPath% --framework

%publish:FullTargetFramework%"]

3. }

MVC6افزودن

تعریف شده اند ، و که NET Core 1.0 MVC & Web API.را اضافه کنیم. در MVC6در این قسمت میخواهیم

. به صورت جداگانه از کالس اصلی ارث بری می کنند

را باز می کنیم و یک وابستگی به Project.json . را به برنامه اضافه می کنیم MVC Serviceحال می خواهیم

. چند وابستگی به آن اضافه می کنیم dependencies دربخش. کنیم می اضافه آن

• "Microsoft.AspNetCore.Mvc": "1.0.0",

• "Microsoft.AspNetCore.StaticFiles": "1.0.0"





. و آن را ذخیره می کنیم

. ها به پروژه بازگردانی می شوند Packageبه صورت خودکار

. کنیماضافه می Startupبه کالس Configدر متد request pipelineرا به MVC(midleware)حال میخواهیم





1. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory

loggerFactory) {

2. loggerFactory.AddConsole();

3. if (env.IsDevelopment()) {

4. app.UseDeveloperExceptionPage();

5. }

6. //app.UseStaticFiles();

7. app.UseMvc(routes => {

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

9. });

10. }

. حال میخواهیم داریم framework Service، ما نیاز به افزودن ConfigureServicesدر متد

Service.AddMvc(); را اضافه می کنیم .

1. public void ConfigureServices(IServiceCollection services) {

2. services.AddMvc();

3. }

MVCساختار پوشه های

را به پوشه Controllerم . و اضافه میکنی Viewsها را به پوشه View. را اضافه کنیم MVCحال میخواهیم پوشه های

Controllers اضافه می کنیم .





. وجود دارد ”ViewImport.cshtml“یک فایل به نام Viewهمان طور که مشاهده می کنید در پوشه

namespace های پروژه به آنView هایی است که باعث می شود namespace شامل ViewImport.cshtml فایل

.استفاده می کردند Web.configه باشند، در نسخه های قبلی از ها دسترسی داشت

را ویرایش کنیم و پیغام خوش آمد گویی در آن قرار دهیم و برنامه را اجرا کنیم میتوانید ببینید Viewبیایید محتویات

.که پیام خوش آمد گویی در صفحه ظاهر می شود





AngularJS2

AngularJS2 یک فریم ورک جدید جاوا اسکریپتی است که سمت کاربر از آن استفاد می شود . این فریم ورک جاوا

.نوشته شده است TypeScriptاسکریپتی کامال جدید است و بر اساس

. مراحل زیر برای یادگیری است و نصب برنامه است

کاربر سمت های وابستگی مدیریت

Package Manager (NPM)استفاده از

Task Runnerاستفاده از

Type Scriptبوت استرپ با استفاده از

Node Package را برای JSON پیکربندی فایل یک وابستگی های سمت کاربر : در این قسمت ما نیاز داریم

Manager(NPM) اضافه کنیم ، برای این کارnpm Configuration File را به پروژه اضافه می کنیم .





. که به پروژه اضافی کرده ایم تغییراتی ایجاد می کنیم npm config فایل حال در

Package.json

1. {

2. "version": "1.0.0",

3. "name": "asp.net",

4. "private": true,

5. "Dependencies": {

6. "angular2": "2.0.0-beta.9",

7. "systemjs": "0.19.24",

8. "es6-shim": "^0.33.3",

9. "rxjs": "5.0.0-beta.2"

10. },

11. "devDependencies": {

12. "gulp": "3.8.11",

13. "gulp-concat": "2.5.2",

14. "gulp-cssmin": "0.1.7",

15. "gulp-uglify": "1.2.0",

16. "rimraf": "2.2.8"

17. }

18. }

: داریم و دیگر وابستگی ها عبارت اند از Angular2در بخش وابستگی ، ما نیاز به اضافه کردن

Es6 کند می سازگار قدیمی های محیط با را آن که است یک کتابخانه.





RXjs ر را به فرمت های مختلف فراهم می کندفایل های ماژوال.

SystemJS System,import را فعال می کند و فایل به طور مستقیم فایل هایType Script را وارد می کند.

به کار می purposesمتفاوت وجود دارد.یکی از وابستگی ها که برای عمل Objectهمان طور که مشاهده می کنید ، دو

که gulp است برای توسعه اجزای مربوط به آن می شود کاربرد دارد مانند devDependenciesرود و دیگری که

.های مختلف استفاده می شود Taskبرای اجرای

های مورد نیاز را به Packageشود. در این قسمت Restoreکلیک کنید تا به صورت خودکار Saveحال بر روی

Dependencies اضافه کرده ایم .

را New Itemدیگری به پروژه اضافه کنیم . برای این کار گزینه Package Managerدر این قسمت میخواهیم

. را اضافه می کنیم Client-Side ---> Bower Configuration Fileانتخاب کرده و در قسمت





: Bowerو NPMمقایسه

Bower :

Html,Css,jsمدیریت کامپوننت های .1

حداقل منابعبارگذاری .2

dependenciesبارگذاری با استفاده از .3

NPM :

recursivelyنصب وابستگی ها به صورت .1

ها dependencieبارگذاری تو در تو .2

NodeJS moduleمدیریت .3





. را باز کنید و سپس وابستگی های مورد نظر خود را در بخش وابستگی با نسخه خاص ، وارد کنید configفایل

می شوند. در این قسمت شما Restoreها به صورت خودکار Packageرا ویرایش کردیم ، JSONاز این که فایل پس

. را به پروژه اضافه می کنیم Bootstrap و Bower ،Jqueryمیتوان مشاهده کنید که ما با استفاده از

را انتخاب کنید و در قسمت New Itemبرای این کار را به پروژه اضافه کنیم . gulpحال میخواهیم ، ، فایل پیکربندی

Client-Side فایل ، gulp JSON را به پروژه اضافه کنید .





gulp.json

/*

This file in the main entry point for defining Gulp tasks and using Gulp plugins.

http://go.microsoft.com/fwlink/?LinkId=518007Click here to learn more.

*/

"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/'));

});


http://go.microsoft.com/fwlink/?LinkId=518007




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']);

را انتخاب Task Runner Explorerکلیک راست می کنیم و FileGulp، بر روی فایل gulpهای taskبرای اجرای

. می کنیم

. را انتخاب کنید Runبر روی آن کلیک راست کرده و Taskبرای اجرای





Task ها اجرا و به پایان رسیدند.

را تعیین es6-shim، تمام بسته های مورد نیاز کپی می شوند .در این قسمت الزم است نوع Solution Explorerدر

“ Cannot find name 'Promise" : کنیم ، اگر نوع آن را مشخص نکنیم با این خطا مواجه می شوید





TypeScriptبوت استرپ با استفاده از

TsConfig.json

1. {

2. "compilerOptions": {

3. "noImplicitAny": false,

4. "noEmitOnError": true,

5. "removeComments": false,

6. "sourceMap": true,

7. "target": "es5",





8. //add this to compile app component

9. "emitDecoratorMetadata": true,

10. "experimentalDecorators": true,

11. "module": "system",

12. "moduleResolution": "node"

13. },

14. "exclude": ["node_modules", "wwwroot/lib"]

15. }

noImplicitAny : رفع کردن خطای expressions وdeclarations با "any".

noEmitOnError : اگر خروجی منتشر نشود نوع خطا گزارش می شود .

Target : ه مشخص کردن نسخECMAScript به طور پیش فرض بر رویes5 قرار دارد .

experimentalDecorators : فعال کردنexperimental برای پشتیبانی از ES7 decorators .

. اضافه می کنیم wwwrootدر ts.یک پوشه برای فایل





. ، شما میتوان فایل های زیر را اضافه کنید Solution Explorer در

. اضافه کرده ایم componentرا به bootstrap , AngularJSهای main.ts ،Code Snippetدر

import {bootstrap} from 'angular2/platform/browser';

import {AppComponent} from './app.component';

import {enableProdMode} from 'angular2/core';

enableProdMode();

bootstrap(AppComponent);

Component : تابع Component خانه کتاب از را Angular2 اضافه می کند با انجام این کار کالس

AppComponent نیز میتوان از Component های دیگر به کد ما افزوده شود.

import {Component} from 'angular2/core';

1. @Component({

2. selector: 'core-app',

3. template: '<h3>Welcome to .NET Core 1.0 + MVC6 + Angular





2</h3>'

4. })

5. export class AppComponent {}

MVC View : زمان آن رسیده است کهlayout کنیم لینک را خود های کتابخانه خود را بروزرسانی کنیم و .

. اضافه کنیم layoutهای خود را به صفحه Refrenceحال میخواهیم

1. <!DOCTYPE html>

2. <html>

3.

4. <head>

5. <meta name="viewport" content="width=device-width" />





6. <title>@ViewBag.Title</title>

7. <script src="~/lib-npm/es6-shim/es6-shim.js"></script>

8. <script src="~/lib-npm/angular2/angular2-polyfills.js"></script>

9. <script src="~/lib-npm/systemjs/system.src.js"></script>

10. <script src="~/lib-npm/rxjs/Rx.js"></script>

11. <script src="~/lib-npm/angular2/angular2.js"></script>

12. </head>

13.

14. <body>

15. <div> @RenderBody() </div> @RenderSection("scripts", required: false) </body>

16.

17. </html> Index.cshtml @{ ViewData["Title"] = "Home Page"; }

18. <core-app>

19. <div>

20. <p><img src="~/img/ajax_small.gif" /> Please wait ...</p>

21. </div>

22. </core-app> @section Scripts {

23. <script>

24. System.config({

25. packages: {

26. 'app': {

27. defaultExtension: 'js'

28. }

29. },





30. });

31. System.import('app/main').then(null, console.error.bind(console));

32. </script> }

. را اضافه می کنیم ;()app.UseStaticFilesخود startup باشند به Staticی این که فایل های پروژه برا

Build و اجرای پروژه

خروجی

. کار می کند Angularjs2حال میتوان مشاهده کنید که برنامه با


NET Core.اب هارمه MVC 6 و AngularJS زا هدافسا هلاقم ناونع ... ·...

Documents

Transcript of NET Core.اب هارمه MVC 6 و AngularJS زا هدافسا هلاقم ناونع ... ·...