Cristian Vasta

Cristian Vasta

1566619244

Learn Angular 8 from Scratch for Beginners

Angular allows you to create SPA’s (Single Page Apps), SSR’s (Server Side Rendered) and PWA’s (Progressive Web Apps). For this tutorial, we’re going focus just on the basics of building an SPA.

You should be comfortable with HTML, CSS and JavaScript fundamentals before proceeding with Angular. 

Let’s get started!

Installation

First, you will need Node.js in order to install the Angular CLI. Head on over to http://nodejs.org , download and install it. After installation with the default settings, open up your command line / console and run the following command:

> npm -v

This should output a version number. If so, you’re ready to install the Angular CLI (Command Line Interface), which is a command line tool that allows you to create and manage your Angular 8 projects.

To install the Angular CLI, issue the following command:

> npm install -g @angular/cli

 Great, now let’s create a new Angular 8 project:

> ng new myapp

This will prompt you with a couple questions. Answer them according to the answers below:

? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS] 

Angular routing allows you to create routes between the components in your app. We’ll be using Sass (SCSS) as well, so we’re adding that too.

Let’s hop into the folder where our new project is stored:

> cd myapp

At this point, I usually issue the command: code . which opens up Visual Studio Code (the code editor I use) in the current folder.

Awesome, we’re ready to rock now!

Running the Project

When you’re developing your Angular 8 app, you will want to issue the following command in the terminal:

> ng serve -o

The -o flag is optional, but it opens up your default browser to the development location http://localhost:4200

Now, while you’re developing your Angular app, every time you update a file, the browser will automatically reload (hot reloading) so that you can see the app and debug it in near real-time.

Note: When you want to deploy your Angular app, you will use a different command. We’ll get to that later.

Folder Structure

It’s worth dedicating a little bit of time to outline the important files and folders that you will commonly work in – and also understand some of the under-the-hood stuff that makes Angular 8 work.

The folder and file structure looks like this in an Angular 8 project:

> e2e
> node_modules
> src
  > app
  > assets
  > environments
  ..index.html
  ..styles.scss

  • The e2e folder is for end to end testing. We won’t be covering testing in this course, but I will do a separate tutorial on that.
  • node_modules is a folder you will never watch to touch, as it contains the project’s dependencies.
  • /src contains much of your code.
  • /app is where you will spend the most of your time writing your Angular 8 code. It includes the routing, components, and more.
  • /index.html is the entry point to the app, and you generally don’t touch this file.
  • /styles.scss is where your global CSS rulesets will reside.

Angular 8 Components

The fundamental building blocks of your Angular app are the components. Components consist of 3 elements:

  • The e2e folder is for end to end testing. We won’t be covering testing in this course, but I will do a separate tutorial on that.
  • node_modules is a folder you will never watch to touch, as it contains the project’s dependencies.
  • /src contains much of your code.
  • /app is where you will spend the most of your time writing your Angular 8 code. It includes the routing, components, and more.
  • /index.html is the entry point to the app, and you generally don’t touch this file.
  • /styles.scss is where your global CSS rulesets will reside.

Let’s take a look at the component the Angular CLI generated for us to see these 3 areas in action.

Open up /src/app/app.component.ts:

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'myapp';
}

As you can see, we have a single import at the top, which is necessary for all Angular components. We also have the @Component({}) decorator, and the component logic at the bottom with the single title property.

As we progress, we’ll work with all 3 of these concepts to build out the app.

Creating a Navigation

Let’s add a navbar with a logo and a navigation to the top of our app. 

Open up /src/app/app.component.html and remove all of the current code. Replace it with the following:

<header>
  <div class="container">
    <a routerLink="/" class="logo">CoolApp</a>
    <nav>
      <ul>
        <li><a href="#" routerLink="/">Home</a></li>
        <li><a href="#" routerLink="/list">List</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="container">
  <router-outlet></router-outlet>
</div>

The two important areas that are specific to Angular 8 here are:

  1. routerLink - This is how you link together different pages of your app. You don’t use href.
  2. router-outlet - This is where routed components are displayed within the template. You will see how this works shortly…

Next, let’s visit the global /app/styles.scss file to provide it with the following rulesets:

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

$primary: rgb(111, 0, 255);

