Click here to Skip to main content
13,146,742 members (79,683 online)
Click here to Skip to main content
Add your own
alternative version

Stats

6.3K views
5 bookmarked
Posted 12 Nov 2016

Develop Angular2 Application using Visual Studio Code - 2

, 12 Nov 2016
Rate this:
Please Sign up or sign in to vote.
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:

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

<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

<!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

<!-- 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

<!-- 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

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

<!-- 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):

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

<!-- 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.

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

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

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

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

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)

Share

About the Author


You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionThe user's account was deleted, so no update Pin
morigunsyou18hrs 30mins ago
membermorigunsyou18hrs 30mins ago 
QuestionPart 1 unavailable ? Pin
Member 132370212-Jun-17 0:18
memberMember 132370212-Jun-17 0:18 
SuggestionGreat so far. Minor misspelling Pin
Alan Churchill27-Jan-17 6:38
memberAlan Churchill27-Jan-17 6:38 
GeneralMy vote of 5 Pin
Forhad Reza15-Nov-16 1:22
memberForhad Reza15-Nov-16 1:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 13 Nov 2016
Article Copyright 2016 by NguDeveloper
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid