关于Angular环境搭建及运行

nine小麦

于 2021-02-06 15:46:52 发布

阅读量326

点赞数

分类专栏： Angular 前端文章标签： angular

本文链接：https://blog.youkuaiyun.com/X2014W/article/details/113725796

版权

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

Angular

9 篇文章

订阅专栏

本文详细介绍了如何搭建Angular开发环境，从安装Angular CLI到创建新项目，再到启动开发服务器。通过ng serve命令实现自动构建和热更新，简化开发流程。此外，还讲解了如何使用CLI快速创建组件、指令和服务，并提到了ngOnInit生命周期钩子和自动声明在模块中的机制。文章适合Angular初学者，帮助理解Angular项目构建和基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于Angular的环境搭建及运行

1.npm install -g @angular/cli 安装环境
2.ng new NewApp 创建新的angular项目
3.ng serve 启动/运行（ng serve --port xxxx 使用其他端口号运行）
说明：1.构建本应用
2.启动开发服务器
3.监听源文件
4.当文件发生改变时重新构建本应用
4.ng g c 自动创建组件
说明:1.@component是装饰器函数，用于为该组件指定angular所需的元数据
2.CLI自动生成了三个元数据属性（在@component中）
a.selector——组件的选择器（css元素选择器：用来在父组件的模板中匹配HTMl元素的名称，已识别出该组件）
b.templateUrl——组件模板文件的位置
c.styleUrls——组件私有css样式表文件的位置
3.ngOnInit（）是一个生命周期钩子，常放置初始化逻辑
4.export方便在其他地方导入它
5.自动声明在app.module.ts中，可导入，可在declarations中声明
5.ng g d 自动创建指令
6.ng g s 自动创建服务
7.ng build 构建项目/部署