Environment construction
1. Install node.js
Open the nodejs official website , it will select the corresponding version (.msi file) according to the system information, and click the Download button.
The node.js plugin is a .msi tool under the windows system. As long as you keep going to the next step, the software will automatically write it into the environment variable, so that you can directly use the node or npm command in the cmd command window.
2. Then install the Taobao mirror (cnpm)
installation steps
Enter the following command: npm install cnpm -g –registry= https://registry.npm.taobao.org ;
after installation, enter: cnpm -v to check whether the installation is complete. As long as no error is reported, the installation is complete.
After the installation is complete, reopen the cmd window.
What is the use of cnpm?
cnpm is used to replace npm. The function of npm is to share code. If you want to know more, please click What does npm do?
3. Install typescript and typings
installation steps Enter directly
in the command prompt: cnpm install [email protected] typings -g
After running, enter: tsc -v The version number appears indicating that the installation is complete.
what is typescript?
ypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript and essentially adds optional static typing and class-based object-oriented programming to the language. TypeScript extends JavaScript's syntax, so any existing JavaScript program can work in TypeScript unchanged. TypeScript is designed for large application development, and when compiled it produces JavaScript to ensure compatibility.
What is typing?
typings can prompt TypeScript to recognize, compile, and intelligently prompt the features and syntax of JS libraries that TypeScript cannot recognize; for example, vscode does not support jquery, we can help vscode identify jquery by installing the typings package.
Why install typescript?
angular-cli is written in typescript, so you need to install typescript and typings
4.
Installation steps for installing @angular/cli Install @angular/cli
with cnpm, and enter directly in the command prompt: cnpm install @angular/[email protected] –g
After running, enter: ng version; an interface appears, indicating Installed.
What is angular/cli?
CLI is short for Command Line Interface, a command line interface that automates development processes, such as: ionic cli, vue cli, etc.; it can create projects, add files, and perform a lot of development tasks, such as testing, packaging, and publishing . So angular/cli is a kind of scaffolding that can quickly and easily build angular programs.
5. Install webstorm,
download it directly from the official website, and then install it step by step. (You can also use other editing tools) All the tools are installed. Or install the lightweight code editor vscode.
Create project
1. Create a project
Enter ng new angulartest on the command line; angulartest is the project name. The project path created by default here is under Administrator. If you want to specify the path, first switch to the corresponding directory, and then execute the execution command.
After completion, you can find the project you created in the corresponding directory. Do not change the location or rename the directory structure here easily, otherwise it is very likely that many commands cannot be executed.
2. Install all the nodejs packages that the project depends on
. Enter: cd angulartest to locate the project in the command prompt,
and then enter: cnpm install in the command prompt;
after the operation is successful, you can use webstorm to open the newly created project.