[Angular] 002 Hello World Program

Subscribers:
3,080
Published on ● Video Link: https://www.youtube.com/watch?v=FsjOg5tvssA



Duration: 13:32
59 views
3


///// PREREQUISITES /////
NodeJS (https://nodejs.org/en/download/)
VS Code (https://code.visualstudio.com/download)
Angular CLI (npm i -g @angular/cli)


///// ANGULAR CLI COMMANDS /////

Creating a project:
ng new ProjectName

Running a project on Angular Live Development Server:
ng s -o
or
ng serve --open


///// ANGULAR PROJECT STRUCTURE /////

In Angular, project is called as workspace.

Workspace folders:

1. src
app
assets
environments
2. node_modules
3. e2e


Workspace files: (Reference: https://angular.io/guide/file-structure)

HTML PART:
index.html It has app-root which points to AppComponent and all the templates of all the components in workspace.

CSS PART:
style.css It has application-level styles
Also, every component has a separate style.css file for component-specific styling.

TS FILES WHICH COMPILE TO FORM THE JAVASCRIPT PART:
main.ts It is the first file to get loaded. It declares the bootstap module. Default value is AppModule.
app.module.ts
1. declarations: These are the components which we created.
2. imports: These are the pre-defined modules (not components) like HttpClientModule and AppRoutingModule
3. providers: These are the services which should be consumed by multiple components
4. bootstap: These are the components which should be loaded first. Default value is AppComponent.
app.component.ts It is the default bootstap component in AppModule and all the ts or js files in ng_modules

VARIOUS CONFIGURATIONS:
angular.json All configurations start with this file.
E.g.: style-schematics, build configurations, test configurations

package.json It tells the allowed set of version of each of the node-modules installed.
package-lock.json It tells the exact version of each of the node-modules installed.

environment.ts production = false;
environment.prod.ts production = true;

polyfills.ts Cross-browser compatibility

tsconfig.json "target": "es5", "baseUrl": "./", "sourceMap": true
tslint.json Mentions the Typescript styling specifications which should be enforced by TS compiler.
editor.config charset = utf-8, indent_size = 2, trim_trailing_whitespace = true

.gitignore Mentions which files should the GIT ignore.

DOCUMENTATION:
README.md Describes your project and how to use it.
E.g.: How to run tests, serve it on development server, what is the url to the development server, etc.

================== CONTACT ME =================

Mobile: +91 9158851250
Address: F-102 Sanskriti Society, Kaspate Wasti, Wakad, Pune 411057

================ LEGAL DISCLAIMER ==============

This video is an intellectual property of Mr. Amit Shirasao. Views expressed on this video are his personal views. Any of his previous/current/future employers or organizations that he may be affiliated with do not, in any way, take any responsibility for the same.

Aspire as a brand and channel along with all the videos posted under it are an intellectual property of Mr. Amit Shirasao. Aspire - Crisp Tutorials brand and channel is a subsidiary of Aspire brand and channel. So, by definition, every video posted under Aspire - Crisp Tutorials is also an intellectual property of Mr. Amit Shirasao.

Views expressed in any video under Aspire are strictly the personal views of the creator of the video. Creator of the video is the person whose name is mentioned in the video's thumbnail and on the very first screen which comes just after the intro. Please note that Mr. Amit Shirasao is not necessarily the creator of every video on Aspire and hence does not take responsibility of the views expressed in the videos which he did not create.

Please note that besides owning and running Aspire, Mr. Amit Shirasao may also be employed by some other company. Any past, present or future employers of Mr. Amit Shirasao does not in any way take any responsibility for this channel or the views expressed on it.







Tags:
Angular
Hello World