H5W3
当前位置:H5W3 > JavaScript > Typescript > 正文

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

在上一节中,Angular框架的开发环境已经搭建完毕,在终端输入命令:ng -v 检查Angular框架的版本号,执行如下:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 继续使用Angular CLI脚手架创建项目,打开VS-Code在终端输入命令:ng new [项目名称] 创建一个项目,操作如下:

 1.桌面新建文件夹Demo\AngularDemo(正式开发环境根据项目要求把代码存放相应的盘符,此处只做演示);

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

2.两种方式新建Angular项目:

2.1 方式一:在刚才新建好的文件夹地址中输入命令:cmd,如下操作:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

输入 cmd 命令键盘上点击回车键(Enter),显示如下终端:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 再使用命令:ng new my-app 创建第一个Angular项目my-app,操作显示:(等待项目创建)

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 2.2 方式二:使用VS-Code加载刚才桌面新建的文件夹,操作如下:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 因上面【方式一】已经创建项目【my-app】,所以打开AngularDemo文件夹中会有 my-app 项目文件夹,为了演示方式二,新建项目【my-app2】,在VS-Code终端输入命令:ng new my-app2,显示如下:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

同上等待项目【my-app2】创建完毕。(此时可以听听音乐,放松(☄⊙ω⊙)☄)

3. 安装依赖,输入命令:npm install 或者使用淘宝镜像 cnpm install;此处为了演示,删除刚才创建的项目【my-app2】,使用【my-app】继续演示。

4. 进入刚才创建的项目【my-app】启动服务,输入命令:ng serve(或者ng server –open)编译项目;

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用服务编译完成后,在浏览器中输入: http://localhost:4200/ 显示如下界面:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 此时新建项目-启动服务成功。

注:输入命令启动服务时, 终端会输出链接提示信息:

【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

 

本文地址:H5W3 » 【TS】基于TypeScript的Angpalar6.Xa系列学习反思-创建第一个Angular应用

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址