Post
Ask Question

Creating Angular Project Using MVC

For creating a new Angular project, some tools are required. Kindly, download and install the below tools.

  • Visual Studio (Here, I have to use Visual studio 2017 community).
  • TypeScript
  • Node.js

Step 1

Click File >> New >> Project on the Start page or in the File menu.

 

Step 2

After creating a new project, select Web, choose ASEP.NET Core Web Application, select your project location, and enter your web application's name. Finally, click OK.

 

Step 3

A new ASP.NET MVC5 Project window will open; there, you have to choose MVC and press OK.

 

Step 4

Right click your project and click Add >> New Item. Either press "Ctrl + E" or in the search box, type ''npm". Select the npm configuration file, enter your file name (package.json), and click "Add".

 
  1. {  
  2.     "name": "Angular4",  
  3.     "version": "1.0.0",  
  4.     "description": "",  
  5.     "main": "index.js",  
  6.     "dependencies": {  
  7.         "@angular/common": "^4.0.1",  
  8.         "@angular/compiler": "^4.0.1",  
  9.         "@angular/core": "^4.0.1",  
  10.         "@angular/forms": "^4.0.1",  
  11.         "@angular/http": "^4.0.1",  
  12.         "@angular/platform-browser": "^4.0.1",  
  13.         "@angular/platform-browser-dynamic": "^4.0.1",  
  14.         "@angular/router": "^4.0.1",  
  15.         "core-js": "^2.4.1",  
  16.         "rxjs": "^5.3.0",  
  17.         "systemjs": "^0.20.12",  
  18.         "zone.js": "^0.8.5"  
  19.     },  
  20.     "devDependencies": {  
  21.         "@types/node": "^7.0.12",  
  22.         "http-server": "^0.9.0",  
  23.         "typescript": "^2.2.2"  
  24.     },  
  25.     "scripts": {  
  26.         "test": "echo \"Error: no test specified\" && exit 1"  
  27.     },  
  28.     "author": "",  
  29.     "license": "ISC"  
  30. }  

Step 5

Right-click your project and click Add->New Item. Either press (ctrl + E) or in the search box, type ''json" and then select "Typescript JSON Configuration File". Enter your file name (tsconfig.json) and click "Add".

 
  1. {  
  2.     "compilerOptions": {  
  3.         "target": "es5",  
  4.         "module": "commonjs",  
  5.         "moduleResolution": "node",  
  6.         "sourceMap": true,  
  7.         "emitDecoratorMetadata": true,  
  8.         "experimentalDecorators": true,  
  9.         "lib": ["es2015", "dom"],  
  10.         "noImplicitAny": true,  
  11.         "suppressImplicitAnyIndexErrors": true  
  12.     }  
  13. }  

Step 6

In Solution Explorer, right-click the package.json file. Click "Restore Package" and click "Install all" The node_modules reference file will be added.

 

After installing the Restore packages, all node_modules reference files are added to your project. We have no need to click include our project because it is added by default.

Step 7

Similarly, select the "JavaScript File", enter your file name (systemjs.config.js ), and click "Add".

 
  1. (function(global) {  
  2.     System.config({  
  3.         paths: {  
  4.             // paths serve as alias  
  5.             'npm:': 'node_modules/'  
  6.         },  
  7.         // map tells the System loader where to look for things  
  8.         map: {  
  9.             // our app is within the app folder  
  10.             app: 'app',  
  11.             // angular bundles  
  12.             '@angular/core': 'npm:@angular/core/bundles/core.umd.js',  
  13.             '@angular/common': 'npm:@angular/common/bundles/common.umd.js',  
  14.             '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',  
  15.             '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',  
  16.             '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',  
  17.             '@angular/http': 'npm:@angular/http/bundles/http.umd.js',  
  18.             '@angular/router': 'npm:@angular/router/bundles/router.umd.js',  
  19.             '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
  20.             // other libraries  
  21.             'rxjs': 'npm:rxjs',  
  22.         },  
  23.         // packages tells the System loader how to load when no filename and/or no extension  
  24.         packages: {  
  25.             app: {  
  26.                 main: './main.js',  
  27.                 defaultExtension: 'js'  
  28.             },  
  29.             rxjs: {  
  30.                 defaultExtension: 'js'  
  31.             }  
  32.         }  
  33.     });  
  34. })(this);  

