Personal Portfolio Using Angular

-
img

 Technology : Angular 8, BootStrap,HTML5,CSS3.

Github Link: https://github.com/mehulk05/Personal-Portfolio-Angular-Updated

Working Demo: https://personal-portfolio0320.000webhostapp.com/

Angular is one of the most popular Javascript frameworks in the world for building modern web applications. Angular is created & developed by Google and has huge community support behind it.

I made my Personal Portfolio Using Angular 8. Though I have used Angular8 there is not much difference in other versions of angular

Prerequisites for an Angular 8 Project

Angular brings a solution to deal with all of the configurations: Angular CLI. We can start developing an Angular project within a couple of minutes by using Angular CLI.

1. Node js version 10.9.0

2. Npm (version 8.x or 10.x).

What is Angular CLI?

CLI stands for Command Line Interface. Angular CLI is being used for automating operations in Angular projects rather than doing them manually. CLI supports developers in an Angular project from beginning to end.

For example, Angular CLI can be used for:

  • Configurations, Environment Setup
  • Building components, services, the routing system
  • Starting, testing, and deploying the project
  • Installing 3rd party libraries like Bootstrap, Sass, etc. (with Webpack)


How to start an Angular app with CLI?

If you visit the official website above, you can see that there are some commands written. These are 4 main steps to start an Angular app:

  • Node Package Manager (NPM) installation (prerequisite)
  • Angular CLI installation
  • Creating an Angular app with the CLI
  • Running the app

Step 1: Install NPM :

Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. You can download NPM from here.



Step 2: Install the Angular CLI

After you’ve installed NPM, you can install Angular CLI as the 2nd step. Open your terminal or command prompt and type the command below:

npm install -g @angular/cli


 ng stands for Angular and -v is version.

Step 3 : Create a New Angular Project with the CLI

You develop apps in the context of an Angular workspace.

To create a new workspace and initial starter app:

  1. Run the CLI command ng new and provide the name my-app, as shown here:
ng new Personal-Portfolio

2. The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

Step 4: Run the application

The Angular CLI includes a server, so that you can easily build and serve your app locally.

  1. Go to the workspace folder (my-app).
  2. Launch the server by using the CLI command ng serve, with the --open option.
ng serve --open

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.



Step 5: Understanding Folder Structure




Let’s go one by one and see what the purpose of each file and folder is.

  1. e2e(end-to-end) — This folder contains test cases for testing the complete application along with its specific configuration files.
  2. node_modules — Contains all the node-modules used in the angular application.
  3. src — Complete source code of the application resides in src folder.
  4. app — root component of the application.
  5. assets — contains all the images or resources used in the application.
  6. environments — contains build configuration environments of the application. We can create any target environment and specify its configuration here.
  7. index.html — This is the main html page which is rendered when someone opens your website or application.
  8. main.ts — This is the main entry point of the angular application which compiles the AppModule and renders the specified bootstrap component in the browser.
  9. styles.css — Contains all the styles to be used as globally in the application.
  10. .editorconfig — This file is used for defining consistent configuration.
  11. angular.json — This file is mainly used for specifying configuration of CLI. It includes configuration of build, serve, test, lint, e2e commands which are used by @angular-cli.
  12. karma.conf.js — This specifies configuration for karma, which is used for testing angular applications.
  13. package.json — Specifies all the project dependencies.
  14. tsconfig.json — defines configuration of TypeScript in project.
  15. tslint.json — defines TSLint configuration for project. TSLint is an extensible static analysis tool for TypeScript.

Step 6: Add the code to your project

You can create your own component or you can visit to my repository and copy the code and paste it in your project.

Link to my repository for this project:

mehulk05/Personal-Portfolio-Angular-Updated

This project was generated with Angular CLI version 8.3.2. Run ng serve for a dev server. Navigate to…

github.com

After adding code run your app, It will look like this






Summary

So now, you have a better understanding of what those commands mean:



Commands written in the official website of CLI

  • First install NPM
  • Install Angular CLI
  • Create an App via CLI
  • Serve it

So this is how we start developing an Angular app from scratch. Angular CLI is very helpful for developing Angular apps. However, sometimes unexpected problems/errors may occur. Well, welcome to programming :)

Don’t worry, just Google the error and try to find a solution. If you still can’t solve it, comment down below and we will have a look.

I hope you find this article useful.

Comments

Post a Comment

Popular posts from this blog

Blog App Using MERN Stack

-
Image
Mehul Kothari Oct 13, 2020  · 5 min read Github: https://github.com/mehulk05/Blogapp-using-MERN Live Demo: https://mehulk05.github.io/Blogapp-using-MERN/ A demo of what we are creating Let us understand what does MERN stack means. Mongo DB  – It’s an open-source NoSQL cross-platform document-oriented database. Express JS  – It’s a web-based application framework work with Node JS, It helps to build web apps and RESTful APIs. React – React is a  JavaScript  library created by  Facebook.  React is a  User Interface  (UI) library. React is a tool for building  UI components Node JS  – It is a free JavaScript run-time environment, It executes JavaScript code outside of a browser. It is available for macOS, Windows, Linux, and Unix. I will be using the following plugins and tools to create the MERN Stack app. Node JS MongoDB Mongoose JS Express JS ReactJS Visual Studio Code #1 Setup Node JS development environment Follow this l...
Read more

Read data from Google spreadsheet in Angular

-
Image
Mehul Kothari Dec 12, 2020 · 4 min read Github :  https://github.com/mehulk05/MyShop Demo Link:   https://mehulk05.github.io/MyShop/#/ If you’ve ever found yourself asking ‘how can I access Google Sheet spreadsheets with JavaScript?’, then you’re probably not alone. You only have to type something like ‘reading google sheets data using javascript’ into Google and you’ll be inundated with a bevy of solutions to this conundrum. The problem is, in my experience, they’re either   very complex and overblown, or quite difficult to get up and running with (e.g. poor documentation), or they’re just a bit too prescriptive with how they serve you those precious results. So that's why I am taking this opportunity to write a simple solution Firstly, is this right for my needs? The following blog allows for  reading only  from a publicly published Google Sheet. If your needs look like these, then it might be a great fit: You are able to publish your Google Sheet publicly ...
Read more