AngularJS (commonly referred to as “Angular” or “Angular.js”) is a complete JavaScript-based open-source front-end web application framework mostly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
Step 1: Install node and npm in your machine by downloading from the below link https://nodejs.org/en/download/
After installing check whether it has installed or not by opening command prompt type below commands
$ Node –v
$ Npm – v
If it installed it will show which version it has installed.
Step 2: Create a new MVC4 project with Visual Studio
Download the files from one drive link and add the below files to your project root folder.
https://1drv.ms/f/s!Alczce9o13HwaTebas4JMPHSAF8
Step 3: Close your project solution and take the project location path:
In my case this is my project location path “E:MVC-Angular4MVCAngular4MVCAngular4”
In the command prompt switch it to project folder directory
Install Angular 2 and all its dependencies to your project by typing the below command
$ npm install – then press enter
It will install npm package and typings package to your project path.
In case if you get any proxy related errors during installation add the below command before execution npm install in the command prompt.
$ npm config set proxy http://proxy:8080 then click on enter then npm install command.
Still if you face any proxy related issues for typings add the below file to your project location in the root folder.
.typingsrc file
{
"proxy":"http://proxy:8080",
"rejectUnauthorized": false
}
Once it installed successfully it will create two folders in your project location they are “node_modules” and “typings” don’t include those files into your project.
Then open your solution and replace the below file under view->shared->_Layout.cshtml.
<!DOCTYPE html> <html lang="en"> <head>
<meta charset=”utf-8″ />
<title>@ViewBag.Title – My ASP.NET MVC Application</title>
<link href=”~/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
<meta name=”viewport” content=”width=device-width” />
<!– 1. Load libraries –>
<!– Polyfill(s) for older browsers –>
<link rel=”stylesheet” href=”/styles.css”>
<script src=”/node_modules/core-js/client/shim.min.js”></script>
<script src=”/node_modules/zone.js/dist/zone.js”></script>
<script src=”/node_modules/reflect-metadata/Reflect.js”></script>
<script src=”/node_modules/systemjs/dist/system.src.js”></script>
<script src=”/systemjs.config.js”></script>
<!– 2. Configure SystemJS –>
<script>
System.import(‘app’).catch(function (err)
{
console.error(err);
});
</script>
@Styles.Render(“~/Content/css”)
@Scripts.Render(“~/bundles/modernizr”)
</head>
<body>
<header>
<div class=”content-wrapper”>
<div class=”float-left”>
<p class=”site-title”>@Html.ActionLink(“your logo here”, “Index”, “Home”)</p>
</div>
<div class=”float-right”>
<section id=”login”>
Hello, <span class=”username”>@User.Identity.Name</span>!
</section>
<nav>
<ul id=”menu”>
<li>@Html.ActionLink(“Home”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“About”, “About”, “Home”)</li>
<li>@Html.ActionLink(“Contact”, “Contact”, “Home”)</li>
</ul>
</nav>
</div>
</div>
</header>
<div id=”body”>
@RenderSection(“featured”, required: false)
<section class=”content-wrapper main-content clear-fix”>
@RenderBody()
</section>
</div>
<footer>
<div class=”content-wrapper”>
<div class=”float-left”>
<p>© @DateTime.Now.Year – My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render(“~/bundles/jquery”)
@RenderSection(“scripts”, required: false)
</body>
</html>
In this file if you observe we have imported all the library files and configured startup folder called “app”
Then go to view->Home->index.cshtml page and add the tag with angular selector name say “my-app” <my-app>Loading</my-app>.
Index.cshtml
@{
ViewBag.Title = "Home Page";
<my-app>Loading</my-app>
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
</div>
</section>
}
Step 4: Create a folder called “App” in your project root folder
Then add the below typescript files under app folder: app.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘my-app’,
template: `<h2>Hello {{name}}<h2>`,
})
export class AppComponent { name = ‘Angular2’; }
app.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
// declarations: [ CoursesComponent,AuthorsComponent,AutoGrowDirective ],
// bootstrap: [ CoursesComponent,AuthorsComponent ]
})
export class AppModule { }
main.ts
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module’;
platformBrowserDynamic().bootstrapModule(AppModule);
Step 5: Then go to command prompt and add the below command
“Npm start” then press enter it will start the npm
Then click on F5 or execute your project it will show the app like below with “Hello Angular2”.
Note: We can’t debug type script code in Visual Studio and we therefore need to use Opensource VS code.
Conclusion:
Many developers prefer Visual Studio as a developer tool and prefer to use Angular 2 for building web applications. By following this blog you can set up and run Angular 2 app in Visual Studio.
