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.
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
If the command was not recognized by your system, you need to install Node.js.
- Visit the NodeJs download page and choose download package based on your OS.
- 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.
- 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:
The resulting output will look something like this:
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
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
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 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:
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.