Create Your First Angular 4 Application

Angular Tutorial

Welcome!! Fellow Angular 4 aspirant, I have written this tutorial in hope of helping audacious people like yourselves who want to create their first angular 4  application with Windows OS on their own. So without wasting further time, let’s begin with this article.

Basic Dependencies

Before we can begin, we need to ensure you have a few dependencies installed. Which are necessary for this tutorial

  • Node.js with NPM (Node Package Manager)
  • Angular-CLI (Command Line Interface)

To check whether or not you have Node.js installed, visit your  command line and type: node -v

Angular 4 Tutorial : check node version through command prompt

 

If the command was not recognized by your system, you need to install Node.js.

  1. Visit the NodeJs download page and choose download package based on your OS.
  2. Accept the terms and agreement condition, choose an installation folder, and hit Next on the Custom Setup page. By default, it will install the npm package manager which we will need.
  3. Now again open your command line and type node –v . It will show you the currently installed node.js version

Next, we are going to install the Angular-CLI.

At the console, type:

npm install -g @angular/cli

Once finished, type:

>ng –v

The resulting output will look something like this:

Angular 4 Tutorial:Output After Angular-cli successfully installed in your system
Output After Angular-cli successfully installed in your system

When we run ng -v while inside an Angular project folder, it will also provide us with which version of Angular that particular project is using.

Why Angular CLI ?

The CLI helps us by automating away many of the cumbersome tasks by managing configuration along with providing best practices that have been discovered by the community over the time, and by helping you to build more maintainable code, the CLI exposes some of the most powerful capabilities of Angular in a way that is easier to get started, and easier to get moving quickly when compared to rolling everything together yourself.

Now you are all set to create your own project using Angular CLI. The command that we use to access the Angular CLI is ng. To create a new app type the following:

ng new my-app

Angular 4 tutorials: ng new project-name
ng new [project-name]

This will create a new Angular 4 project from scratch and set it up so that you can use SASS as CSS preprocessor. If you go inside the my-app folder that should have just been created you’ll find a folder structure that will look more or less like this:

- src
|
|-- app                 # your app source code
|-- assets              # static files like images,videos etc
|-- index.html          # entry point to your app
|-- styles.scss         # the global styles for your app
|-- environments        # here you can define different environment configuration (prod, dev, etc)
|-- node_modules        # the source code of your app's dependencies
|-- package.json        # the manifest of your app that states all dependencies
|-- tsconfig.json       # TypeScript compiler configuration
|-- tslint.json         # TypeScript linting configuration
|-- e2e                 # a folder with end to end tests
|--karma.conf.js        # karma test runner configuration
|--protractor.conf.js   # protractor e2e tests configuration
|--.gitignore
|--README.md

Type the following command in your command prompt:

c:\my-app> ng serve –open

Angular 4 Tutorial : Run your angular app

 

This will start the development server, open up a default browser and load your app.

Congratulation you have successfully setup your first angular 4 application!

 

Know you Angular 4 project in detail

What is SASS?

Sass is an extension of CSS that adds power and elegance to the basic CSS on its own, As CSS stylesheets are getting larger, more complex, and harder to maintain in these days. This is where a preprocessor like SASS can help. Sass provides us with features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again and efficient to use.

What is Index.html?

The index.html is the entry point to our application:

  • It links to styles and javascript files
  • It provides the HTML markup for our application with custom <app-root> tag. This is root node of our Angular Application.

If you open your project index.html file. You’ll see the code like in below image:

Angular Tutorial: Index.html
index.html

You might have noticed that styles and javascript files are missing. All we can see is a custom element app-root tag. The reason for that is the Angular CLI relies on Webpack to inject these files when they are needed.

What is Webpack?

Webpack is a module bundler that takes all these files and modules, processes them and makes them available so that they can be run in any browser. Moreover, it can optimize your application by taking advantage of a rich community of plugins.

Take a look at the awesome Webpack docs if you want to learn more about it.

For More read our Next Articles