asp.net – AngularJs 2与ASP.NET 4.5.1

前端之家收集整理的这篇文章主要介绍了asp.net – AngularJs 2与ASP.NET 4.5.1前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用Angular 2作为现有ASP.NET 4应用程序的前端,即不是MVC 6 / ASP.NET CORE,我宁愿不使用节点,因为我们已经使用nuget作为包管理器.有人知道有什么资源可以指导我吗?

解决方法

为了回答我的原始问题,这是我们如何设法使用.net 4.5.1(我们最终不得不使用npm)使Angular 2运行.

在_Layout.cshtml的标题中,从cdn和已配置的SystemJ导入Angular 2文件.

  1. <!-- 1. Load libraries -->
  2. <!-- IE required polyfills,in this exact order -->
  3. <script src="../../node_modules/es6-shim/es6-shim.min.js"></script>
  4. <script src="../../node_modules/systemjs/dist/system-polyfills.js"></script>
  5. <script src="../../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
  6.  
  7. <script src="../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
  8. <script src="../../node_modules/systemjs/dist/system.src.js"></script>
  9. <script src="../../node_modules/rxjs/bundles/Rx.js"></script>
  10. <script src="../../node_modules/angular2/bundles/angular2.dev.js"></script>
  11.  
  12. <!-- 2. Configure SystemJS -->
  13. <script>
  14. System.config({
  15. packages: {
  16. 'my-app': {
  17. format: 'register',defaultExtension: 'js'
  18. }
  19. }
  20. });
  21. System.import('my-app/main')
  22. .then(null,console.error.bind(console));
  23. </script>

将package.json和tsconfig.json添加到项目的路由

packages.json:

  1. {
  2. "name": "angular2-quickstart","version": "1.0.0","scripts": {
  3. "tsc": "tsc","tsc:w": "tsc -w","typings": "typings","postinstall": "typings install"
  4. },"license": "ISC","dependencies": {
  5. "angular2": "2.0.0-beta.9","systemjs": "0.19.24","es6-promise": "^3.0.2","es6-shim": "^0.35.0","reflect-Metadata": "0.1.2","rxjs": "5.0.0-beta.2","zone.js": "0.5.15"
  6. },"devDependencies": {
  7. "typescript": "^1.8.7","typings": "^0.7.5"
  8. }
  9. }

tsconfig.json:

  1. {
  2. "compileOnSave": true,"compilerOptions": {
  3. "target": "es5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
  4. },"exclude": [
  5. "node_modules","typings/main","typings/main.d.ts"
  6. ]
  7. }

如果您的机器上安装了节点和npm,则应自动下载所需的npm模块,并将其保存在node_modules文件夹中.您现在应该准备好设置一个Angular 2应用程序,我们使用this开始使用.

猜你在找的asp.Net相关文章