Angular Command Line Interface aka Angular CLI
Angular CLI is used to generate code/files for various things used in Angular like Components, Services etc. We would be discussing these topics in more detail in upcoming posts.
If you have followed my previous post, then you would have already installed Angular CLI, if not then please go to the post and follow the steps there.
Now let’s use Angular CLI to generate our new project. In order to understand Angular we would be creating one sample application which would be similar to IMDB(Internet Movie Database). For those who don’t know what IMDB is, it’s a site where you can find information regarding various movies, seasons, actors and also watch trailers.
Let’s name our application as MDB(Movie Database).
Now, go to the command prompt and create a folder named as MDB and go to that folder in the command prompt. I would be using command prompt or terminal interchangeably so for Mac/Linux users it means Terminal and for Windows users it means Command Prompt.
Run the following command to create a project.
ng new --directory .
ng is the command used which is angular cli, new means new project and directory parameter lets you choose which directory you would choose for files. ‘.’ means current directory.
It would ask for few inputs below, choose the following for now.
? What name would you like to use for the new workspace and initial project? MDB
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Sass
For last option you can choose Sass, Css, Less or Stylus.
Once the command is completed, it would generate few files like below.
Now, lets examine few of the folders which are generated by Angular CLI.
The folder e2e & e2e/src contains all the base setup files for running end to end tests. We would explore e2e tests later near the end of the series. End to end tests are run using protractor which are basically integration tests.
node_modules is created by npm which contains all the packages which we need in our project.
src & src/app are the main folder in which we would be writing our code.
src/assets is the folder which contains various assets, which you would need minimal in the initial stages of this series.
src/environments is the folder which contains various environments settings.
Now, run the following command to install all the dependencies needed by angular project.
It would take few seconds. This command would only work if you are running it under the folder MDB.
Now run the following command to run the application which is generated by Angular CLI.
ng serve -o
The above command would also take some time to compile the application and would open the browser and it would look something like below.
Congratulations! You have successfully setup the Angular application.