Go to https://angular.io/guide/quickstart and follow the three step procedure:
- Install Angular/cli. It is globally installed with the command:
npm install -g @Angular/cli
- Create a new project and name it phonebook-app with the following command:
ng new phonebook-app
- Go to the phonebook-app directory by cd phonebook-app. Finally, serve the application with ng serve --open. The ng serve command is used to watch for changes while developing, transpiling, and rebuilding the app. --open is an optional command-line argument used to open the app in a browser tab. Here, in case you receive an error, make sure you reinstall npm packages by the npm install command.
The Google definition of transpile is the process of converting source code in one language to another language, which has a similar level of abstraction. Simply, this means we will write code in TypeScript, which is to be converted to JavaScript (as it works in a browser).
Explaining each file in the project is out of the context of this book, however, we will mainly focus on Angular basic building blocks to get it started. Our main concern is the src/app directory for now. Before we create the components, let's add Twitter's bootstrap link for the basic styling of our app. In our src directory, we have index.html. Insert the following HTML code in the header tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">