In order to start building web applications we need to prepare a set of tools which will help us to do this efficiently. Starting a project using Angular requires the knowledge about at least a few technologies. I do not want to discourage you at this point. I will show you what is needed for starting your first “hello world” project. I will base on free tools available on the Internet. I assume you have at least basic knowledge about Angular platform. If not, you may start from Angular documentation website. Your first web application project will be a good starting point for learning more about web applications development.
Node.js and npm
$ node -v v6.11.0 $ npm -v 3.10.10
The next step will be installation of Angular Command Line Interface (CLI). We will use it for generating our “hello world” project. Angular CLI helps with generation of various blocks of Angular project like modules, components, directives, etc. We will be also able to run the project using this tool. We will use npm to install Angular CLI by typing in the terminal:
npm install -g @angular/cli. After installation is done, let’s check the version of Angular CLI. If installation is successful, you will see similar output in your terminal.
$ng -v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ @angular/cli: 1.2.0 node: 6.11.0 os: win32 x64
Let’s now generate “hello world” web application project. Create a directory for our project and within this directory type:
ng new my-hello-world-app. After running this command we have created a new directory called
my-hello-world-app with generated files of our project inside.
D:\angular>ng new my-hello-world-app installing ng create .editorconfig create README.md create src\app\app.component.css create src\app\app.component.html create src\app\app.component.spec.ts create src\app\app.component.ts create src\app\app.module.ts create src\assets\.gitkeep create src\environments\environment.prod.ts create src\environments\environment.ts create src\favicon.ico create src\index.html create src\main.ts create src\polyfills.ts create src\styles.css create src\test.ts create src\tsconfig.app.json create src\tsconfig.spec.json create src\typings.d.ts create .angular-cli.json create e2e\app.e2e-spec.ts create e2e\app.po.ts create e2e\tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Installing packages for tooling via npm. Installed packages for tooling via npm. Project 'my-hello-world-app' successfully created.
Visual Studio Code
Visual Studio Code is free open source code editor with a lot of extensions and IDE features. Let’s install it and open the directory with our generated project.
For better integration of the editor with Angular, install Angular Productivity Pack extension.
Now it’s the time for running our application. In the editor, go to main menu and from “View” option choose “Integrated Terminal”. You should have now terminal window opened. Now just type
npm start or
npm start -- --port <your_free_port_number> if default port 4200 is busy in your environment. Project should be compiled and our application should be available under URL of
Congratulations! You’ve just run your first Angular application. Your development environment is now set up. It is just the beginning. You may start to learn Angular by creating your own application which is the best way of learning new stuff. Just by doing it.
Tools used in this post