body {
    margin: 0;
    font-family: 'Nunito', 'sans-serif';
    font-size: 18px;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: $primary;
    padding: 1em 0;

    a {
        color: white;
        text-decoration: none;
    }
    a.logo {
        font-weight: bold;
    }

    nav {
        float: right;

        ul {
            list-style-type: none;
            margin: 0;
            display: flex;

            li a {
                padding: 1em;

                &:hover {
                    background: darken($primary, 10%);
                }
            }
        }
    }
}

h1 {
    margin-top: 2em;
}

Nothing too exciting happening here. After saving, your app should now have a styled navigation bar.

Routing

Let’s use the Angular CLI to generate a couple components for the pages in our app.

Issue the following commands from the console:

> ng generate component home
> ng generate component list

This will generate several files for each component.

Next, we need to visit /src/app/app-routing.module.ts and add the following code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component'; // Add this
import { ListComponent } from './list/list.component'; // Add this


const routes: Routes = [
  { path: '', component: HomeComponent },              // Add this
  { path: 'list', component: ListComponent }           // Add this
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

We first import the components that were generated, and then we add them as an object in the Routes array. We left the path: property blank, which signifies the home component that will load by default when the app loads.

If you click on the List and Home links in the navigation, they will now display the component template associated with the clicked component!

Simple!

One way data binding

When you want to communicate data from the component logic to the template (or vice versa), this is called one-way data binding.

Open up the /src/app/home/home.component.html file and replace it with the following:

<h1>Welcome!</h1>

<div class="play-container">
    <p>You've clicked <span (click)="countClick()">this</span> {{ clickCounter }} times.</p>
</div>

We have a few things happening here:

  • The e2e folder is for end to end testing. We won’t be covering testing in this course, but I will do a separate tutorial on that.
  • node_modules is a folder you will never watch to touch, as it contains the project’s dependencies.
  • /src contains much of your code.
  • /app is where you will spend the most of your time writing your Angular 8 code. It includes the routing, components, and more.
  • /index.html is the entry point to the app, and you generally don’t touch this file.
  • /styles.scss is where your global CSS rulesets will reside.

Visit the home.component.ts file and add the following code:

export class HomeComponent implements OnInit {

  clickCounter: number = 0;

  constructor() { }

  ngOnInit() {
  }

  countClick() {
    this.clickCounter += 1;
  }
}

We’ve defined the property (with TypeScript) and we’ve set it to 0.  

Next, we created the function which will increment the clickCounter property by 1. 

Before we give it a shot, let’s give this some style. Visit the home.component.scss file and specify:

span {
    font-weight: bold;
    background: lightgray;
    padding: .3em .8em;
    cursor: pointer;
}

.play-container {
    padding: 3em;
    border: 1px solid lightgray;
    margin-bottom: 1em;

    input {
        padding: 1em;
        margin-bottom: 2em;
    }
}

Save all of the files you just modified, and give it a shot!

First, the template is retrieving the clickCounter property from the component. Then, if you click on the span element, it is communicating data from the template to the component!

Two way data binding

The best way to demonstrate the concept of data binding is to do it with a form element. 

Visit home.component.html and add the following code:

<div class="play-container">
    <p>
        <input type="text" [(ngModel)]="name"><br>
        <strong>You said: </strong> {{ name }}
    </p>
</div>

In order for ngModel to work correctly, we need to import it into our /src/app/app.module.ts:

// other imports
import { FormsModule } from '@angular/forms';

@NgModule({
  ...
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule       // add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})


Next, we have to define the name property in the home.component.ts file:

clickCounter: number = 0; 
name: string = '';  // add this

If you save it and begin to type within the textfield, you will see that it displays in the line beneath it in real time. This is two-way data binding because it’s both setting and retreiving the property to and from the component/template!

ng-template

What about working with if and else within your templates? We can use ng-template for that.

Add the following code at the end of home.component.html:

<div class="play-container">
    <ng-template [ngIf]="clickCounter > 4" [ngIfElse]="none">
        <p>The click counter <strong>IS GREATER</strong> than 4.</p>
    </ng-template>

    <ng-template #none>
        <p>The click counter is <strong>not greater</strong> than 4.</p>
    </ng-template>
</div>

First, we use property binding [ngIf] and bind it to an expression clickCounter > 4.

If that expression isn’t true, it will call upon a template called none with ngIfElse.

If that expression is true, it will show the HTML within the initial ng-template block. 

If not, it shows the template defined by #none beneath it!  

Give it a shot by clicking the span element until it reaches 5 or more and you will see it work in action.

Awesome!

Style Binding

Sometimes, you want to modify the appearance of your UI based on events that occur in your app. This is where class and style binding come into play.

Modify the last play-container class in our HTML like so:

<div class="play-container" [style.background-color]="clickCounter > 4 ? 'yellow' : 'lightgray'">

With inline style binding, you wrap it in brackets (property binding) and specify style. and then the name of the CSS property. You bind them to an expression (we’re using clickCounter > 4, or this could be a boolean value too) and then a ternary operator ? where the first value is used if it’s true, and the second value after the colon is used for false.

If you save, it will initially show the play container block as light gray. If you click our span button a few times, it will turn yellow.

What if you wanted to specify multiple CSS properties?

Modify the code like this:

<div class="play-container" [ngStyle]="{
    'background-color': clickCounter > 4 ? 'yellow' : 'lightgray',
    'border':           clickCounter > 4 ? '4px solid black' : 'none'}
">

Try it out now, and you will notice both CSS properties change. 

Note: You can specify **[ngStyle]=“someObject” **instead, if you wish to specify that logic in the component instead of the template.

Class Binding

If you wish to add or remove entire classes that are defined in your CSS, you can do this with class binding.

Modify the current .play-container we’ve been working with, to the following:

<div class="play-container" [class.active]="clickCounter > 4">

Visit the home.component.scss and add this ruleset:

.active {
    background-color: yellow;
    border: 4px solid black;
}

Give it a shot! It works!

We can also set multiple classes with ngClass.

Modify the template as shown below:

<div class="play-container" [ngClass]="setClasses()">

Let’s visit the component file and add the following:

  setClasses() {
    let myClasses = {
      active: this.clickCounter > 4,
      notactive: this.clickCounter <= 4
    };
    return myClasses;
  }

We added the notactive class here, so we should define it in the component’s CSS file as well:

.notactive {
    background-color: lightgray;
}

Give it a shot! Awesome stuff!

Services

Services are special components that are reusable throughout your app. We’re going to create a service for the purpose of communicating with an API to fetch some data and display it on our lists page.

Let’s generate the service with the Angular CLI:

ng g s http

Notice “g s”, these are just shorthand terms for “generate service”. The name we’re giving this service is “http”.

Let’s visit the new service file located at /src/app/http.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor() { }
}


It looks similar to a component, except the import is an Injectable instead of a Component, and the decator is based on this @Injectable.

Let’s create a custom method that other components can access:

export class HttpService {

  constructor() { }

  myMethod() {
    return console.log('Hey, what is up!');
  }
}

Next, in /src/list/list.component.ts:

export class ListComponent implements OnInit {

  constructor(private _http: HttpService) { }

  ngOnInit() {
    this._http.myMethod();
  }

}


ngOnInit() is a lifecycle hook that is fired when the component loads. So, we’re saying, run our .method() from the service when the component loads.

If you click to the list link in the navigation and view your console in the web developer tools, you will see “Hey, what is up!” output.

Angular HTTP Client

We need to integrate the HTTP client within our http service, which will allow us to communicate with a public API.

Visit our http.service.ts file and add the following:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  getBeer() {
    return this.http.get('https://api.openbrewerydb.org/breweries')
  }
}


