Activity: First Angular app (module and component)

(no submission)

Purpose:

For this activity, we will set up and get started with Angular. You should do this activity individually.

To deploy and test your program, please refer to Angular deployment.


Task #1: Set up

  1. Set up Node.js and install Angular

    Refer to Angular setup to set up Node.js and install Angular.


  2. Create the first Angular program
    • Create a new app. Use a terminal, navigate to the workspace directory where you want to work on the app.
      • Create a directory
            mkdir webpl-angular
      • Go inside the directory
            cd webpl-angular
      • Use an ng new command to create a new workspace (folder with the app name) and an initial application
            ng new angular-example
        This is the name of your angular app (or project).
      • Depending on your environment and whether you have configured a workspace, the ng new command may prompt you for information about features to include in the initial app project.
        • Since we will not use any routing in this activity, answer N to the question about generating a routing module
        • Select CSS for the stylesheet format (if applicable)
        • Accept the defaults by pressing the Enter or Return key
    Let's go inside the angular-example directory and see what has been created. You should have the following initial workspace and starter project files.
    • A new workspce, with a root folder named angular-example
    • An initial skeleton app project, in the src folder
    • An end-to-end test project (if you accept and configure to create tests), in the e2e folder
    • Related configuration files

  3. Start the development server
    • Use a terminal, navigate to the workspace directory
          cd angular-example
    • Start the development server
          ng serve
      This command will compiles and builds all files, and then starts the server.

      Alternatively, you may use
          ng serve --open
      The --open flag opens a web browser to http://localhost:4200/

  4. Access the app
    • Open a web browser, enter a URL
      http://localhost:4200
      Note: node.js server runs on port 4200, by default.

  5. To shutdown the server
    • Use a terminal, press keyboard Ctrl+c
    Note: to proceed with the following tasks, re-start the server. Be sure to shutdown the server after you are done.

Task #2: Make changes to the app

  1. Navigate to the src/app/ folder. We will work with the following files:
    • app.component.ts — the component class, written in TypeScript
    • app.component.html — the component template, written in HTML
    • app.component.css — the component's CSS styles

  2. Open app.component.ts, change the value of the title property to your-name

  3. Open app.component.html, replace the default template generated by the Angular CLI with
    <body>
    <div>
      <h1>
        {{ title }}!
      </h1>
    </div>
    </body>

  4. Add styles to the app. Navigate to the src folder. Open styles.css and add the following code.
    /* general styles of angular-example app */
    h1 {
      color: #00264d;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 250%;
    }
    h2, h3 {
      color: #004080;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: lighter;
    }
    body {
      margin: 2em;
      color: #333333;
      background-color: ghostwhite;
      font-family: Cambria, Georgia;
    }
    

  5. Add a link to Bootstrap (or any external CSS) to the app. Navigate to the src folder. Open index.html and add a link.
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Task #3: Create another component

  1. Go to the root folder of your app (e.g., angular-example). Generate a new component named friends
    ng generate component friends or ng g component friends
    The command will create a new folder named friends in src/app/.

  2. Add a friendname property to the friends component. Open friends.component.ts and add friendname = 'somename'; to the export class code block as follow:
    export class FriendsComponent implements OnInit {
      friendname: string;
    
      constructor() {
        this.friendname = 'somename'; 
      }
    
      ngOnInit(): void {
      }
    }  
    The export property describes the component that is visible and can be used by other components or modules. Now, the FriendsComponent is made avaialble.

  3. Open friends.component.html template file. Replace the default text generated by the Angular CLI with a data binding to display the friendname property
    Hello {{ friendname }}

  4. Show the friends component view in the main angular-example view. Go to the src/app/ folder, open app.component.html template and add the app-friends (which is the element selector for the friends component) to it.
    <app-friends></app-friends>

You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!




Copyright © 2022 Upsorn Praphamontripong

Released under the Creative Commons License CC-BY-NC-SA 4.0 license.

Last updated 2022-06-05 14:17