Getting Started with Angular 5
In the previous article I introduced you to one of the most popular single page application frameworks called Angular. In this article I will teach you how to start programming with it. In this series of articles on Angular we are going to use Angular 5. This is the current major version at the time I am writing this article.
Before You Begin
It is also expected that you have good knowledge in using command line on your system.
Installing NodeJS and npm
To install NodeJS and npm on Debian based systems like Ubuntu you need to run the following command:
sudo apt-get install nodejs npm
On Arch Linux, run the following command:
pacman -S nodejs npm
On RHEL, CentOS and Fedora run the following command:
sudo yum -y install nodejs npm
Installing them on windows is easier. You need to install the pre-built package. Download here.
npm install -g @angular/cli
The -g option was used to instruct npm to install Angular CLI globally. After installing this globally ng command will be available from your command line on your system.
Starting a Project
With the help of Angular CLI or the ng command we can easily create a new Angular project. It will create the package file, add all the necessary libraries, create configuration files, and set up a lot of other boring stuff for you. It will also create a very simple hello world like angular application so that you can start coding right away or test by running a server to see that everything is alright. Choose or create a directory where you want to create your Angular application. Let's call our Angular application awesome-app. The format of creating a new application with the ng is: ng new <app-name>. Let's create our awesome app with the following command:
ng new awesome-app
Now change your directory to the application directory with the following command:
Running the application
We do not need to install any type of web servers to run our application. We can fire up a development server with the help of the command line tool like below:
Point your browser to http://localhost:4200. 4200 is the default port for serving Angular application at development time. If nothing is wrong you will see a very simple Angular greeting page with some links and a logo.
If you want to have the link open automatically in the browser then you can use the optional command line argument --open like below:
ng serve --open
This will compile your application, bundle it and serve it to the browser.
Automatic Change Detection
At development time it is necessary to have change detection mechanism so that whenever some changes happen in the project the application automatically gets rebuilt and served to the browser. With ng serve you get that feature for free. You do not need to think about how to achieve the change detection feature—let Angular CLI do the heavy lifting for you.
Initial Application Files
With the help of ng new we get a bare minimum Angular application ready for you. Below are the files that were automatically created in my case:
e2e/app.e2e-spec.ts e2e/app.po.ts e2e/tsconfig.e2e.json karma.conf.js package.json protractor.conf.js README.md tsconfig.json tslint.json .angular-cli.json .editorconfig .gitignore src/assets/.gitkeep src/environments/environment.prod.ts src/environments/environment.ts src/favicon.ico src/index.html src/main.ts src/polyfills.ts src/styles.css src/test.ts src/tsconfig.app.json src/tsconfig.spec.json src/typings.d.ts src/app/app.module.ts src/app/app.component.html src/app/app.component.spec.ts src/app/app.component.ts src/app/app.component.css
For the beginners the files that we need to focus on are the followings ones:
src/app/app.module.ts src/app/app.component.html src/app/app.component.ts src/app/app.component.css
Angular has a steep learning curve compared to other frontend web frameworks. In this article we have skipped a lot of the complexity of setting up and configuration with the help of Angular CLI. Once you start to advance in your learning of Angular I will start teaching you various internals of these thing gradually.
|Previous article: Intro to Angular||Next article:Creating Your First Simple Angular Application|
About the Author
My name is Md. Sabuj Sarker. I am a Software Engineer, Trainer and Writer. I have over 10 years of experience in software development, web design and development, training, writing and some other cool stuff including few years of experience in mobile application development. I am also an open source contributor. Visit my github repository with username SabujXi or visit my personal website at www.sabuj.me.