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.

assetsFolderImages etc. used by the Angular application
sharedFolderComponents shared across the Angular application
app.component.cssfileThe main CSS file for the Angular application
app.component.tsFileThe main display template for the Angular application
app.module.tsFileImports the components and modules used by the Angular application
main.tsFileThe 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


Recent Posts

  • How to sort an array using Power Automate
    Learn how to sort an array using Power Automate. In this post I share a Power Platform solution containing two example Cloud Flows demonstrating how an array can be sorted. I also briefly explore performance results of running actions in parallel verses serial with some surprising results.
  • How to Add and Remove Accounts from Multi-Select SharePoint Person and Group Fields
    Learn how to use the SharePoint API and Power Automate to add and remove accounts from multi-select Person and Group fields in SharePoint. Our step-by-step guide includes detailed illustrations and examples, as well as an optional Power Platform solution to help you deploy the solution to your tenant. Improve your SharePoint workflow management today!
  • Navigating Microsoft Power Automate Licensing: Challenges, Considerations, and Compliance
    Navigate the complexities of Microsoft Power Automate licensing with insights on challenges, considerations, and compliance. Learn about potential risks, licensing rules, and best practices for organizations using Power Automate. Get guidance on avoiding license breaches, managing premium connectors, and ensuring compliance with Microsoft licensing requirements. Stay informed and take proactive steps to maintain licensing compliance in Power Automate, regardless of your location. Discover practical strategies to optimize your Power Automate licensing and avoid potential pitfalls.
  • SharePoint REST API: How to find the List or Library “__metadata” “type”
    SharePoint REST API is a powerful tool for updating lists and items in SharePoint, but determining the correct “__metadata” “type” for API calls can be confusing. While it’s typically “SP.Data.ListNameItem” based on the list’s URL, there are cases where it may be “SP.Data.ListNameListItem” in certain Office 365 tenants. In this article, we will explore how to find the correct “__metadata” “type” when updating lists or libraries in SharePoint, and also highlight the alternative approach of using the Microsoft Graph API. By understanding this crucial aspect of SharePoint REST API, readers can ensure successful updates and avoid potential errors.
  • “The Age of #AI has begun” said Bill Gates
    March 2023 has been an extraordinary month with the launch of GPT-4 on March 14th, closely followed by #Microsoft’s launch of Copilot preview on March 16th, and Bill Gates’ article, “The Age of AI has begun,” on March 21st.
%d bloggers like this: