Develop Angular2 Application using Visual Studio Code - 2

NguDeveloper

Rate me:

5.00/5 (3 votes)

12 Nov 2016CPOL3 min read

17K

Angular2 + Webpack web application using VS Code step by step

Introduction

In my last article, we've finished setting up the development enviroment (Develop Angular2 Application using Visual Studio Code - 1). This time, let's try to change something based on the auto generated source code. I will do this step by step. You may take 2 hours to finish this.

Background

If you didn't setup your Angular2 development enviroment, please see Develop Angular2 Application using Visual Stuido Code - 1. You may need to change your package.json file and npm install the newest version if you are using your own development enviroment.

Steps

1. Generate Some Code using angular-cli

ng generate component menu OR ng g c menu
ng generate component feed OR ng g c feed

After generation, you can find the generated source code in Visual Studio Code explorer.

Then open C:\Users\ngudeveloper\NgTweet\src\app\app.component.html
Change code to:

HTML

<app-menu></app-menu>
<app-feed></app-feed>

npm start the web server. Now, you will see "feed works!" "menu works!" in the browser.

2. Use bootstrap

We are going to use bootstrap4 Alpha. So this step, add the Bootstrap CDN blow to C:\Users\{user}\NgTweet\src\index.html. You can find them on the first page of bootstrap4 website.

JavaScript

<link crossorigin="anonymous" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" 
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" 
crossorigin="anonymous"></script>

index.html

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NgTweet</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 
   integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" 
   crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" 
   integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" 
   crossorigin="anonymous"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

3. Open C:\Users\{user}\NgTweet\src\app\menu\menu.component.html and Paste the Code Below

HTML

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#moments" role="tab">Moments</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#notifications" role="tab">Notifications</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item float-xs-right">
    <a class="nav-link" data-toggle="tab" href="#logout" role="tab">Logout</a>
  </li>
</ul>

4. Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.html and Paste the Code Below

HTML

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">home panel</div>
  <div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
  <div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
  <div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
  <div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>

You can find the code template above here.

Now the page looks like:

5. Add Some Dummy Data to feed.components.ts

JavaScript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {

  tweets = [
    {text: 'This is my third tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 3'},
    {text: 'This is my second tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 2'},
    {text: 'This is my first tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 1'}
  ];

  constructor() { }

  ngOnInit() {
  }
}

6. Change feed.component.html

HTML

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">

    <div class="card card-block" *ngFor='let tweet of tweets'>
      <nav class="nav nav-inline">
        <a class="nav-link" href="#">{{tweet.authorName}}</a>
        <a class="nav-link" href="#">@{{tweet.authorId}}</a>
        <a class="nav-link" href="#">{{tweet.time}}</a>
      </nav>
      <p class="card-text">{{tweet.text}}</p>
    </div>

  </div>
  <div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
  <div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
  <div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
  <div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>

Now the page looks like:

7. Add Avatars

In order to show the avatars, we need to download some. I got some free avatars from https://blog.placeit.net/free-avatar-pack/. Then you can put these images into the assets folder.

Then, change the tweets array to below (added avatar):

JavaScript

tweets = [
  {text: 'The Moon Hasn\'t Been This Close in Almost 69 Years.',
   authorName:'Science News', authorId: 'science', time: 'Sep 3', avatar:'000m'},
  {text: 'Why do birds eat so much plastic? Scientists offer an answer.',
   authorName:'Sf Gate', authorId: 'sfgate', time: 'Sep 2', avatar:'000f'},
  {text: 'Dinosaur Rise More Gradual Than Previously Thought, Fossils Show.',
   authorName:'Tech Times', authorId: 'techtimes', time: 'Sep 1', avatar:'001m'}
];

8. Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.html and Change the Code to Below

HTML

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">

    <div class="card card-block" *ngFor='let tweet of tweets'>
      <div class="media">
        <a class="media-left" href="#">
          <img class="media-object" src="../assets/avatars/{{tweet.avartar}}.jpg" 
           alt="{{tweet.authorName}}" width="50px">
        </a>
        <div class="media-body">
          <nav class="nav nav-inline">
            <a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
            {{tweet.time}}
          </nav>
          <p class="card-text">{{tweet.text}}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
  <div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
  <div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
  <div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>

Now the page will look like:

9. Change the Feed Component

Now you may find there something strange with the page C:\Users\{user}\NgTweet\src\app\feed\feed.component.html. We know it's a component of the panel, but it still contains the code of other tabpanels such as notifications and messages. Well, it's very easy to change this in Angular2 because it's a component based framework. Now let's change C:\Users\{user}\NgTweet\src\app\feed\feed.component.html.

HTML

<div class="card card-block" *ngFor='let tweet of tweets'>
  <div class="media">
    <a class="media-left" href="#">
      <img class="media-object" src="../assets/avatars/{{tweet.avatar}}.jpg" 
       alt="{{tweet.authorName}}" width="50px">
    </a>
    <div class="media-body">
      <nav class="nav nav-inline">
        <a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
        {{tweet.time}}
      </nav>
      <p class="card-text">{{tweet.text}}</p>
    </div>
  </div>
</div>

But we still need other tabpanels, so we can put the code into C:\Users\{user}\NgTweet\src\app\app\app.component.html easily.

HTML

<app-menu></app-menu>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">
    <app-feed></app-feed>
  </div>
  <div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
  <div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
  <div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
  <div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>

Save and see the page (you needn't refresh the page, because it will be automatically updated), it will be the same.

You may have seen the .css files, but we still haven't used them. Here, I give one simple sample. Since "Home" is a tab, commonly, there should be no bottom line. But as shown in the page, there was a line and now we need to get rid off it.

Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.css and paste the code below:

CSS

.card:first-child {border-top-width:0px;}

10. See the Layout Without Data

Select the tweets part, comment it using "CTRL+/". Now the page shows there's no data. But some time the user doesn't know about that, so let's change to show some message when no data has been found. In this case, we will use the ngIf directive.

In order to show some message when no data is found, let's change the feed.component.html to :

HTML

<template [ngIf]="tweets.length">
  <div class="card card-block" *ngFor='let tweet of tweets'>
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object" src="../assets/avatars/{{tweet.avatar}}.jpg" 
                                  alt="{{tweet.authorName}}" width="50px">
      </a>
      <div class="media-body">
        <nav class="nav nav-inline">
          <a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
          {{tweet.time}}
        </nav>
        <p class="card-text">{{tweet.text}}</p>
      </div>
    </div>
  </div>
</template>
<template [ngIf]='!tweets.length'>
  <div class="card card-block">
    No data found.
  </div>
</template>

Also, you can use <div .... *ngIf='tweets.length'> ... , but you need to add another <div> element.

Now let's save and see it. After being saved, you will find the result is the same as before, why?

Because in this case, the tweets array is undefined. So if you need to change it to:

JavaScript

tweets = [];

Then you will see:

Summary

Until now, we've changed some code and show a panel using Angular2 components, ngIf, ngFor directives and made a small change on CSS. Take a break!

History

1.0.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Develop Angular2 Application using Visual Studio Code - 2

Introduction

Background

Steps

1. Generate Some Code using angular-cli

2. Use bootstrap

3. Open C:\Users\{user}\NgTweet\src\app\menu\menu.component.html and Paste the Code Below

4. Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.html and Paste the Code Below

5. Add Some Dummy Data to feed.components.ts

6. Change feed.component.html

7. Add Avatars

8. Open C:\Users\{user}\NgTweet\src\app\feed\feed.component.html and Change the Code to Below

9. Change the Feed Component

10. See the Layout Without Data

Summary

History

License

Comments and Discussions