Javascript News - A collection of audio articles aimed toward Full Stack Development with JS.

When using the Http Client Module: it is common to have a Services folder and subsequent files in order to keep track of the http request and responses to and from the backend. To generate a service in Angular I am going to use the Angular CLI.

ng generate service services/http

This will generate a new http.service.ts file in our myBlog/src/app/services folder. It should be green if you are using VS Code. If one is on a Mac they can allow VS Code (a Microsoft Product) to edit the file with the following command. This is not necessary if you are a Windows or Linux machine. This following command is to be run in the root of the myBlog directory.

sudo chown -R myBlog/app/src/services

Next we are going to migrate our Http Client Module code from the app.component.ts file to the services/http.service.ts file. This will look like so when finished.

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

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

@Injectable({

providedIn: 'root'

})

export class HttpService {

constructor(private http: HttpClient) { }

getBlogPosts() {

return this.http.get('/api/blogPosts');

}

}

The service can then be imported into the app.component.ts file like so. First import the service module that was just created.

import { HttpService } from './services/http.service';

Then one can use the constructor to add the service into the project.

constructor(private service: HttpService) { }

Then one can use the method that was just built to get the Blog Posts.

ngOnInit() {

this.service.getBlogPosts().subscribe((res: any) => {

if (res) {

this.blogPosts = res['posts'];

}

})

}

This completes the introduction to Angular Services. They can be used to clean up the structure of your application and make it easier to do Http Requests with Angular. Now in the browser one would see this: depending on the content of their backend server’s data.

In order to use the Http Client Module one must first import the Http Client Module in the app.module.ts file. To do so one can import the following into their app.module.ts file.

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

From there one is able to add the HttpClientModule to the imports array. From there the Http Client Module can be used in any and all components who are listed in the declarations location of the app.module.ts file.

So here is a fictional scenario. We have a backend service running on localhost port 8080 and want to connect it to our Angular Front-End. So what are we to do? Are we to use Fetch or Axios like React or View? The short answer to this question: is yes. The long answer however is no. We will not be using axios or fetch in this part of the project. Instead we will be using the HttpClient Module that is installed when one installs @angular/core. This goes as such.

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

From here I am able to use the Http Client Module in my app.component.ts file. Note do not forget to add the dependency into the constructor.

constructor(private http: HttpClient) { }

Finally one is able to use the Http Client Module. Like so.

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

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

import { Posts } from './posts.interface.ts'

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInIt {

blogPosts: Posts;

constructor(private http: HttpClient) { }

ngOnInit() {

this.http.get('/api/getBlogPosts').subscribe((res: any) => {

if (res) {

this.blogPosts = res['posts'];

}

})

}

}

One is then able to map the data in the HTML like we just did except this time with the backend service.

This should now look like so considering the data from our backend service.

Now we will transition into better Angular Practices: including using a service and interface.

According to the documentation at https://material.angular.io: Angular Material has “Internationalized and accessible components for everyone”. The key word in this statement is the word ‘components’. The Angular Material Components allow for great User Interface designs as well as the Typescript that controls the behavior of the components.

In order to install Angular Material one must have an Angular Project set up with the CLI. Once this is completed one can install Angular Material into the project with the following command.

ng add @angular/material

Once this command has installed the necessary dependencies and everything one should be ready to import the required components. For this example we will be using an Angular Material Table. In order to do so we must first install the required Angular Material modules. In the app.module.ts file one is to import the following Angular Material Components.

import { MatTableModule } from '@angular/material/table';

import { MatCardModule } from '@angular/material/card';

Now one is able to add the MatTableModule and MatCardModule to the imports array in the NgModule of the app.module.ts file. One these imports are added one is now able to use the Material Table and Material Card components.

Here is an example of the Angular Material Table. Notice the columns are just titles.

Now the associated Typescript file will look like such.

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

blogPosts: any = [{ "title": "My First Post" }, { "title": "My second post" }];

displayedColumns: string[] = ['title']

}

Then with the next command one will be able to see the project in the browser.

ng serve

The project should now look like this is in the browser on port 4200!

There are many other components that can be used with the Angular Materials. The list of different components can be found at: https://material.angular.io/components. There are some interesting components such as MatInput; MatButton and MatList.

When I was first studying Angular: I was more accustomed to the formality-less nature of jQuery and Vanilla JavaScript. If I am being honest, starting to learn Angular scared me because of the complex nature of the Framework. I found learning other frameworks such as Vue or React to be easier: mostly due to the fact that learning TypeScript is difficult.

Through learning Angular’s complex ways: I am now able to call myself an Angular Developer. Though such topics such as Reactive Forms in Angular or using the HTTP Client Module in Angular can be challenging to learn: I believe you will be able to create your own Blog or project after reading this book.

