DEV Community: claudemotoba

8 reasons to use Angular for web applications

claudemotoba — Tue, 10 Jan 2023 15:27:43 +0000

There are several reasons why you might choose to use Angular for building a web application. Some of the key advantages of using Angular include:

Two-way data binding: Angular's two-way data binding allows you to easily synchronize the view and the model, which can help make your code more efficient and easier to maintain.
Components: Angular's component-based architecture allows you to break your application into smaller, reusable pieces, which can help make your code more modular and easier to understand.
Dependency injection: Angular's built-in dependency injection framework can help make your code more testable and easier to understand.
Strongly-typed: Angular use Typescript as a language which is a superset of javascript. It enables the features like Typechecking, ES6 features etc which makes the development process more efficient and less error-prone.
Built-in directives: Angular provides a wide variety of built-in directives that can help you easily create common UI elements like forms, lists, and data tables.
Large community: Angular has a large and active community, which means that there are many resources available to help you learn and use the framework, as well as many third-party libraries and plugins that you can use to extend its functionality.
Mature Framework : Angular is a mature Framework, Google has been working on it since 2010, so it is a stable framework with a large user base.
Mobile support: Angular provides a set of tools, called Angular Mobile Toolkit, that allows you to build mobile-friendly apps that can run on both iOS and Android devices.

Overall, Angular is a powerful and feature-rich framework that can help you build efficient and maintainable web applications, especially when coupled with best practices and testing.

Dockerizing your Angular application

claudemotoba — Tue, 10 Jan 2023 10:22:32 +0000

Dockerizing an Angular application involves creating a Dockerfile that specifies the instructions for building a Docker image of your application. The Dockerfile should start with a base image, such as Node.js, and then use commands to copy the application code and dependencies into the image, and configure the image to run the application.

Here's an example of a Dockerfile that can be used to build a Docker image of an Angular application:

Use the Node.js LTS image as the base image

FROM node:14-alpine

Create a directory for the application

RUN mkdir -p /usr/src/app

Set the working directory

WORKDIR /usr/src/app

Copy the package.json and package-lock.json files

COPY package*.json ./

Install the application dependencies

RUN npm ci

Copy the rest of the application code

COPY . .

Build the application

RUN npm run build --prod

Expose port 4200

EXPOSE 4200

Start the application

CMD ["npm", "start"]

This Dockerfile starts with the Node.js LTS image, creates a directory for the application, and sets it as the working directory. Then it copies the package.json and package-lock.json files, installs the dependencies, and copies the rest of the application code. Next, it runs the npm run build --prod command to build the production version of the application. Finally, it exposes port 4200 and starts the application using the npm start command.

Once you have created the Dockerfile, you can build the Docker image by running the following command in the same directory where the Dockerfile is located:

docker build -t your_image_name

You can then run the application in a container using the following command:

docker run -p 4200:4200 your_image_name

this will make the application available at http://localhost:4200

This is just a basic example to give you an idea of what a Dockerfile for an Angular application might look like. You may need to adjust the commands to match your specific application's requirements, also you may use nginx to serve the application as well

Deploy Angular Project on an ubuntu server with pm2

claudemotoba — Thu, 09 Dec 2021 10:25:48 +0000

1. Install NodeJs

sudo apt install nodejs

node -v
// v16.13.0

2. Install pm2

sudo npm install pm2 -g

pm2 -v
// 5.1.0

3. Install Git

sudo apt install git

git --version
// git version 2.17.1

4. Install Angular CLI

sudo npm install -g @angular/cli 

ng version
// Angular CLI: 13.0.3

5. Clone Project and Install package

sudo git clone https://github.com/<username>/<repository>.git

cd <project-name>

sudo npm install

6. Run Angular with pm2

pm2 start "ng serve"

// you can specific host, port and name of your app
pm2 start "ng serve --host 0.0.0.0 --port 4205" --name "name"

// list app
pm2 list

Use every() and some() to test the elements of your arrays

claudemotoba — Fri, 01 Oct 2021 09:55:53 +0000

In this tutorial I will explain to you how to test if the elements of the arrays fulfill a condition using the some () and every method of javascript.

some()

The some() method allows you to test if at least one element of the array passes the test implemented by the function. Its return value is a boolean which indicates the result of the test.

"use strict"

const users = [
    { name: "claude Motoba", sexe: "M", age: 19, skills: "Fullstack" },
    { name: "Diana Jade", sexe: "F", age: 25, skills: "Frontend" },
    { name: "Erik Johnson", sexe: "M", age: 18, skills: "Backend" },
];

const test = users.some(({ age, skills }) =>{ 
    return age >= 18 && skills == "Fullstack";
})

console.log(test) // log true

every()

every() on the other hand allows us to test if all the elements of the array pass the test implemented by the function. It also has as return value a boolean which indicates the result of the test.

"use strict"

const users = [
    { name: "claude Motoba", sexe: "M", age: 19, skills: "Fullstack" },
    { name: "Diana Jade", sexe: "F", age: 25, skills: "Frontend" },
    { name: "Erik Johnson", sexe: "M", age: 18, skills: "Backend" },
];

const test = users.every(({ sexe, age }) =>{ 
    return sexe == "M" && age >= 18;
})


console.log(test) // log false

Conclusion

The difference between the two is that the some () method tests whether a single element fulfills the condition while every () checks all the elements.