素材巴巴 > 程序开发 >

angular-cli搭建新的项目

程序开发 2023-09-03 17:50:44

一、在开始之前,请确保你的开发环境中包括 Node.js和 npm 包管理器。

Node.js

Angular 需要 Node.js 版本 10.9.0 或更高版本。

npm 包管理器

Node.js 已经默认安装了它。

要检查你是否安装了 npm 客户端,请在终端/控制台窗口中运行 npm -v 。

二、安装angular-cli

要使用 npm 命令安装 CLI,请打开终端/控制台窗口,输入如下命令:

npm install -g @angular/cli

new语句表示新建项目

ng new my-app

切换到当前项目目录

cd my-app

install表示安装依赖

npm install

运行应用

npm serve --open

因为默认不支持IE9-11,所以用谷歌浏览器打开的,默认端口4200

http://localhost:4200/   就可以打开页面了,使用基础语法就可以完成这样一个页面

 

下面是项目结构  重点关注圈出来的三个文件

 

新建的组件都放在src-app-component中

如何在这个目录下新建组件呢,可以在终端运行以下代码:

ng g component components/home

 

就会添加home组件了

 

然后我们来看每一个组件中都有什么

可以看到,home组件包括四个文件,其中.ts文件放逻辑代码,.html放html代码,  .css放css代码


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。