创建一个angular项目、组件以及服务

最新推荐文章于 2024-09-23 10:30:00 发布

我今年六岁

最新推荐文章于 2024-09-23 10:30:00 发布

阅读量191

点赞数

分类专栏： angular 前端笔记

本文链接：https://blog.csdn.net/poppy995/article/details/109024259

版权

本文档指导如何创建一个Angular项目，详细步骤包括选择项目配置，创建组件并指定目录，以及在模块中引入和声明服务，同时在需要的组件中实例化服务。

摘要由CSDN通过智能技术生成

创建项目

ng new 项目名称

在选项中选择y以及less

创建组件

ng g component component/news
ng g 可查看可创建的类目

component/news 为目录
使用命令行创建，根模块会自动引入并且配置

创建服务

	ng g service services/storage

在app.moudles.ts里面引入创建的服务并且声明

 import {
    StorageService } from './services/storage.service';
        @NgModule({
   
            ....

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我今年六岁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

创建一个Angular项目

Alade_cuncun的博客

08-28

385

创建angular可以遵照官网的新手指南（angular快速创建指南），易懂好上手。今天按照上面链接中的指南操作时遇到一丢丢问题，以下简单记录。 1.本人事先写Python的时候已经装好了node和npm，不确定自己有没有装过的可以在命令行用node -v和npm -v试一下，显示版本号则表示已经安装过了（如图），这里需要运行 node 6.9.x 和 npm 3.x.x 以上的版本，否则后续可...

创建并发布一个Angular组件库

yangliusi的博客

08-25

1461

文章目录创建并发布一个Angular组件库创建组件库开发一个按钮组件测试组件发布组件发布到私有的npm仓库中发布到公共的npm库生成tar文件创建并发布一个Angular组件库随着公司业务的不断发展，不同产品或团队之间公用的组件越来越多，这时候就需要一套支持内部使用的组件库。本文将会介绍如何创建并发布一个Angular组件库。创建组件库首先我们来创建一个Angular项目，用来管理组件的展示和发布。用以下命令来生成一个cindylib的项目。ng new cindylib --createAppl

参与评论您还未登录，请先登录后发表或查看评论

angular-cli创建component、page、service等报错

XYQ689的博客

01-07

917

发生日期：20190107 问题描述：在angular2+的前端项目上使用angular-cli工具创建组件或者服务等，总是报错，见下图问题原因：查找一波，应该是项目中的angular-cli工具版本与操作系统上全局安装的版本相比过低解决方法：在项目中执行一下 npm install --save-dev @angular/cli@latest 命令行把angular-cli工具...

[Angular] 从零开始使用 Angular CLI 创建 Angular 项目

最新发布

Ammmmmmmmn的博客

09-23

1018

Node.js 是一个运行 JavaScript 代码的 JavaScript 运行时，它允许我们在服务器端运行 JavaScript 代码。🌐 服务器启动后，打开浏览器并访问 http://localhost:4200，您应该会看到 Angular 的欢迎页面，这意味着项目创建成功，开发环境已正确配置。Angular CLI 是官方提供的命令行工具，帮助开发者快速生成 Angular 项目和各种代码片段。💾 下载适合你操作系统的安装程序，并按照安装向导的提示进行安装。在大多数情况下,你可以接受默认设置

创建Angular项目

努力给自己想要的

02-16

1114

1、使用命令ng new project-name 来创建一个angular的项目 2、由于国外的一些node.js包无法下载，进入到刚刚创建的项目文件夹，输入命令cnpm install来下载到这里一个基本的Angular项目就已经建立好了，angular是基于组件的，每个组件完成独立的功能。各个组件形成了一个完整的系统。 3、创建组件 ng g component componen...

Angular项目创建

weixin_52455405的博客

08-30

1089

一、安装安装node.js 选择一个命令工具npm、cnpm、yarn npm:npm config registry https://registry.npm.taobao.org cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org yarn:npm install yarn -g 切换淘宝镜像源： yarn config set registry https://registry.npm.taobao.org

Angular创建项目

GeGe&YoYo的博客

04-26

917

-同时会安装依赖包，执行的命令就是npm i。如果不下载依赖包，执行运行程序会报错。进入到angulardemo 目录下，执行。ng new 项目名称。--不需要安装依赖包。这样就创建好一个项目了。这个就是文件目录结构。

Angular7创建项目、组件、服务以及服务的使用

10-17

创建Angular项目需要先安装Angular CLI（命令行界面），可以通过npm安装： ```bash npm install -g @angular/cli ``` 安装完成后，可以使用以下命令创建一个新的Angular项目： ```bash ng new newpybbs-front-...

angular学习之从零搭建一个angular4.0项目

08-30

本文将指导读者从零开始搭建一个 Angular 4.0 项目，涵盖了项目的创建、安装依赖项、生成项目结构等方面的知识点。一、Angular 项目搭建准备在开始搭建 Angular 项目之前，需要准备以下工具： * Angular 4.0：...

Angular父子组件以及组件之间通讯示例代码.zip

05-20

4. **服务（Services）**：创建一个共享服务，并通过依赖注入（Dependency Injection）在多个组件间共享数据。这种方法适用于非父子关系或跨多层组件的通信。 5. **行为Subject（BehaviorSubject）**：在服务中使用...

快速构建angular项目

08-10

快速构建angular项目

如何创建一个Angular项目（超简单）

庸人方自扰，自在就好

05-30

644

9、如果你看到跟下图一样，说明你的Angular项目创建成功，在浏览器打开http://localhost:4200/便可看到创建好的Angular项目，至此，一个Angular项目创建完成！（用npm安装cnpm，将镜像源设置为国内镜像源，国内镜像源由taobao提供，有些软件可能在国外，有的时候可能需要翻墙，你就会下载比较慢，这个时候使用cnpm就比npm快）2、运行node -v和npm -v两条命令（检验是否下载成功Node.js）（查看安装的cnpm版本号，用于检查cnpm安装是否成功）

创建angular项目

love_baby1的博客

12-21

500

用命令行创建angular项目 npm i -g @angular/cli ng new myangular cd ~ ng run start

AngularJS5 环境搭建

weixin_30292745的博客

08-31

145

今天，介绍一下AngularJS5项目的简单搭建流程 1. 首先需要安装最新版的node，在node官网下载即可安装。 2.安装angular脚手架，在终端键入命令：　　npm install -g @angular/cli 　　然后等待安装完毕，安装完毕之后，输入 ng -v，出现版本号就说明安装成功了，ng就是angualr的简称。 3.创建项目，在终端键入命令：　　ng ne...

新建一个angular项目

写了个 bug

03-15

1681

新版本的angular是基于Typscript的不是js ， angualr的项目基于TypeScript compiler、webpack、Karma、Jasmine、Protracter 等模块。，而自己动手搭建这些模块很麻烦， ng cli命令可以帮我们省去这一麻烦的环节。首先确保你的电脑上安装了 node，如果没有请去node的官网安装匹配的版本。1.全局安装cnpm ,使用cnpm...

搭建Angular项目

轨迹

03-07

1653

在开始之前说一些题外话，此框架开发人员呢用AngularJs统一称为1.x版本，而Angular代表的是2.x、3.x、4.x、5.x等后续版本，这就是它的一些基本命名策略。接下来呢我们开始我们的Angular学习之路。搭建环境1 TypeScript 要使用typescript，首先呢就得安装Node.js（安装方式请看官方网站：点击打开链接）。要使用Angular，t...