Hello Angular World (page 3 of 7)

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:

  1. Click Save and close

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