Hello Angular World (page 4 of 7)

Hello Angular World (from Visual Studio and Local IIS)

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

Hello Angular World from a HTML page

Now that the basic configuration is complete let’s create the Hello Angular World app. The table below lists the folders and files that we will add next.

Name Type Used
assets Folder Images etc. used by the Angular application
shared Folder Components shared across the Angular application
app.component.css file The main CSS file for the Angular application
app.component.ts File The main display template for the Angular application
app.module.ts File Imports the components and modules used by the Angular application
main.ts File The Angular application’s entry point

Add Folders & Files

  1. Expand the Hello.Angular.World project and right-click on app
  2. Click Add > New Folder for the following:
    • Assets
    • shared
  3. Click Add > StyleSheet for the following:
    • app.component.css

Note: When a file name includes an extra full-stop, then you need to include the file extension as part of the name.

  1. Click Add > TypeScript File for the following:
    • app.component.ts
    • app.module.ts
    • main.ts

Note: If you see the following alert, click No

Search for TypeScript Typings? [Yes|No]

Add Code to the App Files

  1. Open app.component.css and add the following code:

  1. Open app.component.ts and add the following code:

  1. Open app.module.ts and add the following code:

  1. Open main.ts and add the following code:

Update Test HTML File

  1. Expand the Hello.Angular.World project
  2. Double on the _index.html file to edit
  3. Locate the following line of code:
    //System.import(‘app’).catch(function(err){ console.error(err); });
  4. Uncomment the code by removing the prefixed //

Test the Hello Angular World app

  1. Select Angular.World project and right-click
  2. Click Set as Start Up Project
  3. Select _index.html file and right-click
  4. Click Set as Start Up Page
  5. Click Debug > Start Debugging or press F5 key

Visual Studio should build your project and open the selected Web Browser. The _index.html may take time to load the first time and should look something like this:

HTML Page IIS Express

Note: In my IIS Express example the URL is http://localhost:15426/_index.html, however your website maybe hosted on a different port number.

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