28.5. The Angular Framework¶

28.5.1.1. app.component.html File¶

 1<div style="text-align:center">
 2   <h1>
 3      Welcome to {{ title }}!
 4   </h1>
 5   <img width="300" alt="Angular Logo" src="image path...">
 6</div>
 7<h2>Here are some links to help you start: </h2>
 8<ul>
 9   <!-- List items here... -->
10</ul>

app.component.html contains the structure and most of the text seen on the "Welcome to..." page. Note the placeholder {{title}} in line 3. This gets filled with data passed in from another file, and it allows us to modify the content on the page without revising the HTML.

app.component.html serves as the main template for your web page. This file will usually NOT hold a lot of HTML code. Instead, it will contain many placeholders for content defined elsewhere in the project.

Later in this chapter, you will learn how to add new components to the app folder as well as how to arrange them in the HTML file.

28.5.1.2. app.component.ts File¶

 1import { Component } from '@angular/core';
 2
 3@Component({
 4   selector: 'app-root',
 5   templateUrl: './app.component.html',
 6   styleUrls: ['./app.component.css']
 7})
 8export class AppComponent {
 9   title = 'my-project-name';
10}

app.component.ts performs several important functions with very few lines.

1. Line 4 defines the tag <app-root>, which we saw in line 12 of index.html. The tag can also be used in any files that import the AppComponent class.
2. Line 5 imports app.component.html, which we examined above.
3. Line 6 imports app.component.css, which applies styling to the HTML file. (If you set a different color for the Welcome to... sentence in the Try It tasks, this is why changing the css file worked).
4. Line 8 makes the AppComponent class available to other files.

Take a look at app.component.html again. We mentioned the {{title}} placeholder earlier and said that it gets filled with data from a different file. Line 9 in app.component.ts supplies this data by assigning the string 'my-project-name' to the title variable. Changing 'my-project-name' to a different value alters the web page.

28.5.1.3. app.module.ts File¶

 1import { BrowserModule } from '@angular/platform-browser';
 2import { NgModule } from '@angular/core';
 3
 4import { AppComponent } from './app.component';
 5
 6@NgModule({
 7   declarations: [ AppComponent ],
 8   imports: [ BrowserModule ],
 9   providers: [],
10   bootstrap: [AppComponent]
11})
12export class AppModule { }

Just like before, there is a lot going on within very few lines.

1. Lines 1, 2, and 8 import and assign the core modules that make Angular work. This is part of the automatic process, so do not play with these (yet).
2. Line 4 imports the class AppComponent from the local file app.component.ts.
3. Line 4 also pulls in references to any other files linked to app.component.ts.
4. Line 7 declares the imported local files as necessary for the project.
5. Line 12 exports the AppModule class and makes it available to other files.

app.module.ts does the main work of pulling in the core libraries and local files. As new parts are added to a project, the import statements, imports array, and declarations array update automatically. We do not have to worry about the details for adding this critical code ourselves.

28.5.2.1. Try It!¶

1. Run ng serve in the terminal to launch your web page again.

2. In app.component.ts, declare and assign two variables in the AppComponent class---name and itemList.

   1. name holds your name.
   2. itemList is an array holding at least 4 items.

   1export class AppComponent {
   2   name: string = 'Barbara Liskov';
   3   itemList: string[] = ['item1', 'item2', 'item3', 'item4'];
   4}
   

   Note

   Instead of using the strong TypeScript variable declarations in step 2, we could substitute a pattern more like JavaScript:

   1export class AppComponent {
   2   name = 'Brendan Eich';
   3   itemList = ['item1', 'item2', 'item3', 'item4'];
   4}
   

3. Replace line 4 in app.component.html with <h1>{{name}}'s First Angular Project</h1>. Save your work and then check to make sure the web page shows the new heading.

4. Modify the <li></li> elements in app.component.html to display the elements from itemList in an unordered list. Be sure to use placeholders like {{itemList[0]}} between the tags.

5. Return to the AppComponent class in the .ts file. Define a rectangle object that has keys of length, width and area. Assign numbers to length and width, and have area be a function that calculates and returns the area.

   1rectangle = {
   2   length: 5,
   3   width: 6,
   4   area: function() {
   5      return this.length * this.width;
   6   }
   7}
   

6. Add a <p></p> element in app.component.html to display the sentence, "The rectangle has a length of ___ cm, a width of ___ cm, and an area of ___ cm^2." Replace the blanks with placeholders so the web page displays the correct numbers whenever length or width are changed.

   <p>The rectangle has a length of {{rectangle.length}} cm, a width of {{rectangle.width}} cm,
      and an area of {{rectangle.area()}} cm^2.</p>