Angular 5 Tutorial 03 – Project Structure

In the previous post, we have discussed on how to create hello world application in angular. Using Angular CLI, we have generated basic files needed to run a hello world application.

Now, let’s have a quick look at the files and folders in our new Angular project.

The generated projects have the following files and folders structure

angular_structure

We have three folders and few files in the root directory.

The 3 folders are e2e, node_modules, and src.

src – src/ folder presents in the root folder. It contains all the source code of project whereas the remaining folder contains files that helps to build, test,  maintain the application.

e2e – It contains end to end tests. These files should not present in the src folder, because it acts as the separate app that helps to test the whole application.

node_modules – This folder has been created by Node.js based on the libraries listed in packages.json. (click here to know about in details)

 

Before digging further into the above folders, let’s take a look at the remaining files available in the root folder.

.angular-cli.json – Configuration of angular CLI. It helps us to define different environments like dev, stage, etc. and also to import third-party stylesheets.

.editorconfig – Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Example: indent_size, max_line_length of the project. It allows us to maintain a common editor setting across the team.

.gitignore – Git configuration to make sure autogenerated files are not committed to source control. Example: dependencies folder – node_modules, compiled output folder – dist

karma.conf.js – Karma is a test runner which we are using in Javascript application. This file contains the configuration of karma test. The configuration mentioned in this file is used when we are testing the application using ng test command.

package.json – npm configuration to maintain the metadata of the application, third-party packages listing, and to maintain the dependencies of those packages.

protractor.conf.js – Protractor is an end to end test runner. The configuration mentioned in this file is used when we are testing the application using ng e2e command.

README.md – Basic documentation of the project, when are generating files with CLI it is prefilled with CLI commands details.

tsconfig.json – TypeScript compiler configuration for IDE.

tslint.json – Linting settings for TSLint which is a used during ng lint for linting TypeScript code.

 

So far we have discussed the folders and files available in the root directory. Let’s dig deeper into the src folder.

cool-app-src

The src folder contains sub-folders called app, assets, environments and few more files such as index.html, main.ts, etc

app/app.component – The HTML, CSS, ts, spec.ts files together form the  AppComponent. Basically, it’s an HTML template, stylesheet and unit test. It acts as the root component of the application. The remaining component will be created as the nested component of this root component.

app/app.module.ts – Modules is a mechanism to group the component, pipes, and services which are related.

assets – assets folder is the place to maintain the static contents like images, or any content that needs to copy fully as it is during the build process.

environments – This folder contains one file for each environment. The file contains environment based configuration or information.

favicon.ico – favorite icon to be displayed when we are bookmarking our page

index.html – The main HTML thats serves the application. The CLI automatically links the js and CSS files when building the application.

main.ts – The entry point of application. Compiles and bootstraps the application root module to run in the browser.

poyfills.ts – Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. Example: The latest feature will browser like chrome or firefox, but we need the fallback for the browser like Internet Explorer. Polyfills will help to fill those gaps.

styles.css – We import the global styles in this file. Mostly the local style specific to the particular component will be placed inside the same folder for easy maintenance.

test.ts – The main entry point of the unit test.

tsconfig.json – Typescript compiler configuration for the angular application

 

In the next post, we can discuss about component in more details.

Happy Coding 🙂

Angular 5 Tutorial 02 – Creating Hello World Application

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

01

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

 

CoolApp.png

 

Stay connected and Keep supporting. 🙂

Happy Coding!

 

In the next post, we can discuss about the architecture of angular application.