1. You just need a github repository to host on github and make sure that you pushed the latest code.
2. Install github pages tool for angular by using,  npm install -g angular-cli-ghpages  .
3. Here deploying code in github pages is quite easy, Just need to make sure one thing, when you build your code, use--base-href tag. Build command here will be  ng build --prod --base-href https://<username>.github.io/<reponame>/ . 
4. Run   angular-cli-ghpages -d dist/<project-name>/ --no-silent  to deploy your project. -d tag take the location for build stored, in dist file.
5. This command will create a new branch gh-pages in your repository and automatically push the dist build in that branch.
6. Just navigate to   https://<username>.github.io/<reponame>/  

 

Lifecycle Hooks

Structural Directive

Data Binding

Styling

Routing

Class Field Decorators

Pipes

 

Src Folder

As the name implies, this folder contains all our angular project source code. Components, templates, pipes, services, images, styles etc that our angular application needs are present in this folder

The rest of the files and folders that are present outside this folder, are there to support building our angular application Src folder

assets

As the name implies, the assets folder contains the assets of your application like images and anything else to be copied when you build your application

environments

This folder contains the environment files. By default we have 2 environment files. environment.ts is for for development environment. Notice production property in this file is set to false.

environment.prod.ts is for production. Here in this file production property is set to true as expected.

The build system defaults to the dev environment which uses 'environment.ts', but if we do a production build environment.prod.ts will be used. The file and environment mapping is in Angular CLI configuration file (.angular-cli.json)

favicon.ico

This is the favorite icon for your application which is typically displayed in the browser address bar and next to the page name in a list of bookmarks. Angular CLI provides this favorite icon out of the box. You may replace this favicon with your own company favicon

index.html

The main visits your site is served when someone main.ts

main.ts

The main entry point for the application. This file contains the code to bootstrap the application root module (AppModule)

polyfills.ts

This Is the polyfills file. Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because not all browsers support all features of modern browsers. This can be compensated by using polyfill scripts as they implement the missing features in JavaScript.

So these polyfills allow us to use an API regardless of whether it is supported by a browser or not

styles.css

This file contains the global styles of our application. Styles that are local and specific to a component are often defined with in the component itself for easier maintenance

test.ts

tsconfig.app.json

TypeScript compiler configuration for the Angular app

tsconfig.spec.json

TypeScript compiler configuration for the unit tests

app.component

The root component (AppComponent) TypeScript, HTML template, StyleSheet and Spec files

app.module.ts

This is the root application module (AppModule)

Project Folder Structure

Package.json

This File contains the various packages to build and run our application. It contains two sets of packages, dependencies and devDependencies.

The dependencies are required for running the application.

The devDependencies are only required to develop the application.

These packages are installed into the nodemodules folder by the npm(Node Package Manager).

When npm install command is executed, we can also add our custom scripts here.

node modules

The Packages specified in the package.json file are installed into this folder when we run npm install command.

e2e folder

Contains end-to-end tests and their configuration files.

angular-cli.json

This is the Angular CLI configuration file.

.editorconfig

Configuration file for Visual Studio Code. The settings in this file let you set certain code style guidelines.

For example what indent style do you want -spaces or tabs and what should be the indent size etc. You can share this editorconfig file with other developers to maintain consistent coding styles.

.gitignore

This file is used to determine files and folders you don't want to check in to source control.

For example one of the folders we do not want to check in to source control is /dist folder which is auto generated when we build the application. So this folder is listed in this file. So, all the files and folders listed in this file are ignored, when a change set is checked in to source control..

karma.conf.js

Karma is the unit test runner for angular applications. As the name implies, karma.conf.js is the configuration file for Karma.

protractor.conf.js

Protractor is an end-to-end test framework for Angular applications. As the name implies, protractor.conf.js is the configuration file for Protractor.

README.md

This is a README file which contains the commonly used Angular CLI commands out of the box.

You may enhance it with your own project documentation so that anyone checking out the repo knows the commands to use to build, run and test your app.

tsconfig.json

This is the TypeScript compiler configuration file. This file has several TypeScript compiler configuration settings.

For example, to compile TypeScript to JavaScript on saving a TypeScript file set compileOnSave setting to true. If you do not want .map files to be generated, set sourceMap to false..map files are used for debugging your application.

tslint.json

Angular has a linting tool that checks our TypeScript code for programmatic and stylistic errors as well as non-adherence to coding standards and conventions.

tslint.json is the configuration file for linting.

 

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps

What is AngularJs

AngularJS was created by Misko Heavery. He had built a framework to handle the downfalls of HTML and also taking ideas and best practices of the libraries which were never done earlier.

This first version of the framework known as AngularJS was launched in the year 2009. It laid the foundation of the present-day front-end application development

Angular JS was one of the best single-page application development solution. Gradually, it wide adoption and become very popular.

Most Popular Angular Website

Features of AngularJs

A JavaScript MVW Framework

Extends HTML support by adding tags, attributes, and expressions

Allows easy event Handling

No need to learn another scripting language. It's just pure JavaScript and HTML

Supports for Data Binding

Built-In Template Engine and Routing

Form Validations and Animations

Dependencies Injection

Angular2

After, releasing Angular JS, Angular team released Angular 2 which is complete rewrite of its original Angular 1 or AngularJS. Angular 2 version is built around the concept of the component.

It was rewritten from scratch by the Angular team using Typescript. It offers better performance to web developers. There are many new features along with other improvements and tweaks.

Features of Angular2

Modern, faster, and highly scalable framework

Equally useful framework for web, mobile, and desktop apps

Web components based architecture

Supports Hierarchical Dependency Injection

Angular3

Angular 2 has been a single repository. Each package downloadable with the @angular/package-name convention. For example @angular/HTTP, @angular/router

All package names were assigned version 2, but router package by mistaken was given version 3. Therefore, the development team skipped Angular Version 3 and directly named it version 4 to maintain compatibility with Angular Router's version.

Angular4

Angular 4 is unlike Angular 2 (which is completed rewritten version of Angular 1). There are in fact only few minor changes and new features added in it. Angular 4 supports TypeScript, which compiles to JavaScript and displays the same in the browser.

Features of Angular4

Reduce the size of the generated bundled code up to 60%

Animation moved out to a separated package @angular/animations

Supports for if/else statement

Supports for email validator

Angular5

Angular 5 doesn't bring any significant change from Angular 4. However, lots of new features and many new improvements are done in this version.

Features of Angular5

Make AOT the defaul

Easier to build progressive web apps

Type checking in templates

Support for Internationalized Number, Date, and Currency Pipes

An update to Httpclient

Zone speed improvements

New Router Lifecycle Events

Angular6

This is a major release which is focused on making the toolchain easier to move quickly with Angular in the future, and less on the underlying framework.

ng update package is a new CLI command that is introduced with Angular 6. It analyses package.json and recommends updates to your application by utilizing its knowledge of Angular.

Another CLI command that has been introduced is ng add package which makes adding new capabilities to your project easy. It utilizes the package manager to download new dependencies. It can also invoke an installation script which can update your project with the configuration changes and add additional dependencies.

Angular 6 supports version 6 of RxJS. RxJS v6 and has several major changes. It offers a backward compatibility package rxjs-compat which ensures that your applications keep working.

Angular7

Updates regarding Application Performance

This is a major release which is focused on making the toolchain easier to move quickly with Angular in the future, and less on the underlying framework.

Angular Material & CDK

Virtual Scrolling

Improved Accessibility of Selects

Supports Content Projection using web standard for custom elements

Dependency updates regarding TypeScript 3.1, RxJS 6.3, Node 10"