Project Structure of Angular Project
§ In
this Session we will discuss all the files and folders in the Angular project
§ One of the
easiest ways to create a working angular project, is by using the Angular CLI.
The following Angular CLI command creates a working Angular Project out of the
box
ng new AngularDemo
Ø ng is the Angular CLI
Ø new for creating a new application
Ø AngularDemo is the name of your angular application
§ A new folder with name AngularDemo is created.let's look the files in a project folder and how the execution flows in visual studio code we have the AngularDemo project folder there are lot of files so I am going to discuss only a few of them that are really important at this stage the first one is the package.json file.
package.json
§ This file contains the dependency and the dev dependencies which are nothing is the libraries and module that are required for angular application to work.
§ The package that it is listed here it installed when you run the command
ng new AngularDemo
§ All the packages get installed inside the node module folder.
§ we also have some of the scripts that can be executed ng serve command then this is one of them which runs are application you can also execute npm start which will internally call ng serve command.
node_modules folders
§ node_modules folder contains all the packages specified in package.json file .so whatever packages are specified in this file are installed into this folder when we run npm install command.
src folder
§ src 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.
§ In the source folder we have the main .ts file which is entry point of angular application we also have the app folder which contains the file app.module.ts which is the root module of a application and also app.component.ts which is the root component of an application when we run the command ng serve application execution comes to the main.ts file over here with bootstrap kick start the app on your in app module.in the app.module.ts file you can see that we can in-turn on again Quick start the app component .
§ This app component has two things html template and the class to control the view logic .so here app.component.ts file which contains the class that contain the logic for the data for the view.
§ In the class we have a property title is equal to a 'demo' and in HTML we have welcome to title but one time this title gets replaced by this property and then we also have some other HTML elements that get endered in the browser so we have welcome to app.
Assets
§ The assets folder contains the assets of your application like images and anything else to be copied when you build your application.
index.html
§ The main HTML page that is served when someone visits your site.
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.
§ /* You can add global styles to this file, and also import other style files */
Author Name
Author Description!
Post a Comment