First, we import the HttpClient, then we create an instance of it through dependency injection, and then we create a method that returns the response from the API. Simple!

We have to import the HttpClientModulein our /src/app/app.module.ts file:

import { HttpClientModule } from '@angular/common/http';  // Add this

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule   // Add here
  ],

Next, open up the list.component.ts file and add the following:

export class ListComponent implements OnInit {

  brews: Object;

  constructor(private _http: HttpService) { }

  ngOnInit() {
    this._http.getBeer().subscribe(data => {
      this.brews = data
      console.log(this.brews);
    }
  );
  }
}

 The service returns an observable, which means we can subscribe to it within the component. In the return, we can pass the data to our brews object.

Next, visit the list template file and add the following:

<h1>Breweries</h1>

<ul *ngIf="brews">
  <li *ngFor="let brew of brews">
    <p class="name">{{ brew.name }}</p>
    <p class="country">{{ brew.country }}</p>
    <a class="site" href="{{ brew.website_url }}">site</a>
  </li>
</ul>

First, we add an ** ngIf* to only show the UL element if brews exists. 

Then, we iterate through the array of objects with ** ngFor*.

After that, it’s a simple matter of iterating through the results with interpolation!

Let’s style this with CSS real quickly in this component’s .scss file:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;

    li {
        background: rgb(238, 238, 238);
        padding: 1em;
        margin-right: 10px;
        width: 20%;
        height: 200px;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;

        p {
            margin: 0;
        }

        p.name {
            font-weight: bold;
            font-size: 1.2rem;
        }
        p.country {
            text-transform: uppercase;
            font-size: .9rem;
            flex-grow: 1;
        }
    }
}

