Table of Contents
Angular is a front-end framework which is utilized to make web applications. It involves typescript of course for making rationales and techniques for a class however the program doesn’t know typescript. Here webpack comes in picture, webpack is utilized to aggregate these typescript documents to JavaScript. Also, there are so many setup documents you should run an angular task on your PC.
Angular CLI is a tool, that does everything for you in a few basic commands. Angular CLI utilizes webpack behind to do this cycle.
Note: Kindly ensure you have installed hub and npm in your system. You can actually take a look at your hub rendition and npm form by utilizing the accompanying command:
node --version npm --version
The Steps to Create your first application using angular CLI:
- Step-1: Install angular cli
npm install - g @angular/cli
-
Step-2: Create new project by this command
-
Choose yes for routing option and, CSS or SCSS.
ng new myNewApp
- Step-3: Go to your project directory
cd myNewApp
-
Step-4: Run server and see your application in action
ng serve -o --poll=2000
Introduction to directory structure:
- e2e It consists the code that are related to automated testing purpose. For instance, if on a specific page you are calling a REST API then what should be the return status code, either it is acceptable or not etc.
- node_modules It saves all the dev conditions (utilize it just at advancement time) and conditions (utilized for improvement as well on a case by case basis underway time), any new reliance when added to project it is consequently saved to this envelope.
- src This index contains all of our business related to project for example making parts, making administrations, adding CSS to the separate page, and so forth.
- package.json This record stores the data about the libraries added and utilized in the undertaking with their predefined rendition installed. Whenever another library is added to the venture it’s name and adaptation is added to the conditions in package.json.
Other files: As a beginner you don’t require these files right now, don’t make a fuss over that. These all are utilized for proofreader setups and data required at accumulate time. The builtin webpack in angular CLI deals with for you.
Inside src folder:
- index.html This is the section point for the application, application root tag is the passage point of the application on this single page application, on this page angular will add or eliminate the substance from the DOM or will add new happy to the DOM. Base href=”/” is significant for the purpose of directing.
- html
<!DOCTYPE HTML><htmllang="en"><head><metacharset="utf-8"><title>MyNewApp</title><basehref="/"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="icon"type="image/x-icon"href="favison.ico"></head><body><app-root></app-root></body></html> - style.scss This file is the worldwide stylesheet you can add that CSS classes or selectors which are normal to a large number, for instance, you can import custom textual styles, import bootstrap.css, and so on.
resources It contains the js pictures, text styles, symbols and numerous different files for your project.
Inside app folder:
- app.module.ts An angular project is composite of such countless different modules to make an application you need to make a root module for your application in the pecking order. This app.module.ts document is that. If you have any desire to add more modules at the root level, you can add.
- declarations It is the reference of the cluster to store its parts. The application part is the default part that is generated when a project is made. You need to add all your part’s reference to this exhibit to make them accessible in the project.
- imports To add any module whether angular or you need to add it to imports cluster to make them accessible in the entire project.
- providers In the event that you will make any help for your application, you will infuse it into your project through this supplier exhibit. Administration infused to a module is accessible to it and it’s child module in the project pecking order.
- bootstrap This has reference to the default component created, i.e., AppComponent
- app.component.html Alter this record to make changes to the page. You can alter this record as a HTML document. Work straightforwardly with div or some other label utilized inside body labels, these are parts and do not add html head body tags.
- html
<h1>Hello world</h1><div><p>This is my First Angular app.</p></div> - app.component.spec.ts These are automatically generated files that are consist of unit tests for source component.
- app.component.ts You can do the processing of the HTML structure in the .ts file. The processing will include activities such as interacting with other components, connecting to the database, routing, services, etc.
- app.component.scss Here you can add CSS for your component. You can write scss which further compiled to CSS by a transpiler.
More commands that you will need while working on the project:
ng generate component component_name ng generate service service_name ng generate directive directive_name
