AngularJS vs Angular
AngularJS is based on the model view controller, whereas Angular6 is based on the components structure
that uses a TypeScript 2.9
Angular come up with Angular CLI which eases the installation.
Go to this site https://cli.angular.io to install Angular CLI. and find the all essential command.
to check wheher node.js and Npm has installed on your machine.
use below command
node -v — will displays a version of Node js if it is installed on your system
npm -v — will displays a version of Npm if it is installed on your system
////////////
use below command to install angular CLI
npm install -g @angular/cli //command to install Angular6
////////////
To create a new angular project
open IDE Visual studio Code and press – CTRL + ~ will open a command prompt window now use below command.
ng new AngulardemoApp // name of the project
this command will create a new project with all essenial folder and files in a complete package in a single go.
each folders and files that is created automatically will discuss in details later.
////////////
to builds the application and starts the web server.
ng serve
/////////////
to see the output of project.
Type the url http://localhost:4200/ in the browser and see the output.
here port 4200 is a default port
/////////
change the port
ng serve --host 0.0.0.0 -port 4205
////////
The Angular6 app folder has the following folder structure −
1-e2e − end to end test folder. Mainly e2e is used for integration testing and helps ensure the application works fine.2-node_modules − The npm package installed is node_modules. You can open the folder and see the packages available.3-src − This folder is where we will work on the project using Angular6.
/////// file structure
1-.angular-cli.json − It basically holds the project name, version of cli, etc.
2-.editorconfig − This is the config file for the editor..gitignore − A --gitignore file should be committed into the repository, in order to share the ignore rules with any other users that clone the repository.karma.conf.js − This is used for unit testing via the protractor. All the information required for the project is provided in karma.conf.js file.package.json − The package.json file tells which libraries will be installed into node_modules when you run npm install.
//////testing
protractor.conf.js − This is the testing configuration required for the application.
tsconfig.json − This basically contains the compiler options required during compilation.tslint.json − This is the config file with rules to be considered while compiling.
//////
The src folder is the main folder, which internally has a different file structure.
app.module.ts − If you open the file, you will see that the code has reference to different libraries,
which are imported. Angular-cli has used these default libraries for the import – angular/core, platform-browser. The names itself explain the usage of the libraries.
They are imported and saved into variables such as declarations, imports, providers, and bootstrap. declarations − In declarations, the reference to the components is stored. The Appcomponent is the default component that is created whenever a new project is initiated. We will learn about creating new components in a different section. imports − This will have the modules imported as shown above. At present, BrowserModule is part of the imports which is imported from @angular/platform-browser. providers − This will have reference to the services created. The service will be discussed in a subsequent chapter. bootstrap − This has reference to the default component created, i.e., AppComponent.
AppComponent a component consist of below files
app.component.css − You can write your css structure over here. Right now, we have added the background color to the div as shown belowapp.component.html − The html code will be available in this file.app.component.spec.ts − These are automatically generated files which contain unit tests for source component.app.component.ts − The class for the component is defined over here. You can do the processing of the html structure in the .ts file. The processing will include activities such as connecting to the database, interacting with other components, routing, services, etc.
////////
Assets
You can save here project’s images, js files in this folder.
///////
Environment
This folder has the details for the production or the dev environment. The folder contains two files.
environment.prod.ts
environment.ts
//////////
favicon.ico
This is a file that is usually found in the root directory of a website.
//////////
index.html
This is the file which is displayed in the browser.
/////////
The body has . This is the selector which is used in app.component.ts file and will display the details from app.component.html file.
main.ts
platformBrowserDynamic().bootstrapModule(AppModule);
bootstrap: [AppComponent]
In app.component.ts, there is a selector: app-root which is used in the index.html file. This will display the contents present in app.component.html
///////
polyfill.ts
This is mainly used for backward compatibility.
///////
styles.css
This is the style file required for the project.
//////
test.ts
Here, the unit test cases for testing the project will be handled.
///
tsconfig.app.json
This is used during compilation, it has the config details that need to be used to run the application.
////////
tsconfig.spec.json
This helps maintain the details for testing.
////////
typings.d.ts
It is used to manage the TypeScript definition.
