Автор оригинала: Syed Ikram Shah.
Цель
В этом руководстве направлено на то, чтобы помочь вам начать с угловой 2 в ядре ASP.NET с использованием Visual Studio 2015. Выпуск угловых 2 и ASP.NET Core RC сделал построить SPA-интересную.
Я скомпилировал следующие шаги, чтобы помочь вам изучить угловой. 2. Надеюсь, вы чувствуете себя гораздо более расслабленным в конце этого подробного поста!
Шаг 1: Создание пустого проекта ASP.NET Core
Откройте Visual Studio 2015 Community Edition Update 3. Выберите «Новый веб-проект» и назовите его NGCORECONTACTS Отказ Затем выберите «пустой» шаблон проекта. Не забудьте
Я использовал Visual Studio 2015 Community Edition Update 3 (должен), TeampScript 2.0 (должен), последний NPM и Gulp.
Шаг 2: Настройте CORE ASP.NET для обслуживания статических файлов
CORE ASP.NET разработан в виде плагиновской структуры – он включает в себя только необходимые пакеты.
Давайте создадим файл HTML с именем index.html Под папкой WWWRoot.
Щелкните правой кнопкой мыши на папке WWWRoot, добавьте «новый элемент» и создайте index.html файл. Эта HTML-страница будет действовать как наша страница по умолчанию.
Angular 2 with ASP.NET Core
Demo of Angular 2 using ASP.NET Core with Visual Studio 2015
Для сердечника ASP.NET будет подавать статические файлы, нам нужно добавить статические файлы промежуточное программное обеспечение в методе настройки Startup.cs страница. Убедитесь, что пакеты восстанавливаются правильно.
Project.jso n переработан, чтобы сделать его лучше. У нас есть статические файлы промежуточного программного обеспечения для обслуживания статических активов, таких как HTML, файлы JS и т. Д.
public void Configure(IApplicationBuilder app)
{
app.UseDefaultFiles();
app.UseStaticFiles();
}
{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.1",
"type": "platform"
},
"Microsoft.AspNetCore.Diagnostics": "1.0.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
"Microsoft.Extensions.Logging.Console": "1.0.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0"
},
"tools": {
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
},
"frameworks": {
"netcoreapp1.0": {
"imports": [
"dotnet5.6",
"portable-net45+win8"
]
}
},
"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true,
"compile": {
"exclude": [ "node_modules" ]
}
},
"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},
"publishOptions": {
"include": [
"wwwroot",
"web.config"
]
},
"scripts": {
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}
Интересно, Program.cs Является ли точка входа в исполнение приложений, как void main () Отказ
Запустите приложение сейчас, и ASP.NET CORE сделает статическую страницу HTML.
Удалить index.html Страница – мы будем вводить это динамично позже.
То, что я только что продемонстрировал, это «WWWroot» в качестве корневой папчики для веб-приложений ASP.NET Core.
Шаг 3: Угловые 2 в ASP.NET CORE
Angular 2 предпринял гордость в том, что он является одной структурой для мобильных и настольных приложений. После окончательного выпуска не будет никаких неловковых изменений.
Этот учебник был вдохновлен 5 минут быстрого запуска , который больше сосредоточился на других редакторах светового веса. Здесь мы хотим использовать Обновление 3 сообщества Visual Studio 2015 Community для его встроенного в Tymdercript Tooling и другие функции.
Мы будем использовать WebPack для модуля Bundler – это отличная альтернатива подходу Systemjs. Читать Уенги и угловые 2 из более подробной информации.
Большинство сценариев WebPack основано на AngularClass Angular2-Webpack-стартер Отказ Я изменил это здесь в соответствии с веб-приложениями Asp.net Core.
Используемый здесь ядро ASP.NET – это тип сайте SPA, а не MVC.
Почему я выбирал WebPack для Angular 2 в ASP.NET Core?
- WebPack намного проще к коду и его плагины работают со статическими файлами.
- Легко запускать приложения в памяти, в реальном времени, перезагрузке и компиляции с помощью WebPack 2, с Dev-Server.
- Это обеспечивает дрожание дерева для устранения неиспользованного кода.
- Интеграция с третьей партийными пакетами, такими как угловой материал 2, ангемалфера и загрузочный материал – только одна строка включения
- AngularClass WebPack Starter Kit обеспечивает HMR (замена горячего модуля) – поддерживать состояние выполнения, когда код будет изменен.
- WebPack передается угловым CLI, который является Angularservice Microsoft, который делает пучки меньше.
Шаг 4: Добавление файла конфигурации NPM для угловых 2 пакетов
Угловая 2 команда нажимает кодовые изменения, используя NPM, а не CDN или любой другой источник. Из-за этого нам нужно добавить файл конфигурации NPM (package.json) в приложение Core asp.net.
Щелкните правой кнопкой мыши « NGCORECONTACTS », добавьте новый файл «Файл конфигурации NPM» – по умолчанию Package.json добавляется в Core Project Asp.net. Это файл менеджера узла пакета (NPM), должен добавлять пакеты для угловых 2
Из угловых 2 быстрого старта, указанного выше, нам нужно добавить зависимости, которые необходимы для угловых 2 в приложении Core Angular 2 в приложении ASP.NET. Скопируйте и вставьте следующую конфигурацию в Package.json файл:
{
"version": "1.0.0",
"description": "ngcorecontacts",
"main": "wwwroot/index.html",
"scripts": {
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/",
"server:prod": "http-server dist --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"dependencies": {
"@angular/common": "~2.0.1",
"@angular/compiler": "~2.0.1",
"@angular/core": "~2.0.1",
"@angular/forms": "~2.0.1",
"@angular/http": "~2.0.1",
"@angular/platform-browser": "~2.0.1",
"@angular/platform-browser-dynamic": "~2.0.1",
"@angular/router": "~3.0.1",
"@angular/upgrade": "~2.0.1",
"angular-in-memory-web-api": "~0.1.1",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.0",
"@angularclass/hmr-loader": "~3.0.2",
"@angularclass/request-idle-callback": "^1.0.7",
"@angularclass/webpack-toolkit": "^1.3.3",
"assets-webpack-plugin": "^3.4.0",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.17",
"@angular/material": "^2.0.0-alpha.9",
"hammerjs": "^2.0.8"
},
"devDependencies": {
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "^2.2.34",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.27",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.34",
"angular2-template-loader": "^0.5.0",
"awesome-typescript-loader": "^2.2.1",
"codelyzer": "~0.0.28",
"copy-webpack-plugin": "^3.0.1",
"clean-webpack-plugin": "^0.1.10",
"css-loader": "^0.25.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"parse5": "^1.3.2",
"phantomjs": "^2.1.7",
"raw-loader": "0.5.1",
"rimraf": "^2.5.2",
"source-map-loader": "^0.1.5",
"string-replace-loader": "1.0.5",
"style-loader": "^0.13.1",
"sass-loader": "^3.1.2",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.1",
"ts-node": "^1.3.0",
"tslint": "3.15.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.4.5",
"typescript": "2.0.3",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.22",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.1"
}
}
{
"version": "1.0.0",
"description": "ngcorecontacts",
"main": "wwwroot/index.html",
"scripts": {
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/",
"server:prod": "http-server dist --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"dependencies": {
"@angular/common": "~2.0.1",
"@angular/compiler": "~2.0.1",
"@angular/core": "~2.0.1",
"@angular/forms": "~2.0.1",
"@angular/http": "~2.0.1",
"@angular/platform-browser": "~2.0.1",
"@angular/platform-browser-dynamic": "~2.0.1",
"@angular/router": "~3.0.1",
"@angular/upgrade": "~2.0.1",
"angular-in-memory-web-api": "~0.1.1",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.0",
"@angularclass/hmr-loader": "~3.0.2",
"@angularclass/request-idle-callback": "^1.0.7",
"@angularclass/webpack-toolkit": "^1.3.3",
"assets-webpack-plugin": "^3.4.0",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.17",
"@angular/material": "^2.0.0-alpha.9",
"hammerjs": "^2.0.8"
},
"devDependencies": {
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "^2.2.34",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.27",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.34",
"angular2-template-loader": "^0.5.0",
"awesome-typescript-loader": "^2.2.1",
"codelyzer": "~0.0.28",
"copy-webpack-plugin": "^3.0.1",
"clean-webpack-plugin": "^0.1.10",
"css-loader": "^0.25.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"parse5": "^1.3.2",
"phantomjs": "^2.1.7",
"raw-loader": "0.5.1",
"rimraf": "^2.5.2",
"source-map-loader": "^0.1.5",
"string-replace-loader": "1.0.5",
"style-loader": "^0.13.1",
"sass-loader": "^3.1.2",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.1",
"ts-node": "^1.3.0",
"tslint": "3.15.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.4.5",
"typescript": "2.0.3",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.22",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.1"
}
}
Сразу после того, как вы сохраните это, ядро ASP.NET начнет восстановить пакеты. Это будет загружать все пакеты, упомянутые в разделе Зависимости вышеуказанного Package.json.
Иногда в исследовательском исследователь вы можете увидеть «зависимости – не установленные», не беспокойтесь об этой ошибке в инструментарии. Все пакеты NPM должны были быть установлены.
Шаг 5: Добавьте файл конфигурации Tymdercript – A должен для угловых 2 в ядре ASP.NET с использованием Teamscript
Мы создаем угловые 2 в ядре ASP.NET, начиная с Tymdercript. Мы должны включать в себя конфигурацию Teadercript из-за следующих причин: он может трансать JavaScript, модуль загрузки и целевых стандартов ES5.
Обратитесь к Начало работы с Tymdercript Если вы хотите руководство для начинающего на нем.
Добавить « Tsconfig.json » на проект и скопируйте и вставьте следующую конфигурацию.
Снимание « BaseURL » гарантирует, что Typlycript файлы транспортируются на JavaScript из « » ./Clientsrc ‘. Эта папка – это виртуальный каталог для Teadercript
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"baseUrl": "./clientsrc",
"paths": [],
"lib": [
"dom",
"es6"
],
"types": [
"hammerjs",
"node",
"source-map",
"uglify-js",
"webpack"
]
},
"exclude": [
"node_modules",
"dist"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"baseUrl": "./clientsrc",
"paths": [],
"lib": [
"dom",
"es6"
],
"types": [
"hammerjs",
"node",
"source-map",
"uglify-js",
"webpack"
]
},
"exclude": [
"node_modules",
"dist"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
}
Имейте в виду, что это обязательно установить TeampScript 2.O, чтобы работать с угловым 2.
Как сейчас, typings.json не требуется, потому что мы используем @types с помощью typeycts Отказ Однако, если вы используете любые другие пакеты, которые могут не иметь записей в @types, то typings.json должен быть добавлен.
Шаг 6: Использование WebPack в качестве модуля Bundler
Что такое WebPack?
По словам официального сайта,
WebPack – мощный модуль Bundler. Bundle – это файл JavaScript, который включает в себя активы, которые принадлежат вместе и должны быть обслуживаться клиентом в ответ на один запрос на файл. Пакет может включать JavaScript, CSS стили, HTML и практически любой другой тип файла.
WebPack бродит по исходному коду вашего приложения, в поисках операторов импорта, создание графика зависимости и излучаю один (или более) пучков. С помощью WebPack Plugin «Loaders» может предварительно получить и миниинзировать различные файлы не-JavaScript, такие как Tymdercript, Sass и stears.
В Package.json Мы добавили пакеты «WebPack» как « Devdependonds ». Они будут выполнять все пакетные работы.
Какой WebPack делает то, что он пишет в файле конфигурации JavaScript, как webpack.config.js Отказ Как всегда, приложения работают в Развитие , Тест и Производство среда.
Существуют некоторые общие функции и некоторые специфические для окружающей среды. Мы сосредоточимся на разработке и производственной среде.
Окружающая среда для разработки должна иметь исходные карты для отладки файлов Teamscript, министерствующих связке JS, CSS и т. Д. и других файлов, которые не нужны.
Производственная среда должна министерствовать пакеты, чтобы уменьшить время загрузки – имейте в виду, вы не должны включать исходные карты. WebPack 2 также делает встряхивание деревьев, то есть устранение неиспользованного кода для дальнейшего уменьшения размеров связки.
Весь исходный код на моем Github Repo – Не стесняйтесь вилкой или клон, чтобы играть с ним.
Теперь давайте посмотрим на WebPack.config.js Отказ Он основан на наборе окружающей среды process.env.node_env , и он запускается либо конфигурациями dev или Prod.
WebPack расщепляет угловые 2 приложения в 3 файла:
- Polyfills (для поддержания обратной совместимости со старыми браузерами)
- Продавцы (все JS, CSS, HTML, SCSS, изображения, json etc в один файл)
- Boot (файлы для конкретных приложений) разрешается на основе различных расширений файлов
Сам WebPack не знает, что делать с файлом без JavaScript. Поэтому мы должны научить его обрабатывать такие файлы в JavaScript с погрузчиками. Для этого мы написали загрузчики TS, HTML, JSON, шрифты и изображения.
Любые статические активы, размещенные в «CliSsrc/Assets», будут скопированы в папку активов, используя Copywebpackplugin Отказ CleanWebpackplugin Очистите папку «WWWRoot/Dist» каждый раз, когда мы запускаем ее, так что мы получаем новый набор файлов.
Поскольку мы уже удалили файл index.html, clientsrc/index.html Теперь будет перемещено на WWWRoot, используя Htmlwebpackplugin Отказ Кроме того, WebPack введет файлы Bundle (I.E. Polyfills, Vendor, Boot JS-файлы) и включают их в ссылку на сценарии HTML.
Теперь давайте посмотрим на webpack.dev.js. для целей развития.
Запустите «WebPack-Dev-Server»: это запускает все приложение в памяти, и любые изменения в исходном файле применяются немедленно.
Он будет загружать приложение в режиме отладки с исходной картой. Все работает в памяти (то есть HTML, JS, статические файлы) загружаются в память.
Запустите приложение на Plocalhost 3000 Port -> Порт можно изменить как ваше удобство -> Теперь посмотрим webpack.prod.js Для целей производства -> объединяет все файлы расслоения и копии на wwwroot -> Минифицирует все файлы, чтобы загрузить быстрее, используя UGLifyjsplugin плагин
Шаг 7: Написание приложения Angular 2
Мы создали приложение ASP.NET Core, добавили файл TSConfig и добавил конфигурацию WebPack. Теперь пришло время написать угловую 2 приложения.
В репо GitHub вы можете увидеть папку « CLIVESRC ». Это содержит Angular 2 приложение, которое включает в себя использование конфигураций WebPack Wee Wee.
Папка «CLIVESRC» имеет index.html , Polyfills.browseses.ts , Vendor.Browsers.ts и в основном главное boot.ts Отказ
У нас есть папки приложений, которые содержат HTML, угловые 2 компонента и модуль корневого уровня (App.module.ts), который загружается при загрузке приложения.
Некоторые из файлов теперь могут быть не интересны, но мы сосредоточним их в других статьях позже.
Шаг 8: Запуск приложения
Перед запуском приложения убедитесь, что вы запускаете команду «NPM Install». Это может быть не нужно, но она обеспечит установленные все пакеты.
Теперь давайте запустим приложение в режиме разработки
Из командной строки (каталог должен быть такой же, как Package.json ), введите «NPM Start» и нажмите Enter. Он начнет запустить WebPack-Dev-Server, который загружает приложение и слушает на localhost: 3000.
На консоли это скажет «Пакет сейчас действительна». Идите вперед и откройте браузер и перейдите к http://localhost: 3000 Чтобы увидеть нагрузку на приложение.
Обратите внимание на папку WWWROOT – мы не видим файлов, скопированные, потому что все работает в памяти.
Теперь, когда приложение работает должным образом в вашем браузере, давайте понять, как угловые 2 приложения нагрузки:
Когда браузер запускает рендуринг index.html Страница, она встречается PlatformBrowserdynamic Будет загрузка CLIVESRC/APP/APPMODULULE через линию PlatformBrowserdynamic (). BootstrapModule (AppModule) Отказ AppModule Затем загружает компонент app.component.ts , который упоминается в @ngmodule в качестве записи загрузки. CLIVESRC/SRC/APPCOMPONENT Затем разрешает тег
Когда мы вводим «NPM Start» в консоли для запуска приложения, разделы сценарий точек выполнения Package.json к следующему:
webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base clientsrc/
Это вызывает WebPack-Dev-Server, выполняет конфигурацию разработки и наблюдает за любыми изменениями в clientsrc папка. Любые изменения в этой папке будут перезагружать приложение с изменениями.
Здесь ASP.NET CORE – это просто веб-приложение на основе HTML, поэтому вы можете запустить это приложение, так как NPM начинает использовать функции angularClass of Reloading, WebPack и функцию замены горячего модуля.
Запуск приложения в режиме производства:
Предполагая, что приложение теперь готово быть развернутым, нам нужно продвинуть сборку. Для этого запустить команду
//builds app and copies in wwwroot Npm run build:prod
Теперь, если вы видите папку WWWROOT, мы видим HTML, JS Bundle Files. Эта папка WWWROOT может быть развернута на любом веб-сервере, таких как IIS или NGINX.
Вы можете нажать F5, чтобы запустить его из Visual Studio IDE или команды запуска NPM Run Server: Prod Отказ