Many tutorials on the Internet are out of date, commands are not applicable in angular4, etc., so the following article mainly introduces you to the relevant information about the installation and usage tutorial of Angular CLI for Angular4 learning. Friends in need can refer to it
Introduction
Regarding the "Angular" version, "Angular" has officially been named Angular 1.x as Angular JS, Angular 2.x and The above are collectively referred to as "Angular".
"CLI" is the abbreviation of "Command Line Interface". It is a command line interface that realizes automated development processes.
For example: ionic-cli, vue-cli, etc.; it can create projects, add files (components, services, etc.) and perform a lot of development tasks, such as testing, packaging and publishing
Let me give you a detailed introduction to the installation and use tutorial of Angular4 Angular CLI. Friends in need can refer to it. I won’t say much below, let’s take a look at the detailed introduction.
Install Angular CLI
1. You need to install nodejs and npm
The address of Node official website: https://nodejs .org/en (For detailed installation methods, you can refer to this article: //www.jb51.net/article/90518.htm)
2. Install typescript globally. Angular recommends using typescript to write (.ts document).
Typescript official website address: http://www.typescriptlang.org/index.html
Use command: npm install -g typescript
3 . Install angular-cli
Angular-cli official website address: https://cli.angular.io/
Use command: npm install -g @angular/cli
Illustration
Note: Because it is a bit early to install angular-cli , but it doesn’t matter if it’s not my version when you install it.
New Angular project
Use the command new
// ngStudy 是工程名称可以随意修改的 ng new ngStudy
Project icon
Note: You need to wait a long time, because this requires downloading node_modules, which is more than 140 MB
Generated project structure:
Run the Angular project
Use the command serve
//需要进入工程的目录中 ng serve
Run the icon
Interface access
Write at the end
1. During the installation process, because many dependent packages are from abroad, you may not be able to download them
1.1 You can try to modify the npm image and change it to Taobao's
1.2 Through "Blue Light" Agent to download
2. Regarding the directory structure of the project, you can refer to the instructions on the official Chinese website: https://angular.cn/guide/quickstart
3. The command line usage address: https://github.com/angular/angular-cli/wiki Paste pictures of commonly used commands provided by the official
4. Introduce how to update the version of angular-cli
You can directly use npm install -g @angular/cli
to update
The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.
Related articles:
VUE personal summary (problems encountered)
JavaScript recursive traversal and non-recursive traversal
How to use the Upload upload component of element-ui in vue
How to implement calls between methods in vue
How vux implements the pull-up refresh function
The above is the detailed content of Tutorial on the installation and use of CLI in Angular4. For more information, please follow other related articles on the PHP Chinese website!