DEV Community: AxlBlaze

Git : Commands to Set Git Repo Local & online.

AxlBlaze — Mon, 12 Oct 2020 20:00:03 +0000

Setting up Git

Objectives and Outcomes

In this exercise you will learn to install Git on your computer. Git is required for using all the remaining Node.js and Node based tools that we encounter in the rest of the course. At the end of this exercise, you would be able to:

Install Git on your computer
Ensure that Git can be used from the command-line or command-prompt on your computer
Set up some of the basic global configuration for Git

Downloading and Installing Git :-

To install Git on your computer, go to https://git-scm.com/downloads to download the Git installer for your specific computing platform.
Then, follow the installation steps as you install Git using the installer.
You can find more details about installing Git at https://git-scm.com/book/en/v2/Getting-Started-Installing-Git. This document lists several ways of installing Git on various platforms.
Installing some of the GUI tools like GitHub Desktop will also install Git on your computer.
On a Mac, setting up XCode command-line tools also will set up Git on your computer.
You can choose any of the methods that is most convenient for you.

Some Global Configuration for Git :-

Open a cmd window or terminal on your computer.
Check to make sure that Git is installed and available on the command line, by typing the following at the command prompt:

   git --version

To configure your user name to be used by Git, type the following at the prompt:

   git config --global user.name "Your Name"

To configure your email to be used by Git, type the following at the prompt:

   git config --global user.email <your email address>

You can check your default Git global configuration, you can type the following at the prompt:

   git config --list

Setting Online Git Repositories

Objectives and Outcomes

In this exercise you will learn about how to set up and use an online Git repository and synchronize your local Git repository with your online repository. At the end of this exercise, you will be able to:

Set up the online repository as a remote repository for your local Git repository
Push your commits to the online repository
Clone an online Git repository to your computer ## Setting up an Online Git repository
Sign up for an account either at Bitbucket (https://bitbucket.org) or GitHub (https://github.com). Note that private repositories on GitHub requires a paid account, and is not available for free accounts.
Then set up an online Git repository named git-test. Note the URL of your online Git repository. ### Set the local Git repository to set its remote origin
At the prompt, type the following to set up your local repository to link to your online Git repository:

   git remote add origin <repository URL>

Pushing your commits to the online repository

At the prompt, type the following to push the commits to the online repository:

   git push -u origin master

Cloning an online repository

To clone an online repository to your computer, type the following at the prompt:

   git clone <repository URL>

Angular File Explanation

AxlBlaze — Thu, 23 Jul 2020 08:56:14 +0000

Angular App Files Explanation:-

Files used in Angular App folder

Angular App files which are mainly used in your project are given below:

src folder:-

This is the folder which contains the main code files related to your angular application.

app folder:-

The app folder contains the files, you have created for app components.

app.component.css:-

This file contains the cascading style sheets code for your app component.

app.component.html:-

This file contains the html file related to app component. This is the template file which is used by angular to do the data binding.

app.component.spec.ts:-

This file is a unit testing file related to app component. This file is used along with other unit tests. It is run from Angular
CLI by the command ng test.

app.component.ts:-

This is the most important typescript file which includes the view logic behind the component.

app.module.ts:-

This is also a typescript file which includes all the dependencies for the website. This file is used to define the needed modules to be imported, the components to be declared and the main component to be bootstrapped.

Other Important files:-

package.json:-

This is npm configuration file. It includes details about your website's package dependencies along with details about your own website being a package itself.

package-lock.json :-

This is an auto-generated and modified file that gets updated whenever npm does an operation related to node_modules or package.json

angular.json:-

It is very important configuration file related to your angular application. It defines the structure of your app and includes any settings associated with your application. Here, you can specify environments on this file (development, production). This is the file where we add Bootstrap file to work with Angular.

.gitignore:-

This file is related to the source control git.

.editorconfig:-

This is a simple file which is used to maintain consistency in code editors to organize some basics such as indentation and whitespaces.

assets folder:-

This folder is a placeholder for resource files which are used in the application such as images, locales, translations etc.
environments folder: The environments folder is used to hold the environment configuration constants that help when building the angular application. The constants are defined in 2 separate .ts files (environment.ts and environment.prod.ts), where these constants are used within the angular.json file by the Angular CLI. For example, if you run the ng build command, it will build the application using the development environment settings, whereas the command ng build ?prod will build the project using the production environment settings.

browserlist:-

This file is used by autoprefixer that adjusts the CSS to support a list of defined browsers.

favicon.ico:-

This file specifies a small icon that appears next to the browser tab of a website.

index.html:-

This is the entry file which holds the high level container for the angular application.

karma.config.js:-

This file specifies the config file for the Karma Test Runner,Karma has been developed by the AngularJS team which can run tests for both AngularJS and Angular 2+

main.ts:-

As defined in angular.json file, this is the main ts file that will first run. This file bootstraps (starts) the AppModule from app.module.ts , and it can be used to define global configurations.

polyfills.ts:-

This file is a set of code that can be used to provide compatibility support for older browsers. Angular code is written mainly in ES6+ language specifications which is getting more adopted in front-end development, so since not all browsers support the full ES6+ specifications, pollyfills can be used to cover whatever feature missing from a given browser.

styles.css:-

This is a global css file which is used by the angular application.

tests.ts:-

This is the main test file that the Angular CLI command ng test will use to traverse all the unit tests within the application and run them.

tsconfig.json:-

This is a typescript compiler configuration file.

tsconfig.app.json:-

This is used to override the tsconfig.json file with app specific configurations.

tsconfig.spec.json:-

This overrides the tsconfig.json file with app specific unit test configurations.

Angular: Installation

AxlBlaze — Tue, 21 Jul 2020 20:43:23 +0000

In this tutorial, we'll lean how to install Angular CLI in Window and use it to create an Angular project.

What is Angular CLI?

Angular CLI is the official tool for initializing and working with Angular projects. It saves you from the hassle of complex configuration.

After installing Angular CLI, you'll need to run one command to generate a project, you see about 400 files will be generated for the project and another to serve it using local development server to play with your application.

Like most modern front end tools these days, Angular CLI is built on the top of Node.js.

Node.js is a server technology that allows you to run JavaScript on the server and build server-side web applications. However, Angular s a front end technology, so even if you need to install Node.js on your development machine, it is only for running the CLI.

That being said, if you are building a full-stack web application with Angular, you may need Node.js for creating the back end part if you like to use JavaScript for the front end and back end.

NPM stands for Node Package Manager. It's a registry for hosting Node packages. In recent years it's also been used to publish front end packages and libraries like Angular, React, Vue.js and even Bootstrap.

Installing Angular CLI on Windows:-

i) Download and install the Node.js for running the CLI.

