Angular项目创建

最新推荐文章于 2024-05-30 18:38:28 发布
最新推荐文章于 2024-05-30 18:38:28 发布
阅读量866 收藏 2
点赞数 1
分类专栏： angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sun_Shydeo/article/details/90521716
版权
本文档详细介绍了如何创建一个Angular项目，从安装CLI到配置环境，再到创建组件和引入路由模块。步骤包括：安装CLI，创建项目并选择路由及CSS预编译样式，启动项目并修改端口号，创建组件，添加路由，以及全局引入其他插件如jQuery，并处理TypeScript的类型描述。
摘要由CSDN通过智能技术生成

1、安装 angular cli

npm install -g @angular/cli

2、检查环境是否配置

ng -v

3、cli 创建新项目

ng new 项目名


ng new my-app

提示选择使用路由

提示选择CSS预编译styles，选择less、sass、scss，默认CSS

4、启动项目

npm start


访问
http://localhost:4200/

可在 项目/e2e/protractor.conf.js 中修改端口号

5、创建组件

进入到app文件夹创建组件，自动一个同名文件夹以及文件夹下 4个文件

table-list/

  • table-list.component.html

  • table-list.component.spct.ts

  • table-list.component.ts

  • table-list.component.less    或 .sass .css等

ng g compon
最低0.47元/天 解锁文章
CodeLines3
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建一个angular项目、组件以及服务
poppy995的博客
10-12 176
创建项目 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';
angular入门基础教程(一）环境配置与新建项目
最新发布
峰会路转的博客
07-29 278
ng已经更新到v18了，我对他的印象还停留在v1,v2的版本，最近研究了下，与react和vue是越来越像了，所以准备正式上手了。新官网地址:https://angular.cn/
创建Angular项目
努力给自己想要的
02-16 1086
1、使用命令ng new project-name 来创建一个angular的项目 2、由于国外的一些node.js包无法下载，进入到刚刚创建的项目文件夹，输入命令cnpm install来下载   到这里一个基本的Angular项目就已经建立好了，angular是基于组件的，每个组件完成独立的功能。各个组件形成了一个完整的系统。 3、创建组件 ng g component componen...
Angular创建项目
小白的进阶之路
11-30 567
Angular创建项目 ng new name cd name ng serve --open 使用 Angular CLI 创建一个名为 student 的新组件。 使用下面的命令来创建组件 1. ng generate component students 2. ng generate component <name> [options] 或者 ng g component <name> [options] ng g component user-student --mod
新建一个angular项目
写了个 bug
03-15 1659
新版本的angular是基于Typscript的 不是js ， angualr的项目 基于TypeScript compiler、webpack、Karma、Jasmine、Protracter 等模块。，而自己动手搭建这些模块很麻烦， ng cli命令可以帮我们省去这一麻烦的环节。首先确保你的电脑上安装了 node， 如果没有请去node的官网安装匹配的版本。1.全局安装cnpm ,使用cnpm...
cnpm加速Angular项目创建的方法
10-18
项目创建完成后，进入项目目录： ``` cd my-app ``` 然后使用`cnpm`来安装项目依赖： ``` cnpm install ``` 通过`cnpm`，依赖安装的速度将会大大加快。 注意事项： 尽管`cnpm`通常能显著提高下载速度，但也存在一些...
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
08-27
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结 Angular CLI是Angular项目的命令行界面工具，可以创建项目、添加文件以及执行一大堆开发任务。使用Angular CLI可以快速创建Angular项目，下面是使用...
搭建Angular项目
轨迹
03-07 1630
      在开始之前说一些题外话，此框架开发人员呢用AngularJs统一称为1.x版本，而Angular代表的是2.x、3.x、4.x、5.x等后续版本，这就是它的一些基本命名策略。接下来呢我们开始我们的Angular学习之路。搭建环境1  TypeScript       要使用typescript，首先呢就得安装Node.js（安装方式请看官方网站：点击打开链接）。要使用Angular，t...
idea创建angular项目
weixin_44628096的博客
03-22 423
idea创建angular
Angular项目从新建、打包到nginx部署全过程记录
08-28
一直比较喜欢angular，正巧最近有个项目用到了，所以想和大家来分享下，下面这篇文章主要给大家介绍了关于Angular项目从新建、打包到nginx部署的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
Angular学习笔记一之项目构建与模块创建
weixin_45855469的博客
04-18 2135
Angular是三大框架之一，是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架，为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具，组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理是相当到位的，可以轻松实现组件之间的数据共享。
Angular：Angular安装与项目的创建
qq_42119514的博客
02-27 764
AngularJS和Angular是不一样的，AngularJS基于JavaScript，angular基于typescript，从angular2往后开始，统称为 angular，没有后面的JS,以此区分。 我这里是angular8... 1.安装node.js,里面包含了npm，所以不需要单独安装，环境变量安装好之后自动配置，不需要手动配置。 node.js官网：https://node...
Angular------使用IDEA开发Angular
Baldwin_KeepMind
12-30 4964
本文章所有内容基于win10搭建Angular环境并运行hello-world 1. 相关 上一篇文章中我们了解Angular开发所需要准备的环境，我们搭建好环境之后不可能直接使用文本工具进行编程，必须选择一款IDE，而一款好的IDE能让我们开发起来事半功倍。我选择的是JetBrains IDEA，主要原因是在我工作内容中的几款编辑器，IDEA是支持Angular开发的做的比较好的一款IDE。 2. 新建项目 File => New => Project => JavaScript =&g
如何创建一个Angular项目（超简单）
庸人方自扰，自在就好
05-30 443
9、 如果你看到跟下图一样，说明你的Angular项目创建成功，在浏览器打开http://localhost:4200/便可看到创建好的Angular项目，至此，一个Angular项目创建完成！（用npm安装cnpm，将镜像源设置为国内镜像源，国内镜像源由taobao提供，有些软件可能在国外，有的时候可能需要翻墙，你就会下载比较慢，这个时候使用cnpm就比npm快）2、运行node -v和npm -v两条命令（检验是否下载成功Node.js）（查看安装的cnpm版本号，用于检查cnpm安装是否成功）
【Angular2】 如何创建一个Angular2项目
卷
04-29 6053
【前言】             这个也是从晓风写的文档上借鉴来的， 我做端到端测试的时候用的就是这个项目。 【正文】              项目流程 安装webstorm-持续集成服务器 下载地址：http://www.jetbrains.com.cn/webstorm.html      新建angular2项目    直接在命令提示符中输入： ng new a
Angular基础-搭建Angular运行环境
踏雨歌青春，诗酒趁年华
05-02 6309
这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南，帮助他们快速搭建Angular开发环境，为后续的项目开发奠定基础。
Angular项目新建
weixin_30372371的博客
09-07 97
Angular新建项目步骤记录 标签（空格分隔）： Angular 1. ng new my-app 2. 启动dev环境 cd my-app ng serve --open 3. 修改styles.css为styles.scss,同时修改文件 .angular-cli.json 中的： ... "styles": [ "styles.scss" ], ....
创建angular项目
09-12
创建Angular项目的步骤如下： 1. 打开命令行终端，并进入到你想要创建项目的文件夹中。 2. 使用命令`ng new 项目名称`来创建一个新的Angular项目。比如，使用命令`ng new angularui`创建一个名为`angularui`的项目。 3. 进入到项目目录，使用命令`cd 项目名称`，比如`cd angularui`。 4. 使用命令`cnpm i`来安装项目所需的依赖。这里使用了`cnpm`作为包管理工具来安装依赖。 5. 在`app.module.ts`文件中导入所需的包。比如，使用命令`import { FormsModule } from '@angular/forms';`来导入`FormsModule`模块。 6. 根据需要，在HTML模板中使用`*ngFor`循环来绑定数据，并使用`*ngIf`条件语句进行选择。比如，使用`*ngFor="let hero of heroes"`来循环绑定名为`heroes`的数据。 7. 使用命令`ng serve --open`或`npm start`来运行项目，并打开浏览器查看页面。这将启动开发服务器并自动打开浏览器以显示你的应用程序。 希望以上步骤能帮助你成功创建Angular项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值