Angular环境搭建

时间:2023-03-09 15:53:50
Angular环境搭建

Angular4 随笔(一)----环境搭建

1.下载node.js

  第一步:在浏览器中搜索node.js官网(https://nodejs.org/zh-cn/),根据自己系统下载相应版本,下载完成以后,下一步-->下一步--> ....安装完毕;

    第二步:打开命令行工具,输入node -v 检查版本号,如下图时,说明node已经安装成功

Angular环境搭建

    注释:v8.11.3代表当前node.js版本号:v8.11.3

  2.安装 angular-cli 命令工具

    第一步:在命令行工具 输入 npm install -g @angular/cli

    第二步:在命令行工具输入 ng -v 检查 angular-cli 命令工具是否安装成功,如下图:说明已经安装成功

Angular环境搭建

3.使用angular-cli

  第一步:创建angular项目

      在命令行工具输入 ng new demo01 (ng new 项目名称),如下图:

        Angular环境搭建

      注释:如果在下载依赖时出现错误,可以在下载目录上找到demo01 ,删除node_modules 文件夹,在命令行工具上 输入:

        cd demo01   (--进入angular 项目demo01下)

        npm install   (或 cnpm install -- 重新安装angular 依赖包)

  第二步:运行angular项目

      在命令行工具输入如下指令

        cd demo01 (进入angular项目)

      ng serve    (编译angualr 项目)

       打开浏览器,输入 localhost:4200,如下图:

        Angular环境搭建

  第三步:常用指令

    ① 创建组件

      ng g component home  或

      ng g component components/home

    ② 创建管道

      ng g pipe mypipe  或

      ng g pipe pipes/mypipe

     ③ 创建服务

      ng g service loger  或

      ng g service services/loger

     ④ 创建模块

        ng g module mymodule 或

     ng g module modules/mymodule