There are many interesting features of Angular 2+: including the fact that it has its own Command Line Interface and Http Client Module. This allows for swift component creation and other features are enabled when using the CLI.

I believe learning Angular boils down to learning a few different functional components of the Angular project setup and CLI. From learning how to generate a project with the CLI to being able to create services and interfaces: the Angular CLI allows for all of these things.

Though there are many good things about Angular: there are also several negatives. For instance, being able to learn that Angular itself is not set up in a way that the contents of the webpage can be indexed by the search engine. This has to be allowed with the Angular CLI and this involves downloading a package known as Angular Universal. Angular Universal can be installed with a few commands. These commands involve the use of the Angular CLI. The first command one wants to run is the ability to create a new Angular project with the Angular CLI.

ng new myBlog --strict --routing --style=scss

Then one is to create a new Angular Universal project out of the Angular CLI.

ng generate universal --client-project myBlog

From here there is one more command necessary that is required to run in order to turn your Angular Project into an Angular Universal Project.

ng add @ng-universal/express-engine

These two commands in conjunction with the creation of a new Angular project allows for your website to be crawled by the search engine if you so choose to do so.

In conclusion Angular Universal is a very important aspect of the Angular CLI and allows for server-side rendering of your webpage. This allows for people to search this once you register your website in the Google Search Console. This allows your blog to get more traffic and therefore revenue!

Before I do a React Vs Angular article; I would like to preface one thing: this is not your run of the mill comparison. Sure it’s easy to compare vue vs react and state how one has a data binding method and the other doesn’t. This is also not an angular vs react vs vue article either. This is an easy comparison considering Angular was first and Vue was based off of Angular.

What I would like to say is that Angular is the best frontend framework. Sure React may be considered the most popular frontend framework and it’s definitely one of the top front end frameworks. However here are some of the benefits of Angular.

First off: Angular is compatible with so many great libraries. This includes (but is not limited to): angular material; primeng and ngx bootstrap (including angular bootstrap). Some other great modules that can be used with Angular include: angular/fire and the built in http module.

However I am going to veer back to Angular vs React for now. React has been one been one of the top frontend frameworks for year now: first created in 2011. It has some great features like react native for ios and android as well as react router for routing the frontend of your application. It even has it’s own built in http module with fetch.

However Angular 2+ has all of the features React has. It has it’s own built in http module with the Angular http module. It has it’s own router with the angular routing component. Also it’s compatible with such cli’s as cordova and ionic so one can make Ios and Android applications with Angular.

So why is Angular better than React? One reason: Data-Binding Arrays.

If one was to do data-binding with react they would have to do an order list as such:

{ someArray.map(function(arrayItem) {

}

However in Angular this is done very simply.

As you can see data binding in Angular is much better than React. Given React is a great framework for creating User Interfaces; Angular still has it beat with the ease of data-binding.

Would you like to to index your Angular Applications in Google or Bing?

Behold: A course for preexisting Angular Developers with the goal of passing on the knowledge of Angular Universal.

Angular Universal is a library for the Angular CLI which allows one to prepare one’s Angular Application for the search engine.

This allows all of the contents of you webpages and database to be crawled by the search engine.

Crawling more of your webpage means that there will be more traffic and therefore more revenue for you and your business!

For more information please visit: https://www.udemy.com/course/angular-2-mastering-googles-front-end-framework/.

Hi and welcome to JavasScript News. Today I am talking about Websockets in Node.js. Specifically using WebSockets in a Full Stack environment: meaning one is sending messages from the server to client and the client to server in real-time. This means that one is able to display data as it happens and there is no need to auto-reload.

Some websocket libraries include the ws module, websocket library and socket.io. There is also the native javascript websocket interface that allows one to interact with websockets without a library in vanilla javascript.

Basically how one uses websockets in a full stack environment is by connecting the server to the client with socket.io. This is done by importing the socket.io module and then declaring a new io instance. After this is done one can connect to the socket by calling the socket variable. This was for the server. As for the client the socket.io-client library is used. This can be used in vanilla javascript with a script tag that imports socket.io-client or with react; vue or angular by importing with npm.

Basically how socket.io works is by enabling one to send a message from the server with the .emit method to the client with the .on method. This can be repeated from the client to the server in the same fashion.

Socket.io is a great library because it can also be compatible with databases to store the data. If one does not add a database the data will reset when the server does. In order to turn mongodb into a real-time database with websockets one is to use mongoose and the .watch() method.

Websockets are also compatible with the webrtc api enabling one to send buffer from the client to the server and visa-versa. This is the main technology between applications such as Skype and Zoom. Websockets are also compatible with GeoJSON in mongodb: allowing for one to be able to track runs and stuff.

In conclusion websockets are very helpful for the real-time usage of databases. The best library in npm for websockets is socket.io. This is the driving technology behind many applications today. Thank and best wishes upon your websockets journey.