1.1. Click the link Download And download node according to your system requirements)

1.2. Install node.js.

1.3. You can make sure Node is installed on your system by running the following command in a command prompt which should display the installed version of Node:
>> Node -v

ii) Next, run the following command to install Angular CLI.

    >> npm install @angular/cli

After the command finishes successfully, you should have Angular CLI installed.

iii) After installing Angular CLI, you can run many commands. Let’s start by checking the version of the installed CLI

    >> ng version

Generating Project:-

i) You can use Angular CLI to quickly generate your Angular project by running the following command in your command line interface:

    >> ng new PROJECTNAME

ii) Go to folder using cd command

    >> cd PROJECTNAME

iii) Run Project- you can simply, use the ng serve command from your terminal to serve your project locally.

    >> ng serve

You can now navigate to the http://localhost:4200/ address to start playing with your front end application. The page will automatically live-reload if you change any source file.

Install Visual Studio Code IDE or JetBrains WebStorm

You must have an IDE like Visual Studio Code IDE or JetBrains WebStorm to run your Angular app.

VS Code is light and easy to setup, it has a great range of built-in code editing, formatting, and refactoring features. It is free to use. It also provides a huge number of extensions that will significantly increase your productivity.

You can download VS Code from here: https://code.visualstudio.com

JetBrains WebStorm is also a great IDE to develop Angular apps. It is fast, attractive, and very easy to use software but, it is not free to use. You have to purchase it later, it only provides a trial period of 30 days for free.

You can download Jetbrains Webstorm from here: https://www.jetbrains.com/webstorm/download/#section=windows

Next Topic : Angular File explanation

Angular : Introduction

AxlBlaze — Sun, 19 Jul 2020 16:50:15 +0000

What is Angular?

Angular is a JavaScript framework which makes you able to create reactive Single Page Applications (SPAs). This is leading front-end development framework which is regularly update by Angular team of Google. The very first version Angular 1.0 is known as AngularJS. Angular's versions beyond 2+ are generally known as Angular only.

What is Single Page Application (SPA)?

A single page application is a web application or a website which provides users a very fluid, reactive and fast experience similar to a desktop application. It contains menu, buttons and blocks on a single page and when a user clicks on any of them; it dynamically rewrites the current page rather than loading entire new pages from a server. That's the reason behind its reactive fast speed. Because the page need not to reload again and again.

Angular 1:

Angular 1 or Angular JS was initially released in 2010. It was the first Angular version. It create a revolution in the web application development. It was a browser side JavaScript which used within HTML code. It is popularly known as Angular JS.

Angular 2 or above version:

Angular 2 was a complete rewrite of Angular 1. It was initially released in 2016. There is nothing common between Angular and Angular 1. All the above version of Angular is similar to each other. Angular 10 is the latest version. All these versions are known as Angular.

Full Stack Development

Angular is a complete framework of JavaScript. It provides Testing, animation and Accessibility. It provides full stack development along with Node.js, Express.js, and MongoDB.

Testing:- Angular provides Karma and Jasmine for unit testing. B y using it, you can check your broken things every time you save. Karma is a JavaScript test runner tool created by Angular team. Jasmine is the testing framework form unit testing in Angular apps, and Karma provides helpful tools that make it easier to us to call our Jasmine tests whilst we are writing code.