Step 8

Add Index file. Here, I have to no need to add index.html page but I have to change index,cshtml page code. Go to Views --> Home --> Index.cshtml file and replace the code.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Angular4 </title>  
  6.     <meta charset="UTF-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <!-- Polyfill(s) for older browsers -->  
  9.     <script src="node_modules/core-js/client/shim.min.js"></script>  
  10.     <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
  11.     <script src="node_modules/zone.js/dist/zone.js"></script>  
  12.     <script src="node_modules/systemjs/dist/system.src.js"></script>  
  13.     <script src="systemjs.config.js"></script>  
  14.     <script>  
  15.         System.import('app').catch(function(err) {  
  16.             console.error(err);  
  17.         });  
  18.     </script>  
  19. </head>  
  20.   
  21. <body>  
  22.     <hello>Angular4 Loading PleaseWait...</hello>  
  23. </body>  
  24.   
  25. </html>  

Step 9

Add more TypeScript files the same way. Here, I have added three *.ts files.

  • app.module.ts
  • app.component.ts
  • main.ts
  • app.component.html

  

The main.ts file code is shown below.

  1. import   
  2. {  
  3.     platformBrowserDynamic  
  4. } from '@angular/platform-browser-dynamic';  
  5. import {  
  6.     AppModule  
  7. } from './app.module';  
  8. const platform = platformBrowserDynamic();  
  9. platform.bootstrapModule(AppModule);  

The app.module.ts file code -

  1. import {  
  2.     NgModule  
  3. } from '@angular/core';  
  4. import {  
  5.     HttpModule  
  6. } from '@angular/http';  
  7. import {  
  8.     FormsModule  
  9. } from '@angular/forms';  
  10. import {  
  11.     BrowserModule  
  12. } from '@angular/platform-browser';  
  13. import {  
  14.     Component  
  15. } from './app.component';  
  16. import {  
  17.     routing  
  18. } from './app.routing';  
  19. import {  
  20.     MockBackend,  
  21.     MockConnection  
  22. } from '@angular/http/testing';  
  23. import {  
  24.     BaseRequestOptions  
  25. } from '@angular/http';  
  26. @NgModule({  
  27.     imports: [BrowserModule,  
  28.         FormsModule,  
  29.         HttpModule, routing  
  30.     ],  
  31.     declarations: [Component],  
  32.     bootstrap: [Componen]  
  33. })  
  34. export class AppModule {}  

The app.component.ts file code is below.

  1. import {  
  2.     Component,  
  3.     Directive,  
  4.     forwardRef,  
  5.     Attribute,  
  6.     OnChanges,  
  7.     SimpleChanges,  
  8.     Input  
  9. } from '@angular/core';  
  10. import {  
  11.     Subscription  
  12. } from 'rxjs/Subscription';  
  13. import {  
  14.     FormGroup,  
  15.     FormControl,  
  16.     NG_VALIDATORS,  
  17.     Validator,  
  18.     Validators,  
  19.     AbstractControl,  
  20.     ValidatorFn  
  21. } from '@angular/forms';  
  22. import {  
  23.     Router  
  24. } from '@angular/router';  
  25. @Component({  
  26.     selector: 'hello',  
  27.     templateUrl: '<h2>Welcome to Angular4 World</h2>',  
  28. })  
  29. export class Component {}  

The app.component.html file code is below.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <h2>Welcome to Angular4 world !</h2>  
  11. </body>  
  12.   
  13. </html>  

Finally, I have added all config, reference files, and source code. If you Rebuild or Run (F5) the project, all TS code automatically regenerates as .js file because some browsers do not support the TypeScript files.

 

After running the project, it automatically adds app.module.js and app.module.js.map file in the Solution Explorer.

 
 

Finally, I have done Angular4 basic configuration. In the next article, I’ll explain the components and services. 


Similar Articles