Creating an Angular App

This story is strictly for complete beginners who are getting started with Angular Ecosystem and also for dev’s who facing issues while setting Angular development environment locally. Throughout this story, I will go through the steps involved in setting up Angular development environment locally.

To get start with Angular setup, We need to install the following in our system.

1. Node
2. NPM
3. Angular CLI
4. Any IDE(Integrated Development Environment) you like. I will prefer Visual Studio Code.

Setting up Node in our local system.

Node is a Javascript run time environment which Angular uses to build the application that was developed using Angular and also to run that application.

To install Node, head over to the official Nodejs website by clicking here.

Node.js

You can download the stable or long time support version or the latest version.

Download the installer an try running the installer and continue the installation steps. You can configure the installation directory or can install using the default configurations by clicking on next.

After installation we can verify for the successful installation by checking the node version. We can check the node version installed locally, by running this command in the Command Line Interface(CLI).

// To check for the node version installed locally
node --version

NPM is a Node Package Manager, that is used for managing packages or dependencies that we will be using in our node based projects. NPM will also be installed, along with node. Try checking the NPM version installed locally, by running this command in the Command Line Interface(CLI).

// To check for the npm version installed locally
npm --version

Installing Angular CLI

For building an Angular application, we need to install a lot of dependencies. For making all this hectic work done for us and also to manage the versions of dependencies that are installed in our project, we have Angular CLI. Angular team supports Angular CLI.

Using Angular CLI we can create a new Angular project, can create an Angular component/directive/service/model/class etc. We will go through deep about what is a component? or what is a directive? etc in coming stories.

To install Angular CLI in our system, try running this command in the Command Line Interface(CLI).

// To install Angular CLI globally
npm install @angular/cli@latest -g

The -g flag indicates that the installation is done globally through out our system.

You can check the Angular CLI version, by running the following command in the Command Line Interface(CLI).

// To check for angular cli version
ng --version

IDE

IDE is your choice, and I will prefer Visual Studio Code. It is free version and there are lot of available plugins which helps us in development and also in debugging. You can install and use your IDE, if you have any preference.

Visual Studio Code - Code Editing. Redefined

Tada…!! The installation process is done. Now we will start creating our first basic Angular Application.

// To create an Angular Application
ng new ApplicationName

Here ApplicationName indicates the name that you want your application to have. For example I have created an application with name CreateAngularApp by executing the above ng command as follows

ng new CreateAngularApp

It will take few minutes to install the dependencies, that are required to build a basic Angular app. After successful creation of an new Angular app, you can see a folder with Application Name you have given while creating an Angular app in your Current Working Directory.

Angular CLI also installed an HTTP Server in our project directory for us to start spinning server to view/access our application locally, via localhost. Angular also installs change detection, so that we can view our changes that are made to our application in live. Don’t worry, you don’t need to configure them. Angular configures all of them for us with default settings.

To spin a local server, run the following commands in the Command Line Interface(CLI).

// To change our working directory to project directory
cd CreateAngularApp
// To spin a server locally
ng serve

The Angular CLI, then builds all our files in the application into bundles(minimized versions of all our files in the app) and then starts spinning the server locally.

By default, the application is being served at http://localhost:4200/. Angular uses port number 4200 by default. If that port is occupied by any another application, you can configure port number by using -p or -port flag.

ng server -port=4300

Our app being served in localhost

Let’s get more detailed knowledge about all the files that were created by Angular CLI while creating our application. Open our application folder in any IDE you like. The project directory will look something similar to this.

Project directory looks some like this

Let’s know about more about all these files and other directories which are present in our project directory.

1. e2e : This folder will contain all files which are used to perform End to End testing to our application.
2. node_modules : These are installed dependencies in our project.
3. src : This is the folder where all our application source code lies.
4. .editorconfig : This is a configuration file related to our IDE.
5. .gitignore : This is a configuration file, which ignores the files/folders that are listed in it while pushing our project to GIT (Version Management Tool).
6. angular.json : This is a configuration file related to Angular CLI.
7. browserlist : A configuration file related to browser, where we can define on which browsers which are compatible with our app.
8. karma.config.js : A configuration file related to Unit Testing our application.
9. package.json/package-lock.json : Configuration files related to NPM. These are used to record and lock the dependencies version’s.
10. tslint.json : Configuration file related to typescript linter.
11. tsconfig.app.json/tsconfig.json : Configuration file related to Typescript.

Entry point of our app:

The Angular CLI from its configuration file angular.json sees for the entry point for our application. By default, if an app is created using Angular CLI it is main.ts file. Open angular.json file, you can see that main.ts file is defined with the main attribute in the project configurations.The main.ts is the entry point of our app.

angular.json file

The main.ts file bootstraps the AppModule.ts file. In simple terms it will trigger AppModule.ts file. We will go through the modules in coming stories. Right now, think of Module as a collection of components.

main.ts file

From there, AppModule.ts bootstraps or triggers any component that are declared under that module. That component will be rendered in the browser. Remember component is a combination of *.css, *.html and .*.ts files. In our case, AppComponent will be triggered from the AppModule.

AppModule.ts file

Editing our first app:

In general, angular app has atleast one Module and every Module has atleast one Component. In our app which was generated using Angular CLI, the angular cli generates one module which was AppModule and one component which was AppComponent.

In every component, for example AppComponent

app.component.ts : holds all typescript logic

app.component.html : holds all template part (HTML) of our component.

app.component.css : holds all CSS styles, for the template

Now head over to app.component.hml and remove all the code that was generated by Angular CLI. Now add any basic HTML code and save that file. In my case, I have added the following code to the app.component.html.

<p>
    This is a Demo project.
</p>

What are you waiting for, head over to the browser to view the changes. Angular runs change detection in background, so the changes are automatically detected and updated in the DOM.

Tada..!! Now you have gained good foundation on setting up Angular development environment and also basics required to kick start developing applications in Angular.

𝚃𝚑𝚊𝚗𝚔𝚜 𝚏𝚘𝚛 𝚛𝚎𝚊𝚍𝚒𝚗𝚐..!!

𝙷𝚘𝚙𝚎 𝚢𝚘𝚞 𝚕𝚒𝚔𝚎𝚍 𝚖𝚢 𝚊𝚛𝚝𝚒𝚌𝚕𝚎. 𝙳𝚘 𝚜𝚑𝚊𝚛𝚎 𝚝𝚑𝚎 𝚊𝚛𝚝𝚒𝚌𝚕𝚎 𝚒𝚏 𝚢𝚘𝚞 𝚏𝚒𝚗𝚍 𝚒𝚝 𝚠𝚒𝚕𝚕 𝚋𝚎 𝚞𝚜𝚎𝚏𝚞𝚕 𝚝𝚘 𝚢𝚘𝚞𝚛 𝚙𝚎𝚎𝚛𝚜.

𝙻𝚎𝚝 𝚖𝚎 𝚔𝚗𝚘𝚠 𝚒𝚏 𝚢𝚘𝚞 𝚑𝚊𝚟𝚎 𝚊𝚗𝚢𝚝𝚑𝚒𝚗𝚐 𝚝𝚘 𝚊𝚜𝚔 𝚒𝚗 𝚌𝚘𝚖𝚖𝚎𝚗𝚝𝚜 𝚜𝚎c𝚝𝚒𝚘𝚗 :)

𝚁𝚎𝚊𝚌𝚑 𝚖𝚎 𝚘𝚞𝚝 𝚑𝚎𝚛e