Table of contents
1. Necessary knowledge points before school
3. Verify whether the configuration is successful
4. Angular related development environment
1. Install the Angular CLI scaffolding tool globally
5. Create and submit to remote warehouse
Preface
Recently I am learning to build an Angular project. Here I record the process of building the project and some related operations.
Reference articles: Getting started with Angular, setting up a development environment, using Angular CLI to create your first Angular project
1. Necessary knowledge points before school
1.TypeScript
TypeScript learning document TypeScript Chinese website-TypeScript--a superset of JavaScript
2.Angular
Angular Learning DocumentAngular Document Introduction
3.Angular CLI
Angular CLI Command Reference ManualAngular CLI Overview and Command Reference Manual
2. Necessary software
1.Node
Node.js (carrying NPM package management tool), you need to install Node.js before building the Angular project
Download the installation package address: https://nodejs.org/en
Installation and environment configuration tutorial: nodejs installation and environment configuration
After the installation is complete, check the node version
node --version
node -v Obtaining the version number means the installation is successful.
After successful installation, you need to configure environment variables. Configure environment variables according to the tutorial linked above.
If there are multiple projects locally and the node version of each project is inconsistent, you can use nvm to manage the node version.
Windows version download and installation tutorial: nvm-windows download and installation_Xiaoyuan's blog-CSDN blog
3. Mirror source
After Node.js is installed, NPM can be used (NPM is a package management tool installed with NodeJS). The default installation source of NPM is abroad, which is generally slow or the installation fails due to network reasons. Therefore, you need to set the installation source of NPM to a domestic mirror source. You can use Taobao mirror (npm.taobao.org/).
1. Temporary switch use
npm --registry https://registry.npm.taobao.org install express 2. Durable use (recommended)
npm config set registry https://registry.npm.taobao.org # 恢复到默认状态
npm config delete registry3. Verify whether the configuration is successful
npm config get registry
或者
npm info express 4. Angular related development environment
1. Install the Angular CLI scaffolding tool globally
Installation command (only needs to be installed once)
npm install -g @angular/cli
或者
cnpm install -g @angular/cli --推荐使用速度较快Before installation, it is best to switch the NPM installation source to the Taobao image. Using the default installation source may cause errors due to network reasons.
Verify whether the Angular environment is installed successfully
ng version
2.Angular project creation
ng new yourProjectName(项目名称)
3. Run the project locally
- Run the project directly through the scaffolding command
ng serve --open
# ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用
# --open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/- Use the npm run command to execute the script command of package.json to run the project. The script command running locally defaults to start and can be modified by yourself.
npm run start
- Run the project by specifying the port number
The default port number of the project is 4200. You can specify the port number to avoid the port number being occupied.
Method 1: Specify the port number when running the project using the scaffolding command
ng serve --port 9285Method 2: Specify the port number in the package.json script and run npm run dev.
Angular runs the project locally successfully~
5. Create and submit to remote warehouse
Projects created using scaffolding automatically create a local warehouse and commit related files. Therefore, there is no need to initialize the local warehouse. You only need to create a remote warehouse and submit it.
- Create a repository in gitee
- Submit to the remote warehouse and execute the following command
# 添加远程仓库地址
git remote add origin https://gitee.com/username/xxx.git
# 代码提交到远程仓库
git push -u origin masterFor specific operations, you can view git to create a remote warehouse and submit local code to the remote warehouse_Xiaoxiangcai’s Blog-CSDN Blog
Summarize
This article only briefly introduces the process of building an Angular project through the scaffolding Angular CLI. More relevant content will be recorded after using it in the future.