{"id":23061208,"url":"https://github.com/syncfusionexamples/angular-with-asp.net-mvc","last_synced_at":"2025-08-15T08:32:46.479Z","repository":{"id":85927271,"uuid":"221691785","full_name":"SyncfusionExamples/angular-with-asp.net-mvc","owner":"SyncfusionExamples","description":"How to configure EJ2 Angular with asp.net mvc","archived":false,"fork":false,"pushed_at":"2024-08-08T08:02:08.000Z","size":34057,"stargazers_count":3,"open_issues_count":2,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-09T10:24:21.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-14T12:24:01.000Z","updated_at":"2024-08-08T08:02:12.000Z","dependencies_parsed_at":"2024-08-08T10:26:42.289Z","dependency_job_id":null,"html_url":"https://github.com/SyncfusionExamples/angular-with-asp.net-mvc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fangular-with-asp.net-mvc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fangular-with-asp.net-mvc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fangular-with-asp.net-mvc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fangular-with-asp.net-mvc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/angular-with-asp.net-mvc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229901552,"owners_count":18141741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-16T03:16:54.086Z","updated_at":"2024-12-16T03:16:54.707Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started ASP .NET MVC and Angular using Project Template\n\nThis document helps you to create a simple ASP.NET MVC application with Angular Framework and Syncfusion Angular UI components (Essential JS 2).\n\n## Prerequisites\n\nBefore getting started with Syncfusion Angular Components in ASP.NET MVC with Angular project, check whether the following are installed in the developer machine: \n\n* .Net Framework 4.5 and above\n* ASP.NET MVC 5\n* Visual Studio 2017\n\n## Create an Angular application with SystemJS\n\nTo create an angular application with SystemJS, refer to [`getting started`](https://ej2.syncfusion.com/angular/documentation/getting-started/systemjs/) document.  \n\nWe have created a simple [`angular application with SystemJS`](https://github.com/SyncfusionExamples/EJ2-Angular-using-systemjs) sample using above getting started. This sample is used for creating a simple ASP.NET MVC application with Angular Framework and Syncfusion Angular UI components.\n\n## Create ASP.NET MVC Web application\n\nCreate a new project with a project template.\n\n1. Choose File \u003e New \u003e Project in the Visual Studio menu bar.\n\n2. Select Installed \u003e Visual C# \u003e Web and select the required .NET Framework in the drop-down.\n\n3. Select `ASP.NET Web Application` and change the application name, and then click OK.\n\n4. Select `Empty` as a project template and add folders and core references for `MVC` and then click OK. The application is created.\n\n## Add new Controller\n\nRight-click the `Controllers` folder and click Add \u003e Controller. \n\nSelect `MVC 5 Controller - Empty` and click Add. \n\nThen, named the controller as `AppController` and click Add. The `AppController.cs` will be created. Open the `AppController.cs` and add a new view for AppController.\n\nAdd the View name as `Index`.\n\nAfter that, _Layout.cshtml \u0026 Bootstrap content folder will be automatically generated.\n\n## Integrate Angular with ASP.NET MVC project\n\nCopy the `tslint.json` and `package.json` files from the [`angular application with SystemJS`](https://github.com/SyncfusionExamples/EJ2-Angular-using-systemjs) and paste them into the MVC project folder.\n\nRight-click the Project name and add a new folder `ClientApp`. \n\nCopy all the files from the `src` folder of the `angular application with SystemJS` sample and paste into `ClientApp` folder in MVC project.\n\nTo restore the packages, right-click the `package.json` file and select `Restore Packages`.\n\n## Configure Systemjs file\n\nThe systemjs.config.js file is used for loading all scripts including Angular and Syncfusion into the browser. \n\nOpen `systemjs.config.js` file and change app folder as `ClientApp/app` and change loader as `ClientApp/systemjs-angular-loader.js`.\n\n```typescript\n/**\n * System configuration for Angular samples\n * Adjust as necessary for your application needs.\n */\n(function (global) {\n  System.config({\n    paths: {\n      // paths serve as alias\n      'npm:': 'node_modules/'\n    },\n    // map tells the System loader where to look for things\n    map: {\n      // our angular app is within the ClientApp folder\n      'app': 'ClientApp/app',\n\n      // angular bundles\n      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',\n      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',\n      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',\n      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',\n      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',\n      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',\n      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',\n\n      //Add Syncfusion packages\n      '@syncfusion/ej2-angular-grids':  'npm:@syncfusion/ej2-angular-grids/dist/ej2-angular-grids.umd.min.js',\n      '@syncfusion/ej2-angular-base':'npm:@syncfusion/ej2-angular-base/dist/ej2-angular-base.umd.min.js',\n      '@syncfusion/ej2-base':'npm:@syncfusion/ej2-base/dist/ej2-base.umd.min.js',\n      '@syncfusion/ej2-buttons':'npm:@syncfusion/ej2-buttons/dist/ej2-buttons.umd.min.js',\n      '@syncfusion/ej2-grids':'npm:@syncfusion/ej2-grids/dist/ej2-grids.umd.min.js',\n      '@syncfusion/ej2-calendars':'npm:@syncfusion/ej2-calendars/dist/ej2-calendars.umd.min.js',\n      '@syncfusion/ej2-compression':'npm:@syncfusion/ej2-compression/dist/ej2-compression.umd.min.js',\n      '@syncfusion/ej2-data':'npm:@syncfusion/ej2-data/dist/ej2-data.umd.min.js',\n      '@syncfusion/ej2-dropdowns':'npm:@syncfusion/ej2-dropdowns/dist/ej2-dropdowns.umd.min.js',\n      '@syncfusion/ej2-lists':'npm:@syncfusion/ej2-lists/dist/ej2-lists.umd.min.js',\n      '@syncfusion/ej2-navigations':'npm:@syncfusion/ej2-navigations/dist/ej2-navigations.umd.min.js',\n      '@syncfusion/ej2-popups':'npm:@syncfusion/ej2-popups/dist/ej2-popups.umd.min.js',\n      '@syncfusion/ej2-splitbuttons':'npm:@syncfusion/ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js',\n      '@syncfusion/ej2-excel-export':'npm:@syncfusion/ej2-excel-export/dist/ej2-excel-export.umd.min.js',\n      '@syncfusion/ej2-inputs':'npm:@syncfusion/ej2-inputs/dist/ej2-inputs.umd.min.js',\n      '@syncfusion/ej2-pdf-export':'npm:@syncfusion/ej2-pdf-export/dist/ej2-pdf-export.umd.min.js',\n      '@syncfusion/ej2-file-utils':'npm:@syncfusion/ej2-file-utils/dist/ej2-file-utils.umd.min.js',\n      \n\n      // other libraries\n      'rxjs':                      'npm:rxjs',\n      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'\n    },\n    // packages tells the System loader how to load when no filename and/or no extension\n    packages: {\n      app: {\n        defaultExtension: 'js',\n        meta: {\n          //Change System loader path\n          './*.js': {\n            loader: 'ClientApp/systemjs-angular-loader.js'\n          }\n        }\n        },\n      rxjs: {\n        defaultExtension: 'js'\n      }\n    }\n  });\n})(this);\n\n```\n\n## Configure RouteConfig.cs file\n\nIn the `RouteConfig.cs` file, add the controller name as `App` and action as `Index`.\n\n```typescript\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Web;\nusing System.Web.Mvc;\nusing System.Web.Routing;\n\nnamespace Angular_with_ASP.NET_MVC\n{\n    public class RouteConfig\n    {\n        public static void RegisterRoutes(RouteCollection routes)\n        {\n            routes.IgnoreRoute(\"{resource}.axd/{*pathInfo}\");\n\n            routes.MapRoute(\n                name: \"Default\",\n                url: \"{controller}/{action}/{id}\",\n                defaults: new { controller = \"App\", action = \"Index\", id = UrlParameter.Optional }\n            );\n        }\n    }\n}\n\n```\n\n## Add references to layout file\n\nTo load Angular in ASP.NET MVC, include the script references of Angular core modules and Syncfusion JavaScript asset files in _Layout file, and load the component in index.cshtml.\n\nAdd the following code to _Layout.cshtml file.\n\n```typescript\n\u003clink rel=\"stylesheet\" href=\"~/ClientApp/styles.css\"\u003e\n\u003cscript src=\"~/ClientApp/systemjs.config.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        System.import('/ClientApp/main.js').catch(function (err) { console.error(err); });\n\u003c/script\u003e\n\n```\n\nCode snippet of _Layout.cshtml file:\n\n```typescript\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003e@ViewBag.Title - My ASP.NET Application\u003c/title\u003e\n    \u003clink href=\"~/Content/Site.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n    \u003clink href=\"~/Content/bootstrap.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n    \u003cscript src=\"~/Scripts/modernizr-2.8.3.js\"\u003e\u003c/script\u003e\n    \u003cbase href=\"/\"\u003e\n    \u003clink href=\"~/Content/Site.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n    \u003clink href=\"~/Content/bootstrap.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\n    \u003c!-- Add Grid module style --\u003e\n    \u003clink rel=\"stylesheet\" href=\"~/ClientApp/styles.css\"\u003e\n\n    \u003c!-- Polyfill(s) for older browsers --\u003e\n    \u003cscript src=\"~/node_modules/core-js/client/shim.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"~/node_modules/zone.js/dist/zone.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"~/node_modules/systemjs/dist/system.src.js\"\u003e\u003c/script\u003e\n\n    \u003cscript src=\"~/ClientApp/systemjs.config.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        System.import('/ClientApp/main.js').catch(function (err) { console.error(err); });\n    \u003c/script\u003e\n\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003cdiv class=\"container body-content\"\u003e\n        @RenderBody()\n        \u003chr /\u003e\n        \u003cfooter\u003e\n            \u003cp\u003e\u0026copy; @DateTime.Now.Year - My ASP.NET Application\u003c/p\u003e\n        \u003c/footer\u003e\n    \u003c/div\u003e\n\n    \u003cscript src=\"~/Scripts/jquery-3.3.1.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"~/Scripts/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nCode snippet of index.cshtml file.\n\n```typescript\n@{\n    ViewBag.Title = \"Index\";\n}\n\u003cmy-app\u003eLoading AppComponent content here ...\u003c/my-app\u003e\n\n```\n\n## Run the application\n\nRun this application and the component will be rendered.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fangular-with-asp.net-mvc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fangular-with-asp.net-mvc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fangular-with-asp.net-mvc/lists"}