And here’s the result!

Deployment

Let’s say that we’re happy with our app and we want to deploy it.

We first have to create a production build with the Angular CLI. Visit the console and issue the following command:

> ng build --prod

This will create a /dist folder. We can even run it locally with something like lite-server. To install lite-server:

> npm i -g lite-server

Hop into the folder: **myapp\dist\myapp** and run:

> lite-server

This will launch the production build in the browser!

At this point, you have a number of options for deploying it (Github Pages, Netlify, your own hosting, etc…).

Further reading:

How to create a registration form using Angular 8 and Kendo UI

Angular 8 User Registration and Login Example and Tutorial

Creating Micro Frontends using Web Components (with Angular and React)

Understanding of ngRx with Redux in Angular

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example

Angular 8 RxJS Multiple HTTP Request using the forkJoin Example

To become an Outstanding AngularJs Developer - part 2

To become an Outstanding AngularJs Developer - part 1

#angular #angular-js #javascript

What is GEEK

Buddha Community

Learn Angular 8 from Scratch for Beginners

dadi junior

1566628043

👍👍👍👍👍👍👍👍👍👍

Sival Alethea

Sival Alethea

1624312800

Learn Java 8 - Full Tutorial for Beginners. DO NOT MISS!!!

Learn Java 8 and object oriented programming with this complete Java course for beginners.
⭐️Contents ⭐️

⌨️ (0:00:00) 1 - Basic Java keywords explained
⌨️ (0:21:59) 2 - Basic Java keywords explained - Coding Session
⌨️ (0:35:45) 3 - Basic Java keywords explained - Debriefing
⌨️ (0:43:41) 4 - Packages, import statements, instance members, default constructor
⌨️ (0:59:01) 5 - Access and non-access modifiers
⌨️ (1:11:59) 6 - Tools: IntelliJ Idea, Junit, Maven
⌨️ (1:22:53) 7 - If/else statements and booleans
⌨️ (1:42:20) 8 - Loops: for, while and do while loop
⌨️ (1:56:57) 9 - For each loop and arrays
⌨️ (2:14:21) 10 - Arrays and enums
⌨️ (2:41:37) 11 - Enums and switch statement
⌨️ (3:07:21) 12 - Switch statement cont.
⌨️ (3:20:39) 13 - Logging using slf4j and logback
⌨️ (3:51:19) 14 - Public static void main
⌨️ (4:11:35) 15 - Checked and Unchecked Exceptions
⌨️ (5:05:36) 16 - Interfaces
⌨️ (5:46:54) 17 - Inheritance
⌨️ (6:20:20) 18 - Java Object finalize() method
⌨️ (6:36:57) 19 - Object clone method. [No lesson 20]
⌨️ (7:16:04) 21 - Number ranges, autoboxing, and more
⌨️ (7:53:00) 22 - HashCode and Equals
⌨️ (8:38:16) 23 - Java Collections
⌨️ (9:01:12) 24 - ArrayList
📺 The video in this post was made by freeCodeCamp.org
The origin of the article: https://www.youtube.com/watch?v=grEKMHGYyns&list=PLWKjhJtqVAblfum5WiQblKPwIbqYXkDoC&index=9
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#java #java 8 #learn java 8 #learn java 8 - full tutorial for beginners #beginners #java course for beginners.

Clara  Gutmann

Clara Gutmann

1598716260

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

Brielle  Maggio

Brielle Maggio

1626657482

Learn Angular From Scratch - Build SPA/Website with Angular 9 and Bootstrap - Part 1

Part 1 - Creating Angular 9 website using Angular CLI - Angular Single page application

Download NodeJS
https://nodejs.org/en/download/

Install Angular CLI
https://cli.angular.io/

Create Angular project from scratch using Angular CLI
ng new ProjectName

Spin up the application in the browser
ng serve -o

#angular #bootstrap #angular 9 #scratch #scratch

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

I am Developer

1617089618

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

Recommended:-Laravel Try Catch

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners