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

Add Code to the App Files

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

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

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

4. 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:

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