Animation Support: Angular facilitates you to create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

Accessibility: In Angular, you can create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

Next topic : Angular installation.

GIT-Bash Commonly Used Commands.

AxlBlaze — Sat, 11 Jul 2020 08:35:21 +0000

Git-bash :-

Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience. Bash is an acronym for Bourne Again Shell. A shell is a terminal application used to interface with an operating system through written commands.

Installing Git Bash :-

To download Git Bash:-

  * 1.Go to [link](https://git-scm.com/downloads)

  * 2.download the software for Windows

  * 3.install Git choosing all the default options

First Time Git Configuration:-

Sets up Git with your name:

   >> git config --global user.name "<Your-Full_Name>"

Sets up Git with your email:

   >> git config --global user.email "<your-email-address">

Makes sure that Git output is colored:

   >> git config --global color.ui auto

Displays the original state in a conflict:

   >> git config --global merge.conflictstyle diff3

   >> git config --list

Git & Code Editor:-

The last stop of configuration is to get Git working with your code editor. Below are three of the most popular code editors. If you use different editor.

Atom Editor Setup

  >> git config --global core.editor "atom --wait"

Sublime Text Setup

  >> git config --global core.editor "C:Program Files/ SublimeText2 /sublime_text.exe' -n -w"

VSCode Setup

  >> git config --global core.editor "code --wait"

Repository Commands:-

Create brand new repositorie(reps) on your computer.

  >> git init

Copy existing repos from somewhere else to your local computer.

  >> git clone <url>

Check the status of a repo.

  >> git status

Useful Commands

1. ls - Used to list files and directories.

2. mkdir - Used to create a new directory.

3. cd - Used to change directories.

4. rm- Used to remove files and directories.

Review Repo History

Displays information about the existing commits.

It shows the SHA, the author, the date, the commit message.

  >> git log

The git log --online show first 6 letter of SHA and the commit message.

  >> git log --oneline

Displays information about the given commit. The output of the git show command is exactly the same as the git log -p command.

  >> git show

View Files Changes

This command is used to display the files that have been changed in the commmit as well as the number of lines that have been added or deleted.

  >> git log --stat

The git log command has a flag that can be used to display the actual changes made to a file

  >> git log -p

The git show command will show only one commit.

  >>git show <sha id>

Add Commits to a repo:-

1.Add files from the workng direcotry to the staging index.

Add all files

  >> git add .

*Add specific files

  >> git add <filename>,<filename>

2.This command will not distroy the work but it just removes it from the Staging index.

  >> git rm --cached <filename>

3.Take files from the staging index and save them in the repository.

Commit files

  >> git commit

Commit the repo with message.

  >> git commit -m "Initial commit"

Displays the difference between two version of commits.

  >> git diff

Tagging, Branching and Merging

Tagging

Git allow to put tag on various commit.

Add tags to specific commits

  >> git tag -a v1.0

A Git tag can be deleted with the -d flag (for delete!)

  >> git tag -d v1.0

To show all existing tag

  >> git tag

Branching

Git branch Allow multiple lines of development

It can be use to

List all branch name in the repository

  >> git branch

Create new branch

  >> git branch <branchname>

Create new branch from existing commit>

  >> git branch <branchname> <sha-id of existing branch>

*Delete branch

  >> git branch -d <branchname>

Change Working Branch:

Checkout is used to change the branch from one to another.

  >> git checkout <branchname>

Merging

Combine the differnce of different branches.

  >> git merge  <name-of-branch-to-merge-in>

Merge Conflict

The editor has the following merge conflict indicators:

  <<<<<<< HEAD everything below this line (until the next indicator) shows you what's on the current branch.

  ||||||| merged common ancestors everything below this line (until the next indicator) shows you what the original lines were.

  ======= is the end of the original lines, everything that follows (until the next indicator) is what's on the branch that's being merged in.

  >>>>>>> heading-update is the ending indicator of what's on the branch that's being merged in (in this case, the heading-update branch)
  Resolving A Merge Conflict.
Git is using the merge conflict indicators to show you what lines caused the merge conflict on the two different branches as well as what the original line used to have. So to resolve a merge conflict, you need to:

  1. Choose which line(s) to keep.

  2. Remove all lines with indicators.

Undoing changes

Changing the most recent commit-

  >> git commit --amend

Reverse given commint given with sha-

  >> git revert <sha of commit to revert>

Erases(reset) commits

  >> git reset <reference-to-commit>

  >> git reset --soft HEAD^

Git Reset's Flags

The way that Git determines if it erases, stages previously committed changes, or unstages previously committed changes is by the flag that's used. The flags are:

--mixed take the changes made in commit and move them to the working directory

--soft the changes moved to the Staging Index

--hard The changes are complete erased

Backup Branch

  >> git branch backup

Push Date to Github Repo:-

 >>git push -u origin master