Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Angular Folder & File Structure

Now to add the basic folder and files structure required to build a simple Angular App. My intentions are to remain true to the conventions set out by Angular while remaining sympathetic to ASP.NET MVC. The items in grey were included automatically during the projects creation, the items in black we have already added and the items in red we are about to add.

Name	Type	Used	Origin	Added
app	Folder	Container for the Angular App files	Angular	Manually
App_Data	Folder	Included during the project creation	ASP.NET MVC	VS Template
App_Start	Folder	Included during the project creation	ASP.NET MVC	VS Template
Content	Folder	CSS files and related image files	ASP.NET MVC	Manually
=> site.css	File	Add to the Content folder	General	Manually
Controllers	Folder	Included during the project creation	ASP.NET MVC	VS Template
Images	Folder	Included during the project creation	ASP.NET MVC	VS Template
Models	Folder	Included during the project creation	ASP.NET MVC	VS Template
Scripts	Folder	JavaScript files	General	Manually
Views	Folder	Included during the project creation	ASP.NET MVC	VS Template
_index.html	File	HTML test page for Angular	General	Manually
Favicon.ico	File	Favourite or shortcut icon/images	General	VS Template
Global.asax	File	ASP.NET application file	ASP.NET MVC	VS Template
package.json	File	NPM package configuration	Quick Package Installer	NPM
Packages.config	File	NuGet package configuration file	ASP.NET MVC	VS Template
systemjs.config.js	File	Angular App configuration file	Angular	Manually
tsconfig.json	File	TypeScript configuration file	TypeScript	Manually
Web.config	File	Web application configuration file	ASP.NET MVC	VS Template

 Added Default Folders

1. Select Hello.Angular.World and right-click
2. Click Add > New Folder
3. Give or rename the folder to match one of the following and repeat until the list is complete:
   • app
   • Content
   • Images
   • Scripts

Added “systemjs.config.js” Files

The information below is based directly upon the Angular 2 QuickStart / systemjs.config.js file
https://github.com/angular/quickstart/blob/master/systemjs.config.js

1. Select Angular.World and right-click
2. Click Add > JavaScript File
3. Set the Item name: systemjs.config.js
4. Click OK

The JavaScript code will look like this:

You may notice two comments containing “ASP.NET MVC: prefix / to specify the root”. This is to remind us to add the “/” prefix when we start working with MVC files.

Added Test HTML File

In readiness to test our Hello Angular World app, lets add an HTML file.

1. Select Hello.Angular.World and right-click
2. Click Add > HTML Page
3. Set the Item name: _index.html
4. Click OK

The default HTML code will look like this:

Update the code so that it looks like this:

Notice that the “System.import(‘app’).catch(function(err){ console.error(err); });” has been commented out, we will return to this section of code later.

Add Site.css file

Before I forget, let’s add a style sheet called Sites.css

1. Within the Hello.Angular.World project, right-click Content
2. Click Add > Style Sheet
3. Set the item name css
4. Click OK
5. Copy and paste the following code:

6. Click Save and close

Pages: 1, 2, 3, 4, 5, 6, 7