Creating Angular Project Using MVC

Satheesh Elumalai
Jun 17
47.2k
0
8

100

Article

SourceCode.zip

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.

Start page

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.

Web Application

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

ASP.NET

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

New Item

{
    "name": "Angular4",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "@angular/common": "^4.0.1",
        "@angular/compiler": "^4.0.1",
        "@angular/core": "^4.0.1",
        "@angular/forms": "^4.0.1",
        "@angular/http": "^4.0.1",
        "@angular/platform-browser": "^4.0.1",
        "@angular/platform-browser-dynamic": "^4.0.1",
        "@angular/router": "^4.0.1",
        "core-js": "^2.4.1",
        "rxjs": "^5.3.0",
        "systemjs": "^0.20.12",
        "zone.js": "^0.8.5"
    },
    "devDependencies": {
        "@types/node": "^7.0.12",
        "http-server": "^0.9.0",
        "typescript": "^2.2.2"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

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

Typescript JSON

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

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.

Restore Package

Install all

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

JavaScript File

(function(global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

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

<!DOCTYPE html>
<html>

<head>
    <title>Angular4 </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</head>

<body>
    <hello>Angular4 Loading PleaseWait...</hello>
</body>

</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

TypeScript files

The main.ts file code is shown below.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

The app.module.ts file code.

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from './app.component';
import { routing } from './app.routing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

@NgModule({
    imports: [BrowserModule,
              FormsModule,
              HttpModule,
              routing
    ],
    declarations: [Component],
    bootstrap: [Component]
})
export class AppModule {}

The app.component.ts file code is below.

import {
    Component,
    Directive,
    forwardRef,
    Attribute,
    OnChanges,
    SimpleChanges,
    Input
} from '@angular/core';
import {
    Subscription
} from 'rxjs/Subscription';
import {
    FormGroup,
    FormControl,
    NG_VALIDATORS,
    Validator,
    Validators,
    AbstractControl,
    ValidatorFn
} from '@angular/forms';
import {
    Router
} from '@angular/router';

@Component({
    selector: 'hello',
    templateUrl: '<h2>Welcome to Angular4 World</h2>',
})
export class Component {}

The app.component.html file code is below.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <h2>Welcome to Angular4 world !</h2>
</body>

</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.

Rebuild or Run

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

Solution Explorer

Angular4

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