前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >angular4实战(1) angular-cli

angular4实战(1) angular-cli

作者头像
j_bleach
发布于 2019-07-02 03:36:09
发布于 2019-07-02 03:36:09
67300
代码可运行
举报
文章被收录于专栏:前端加油站前端加油站
运行总次数:0
代码可运行

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78077403

angular-cli

脚手架大大方便了,项目的开发,使用也非常简单。 https://cli.angular.io/ 提供了搭建一个angular项目的简单介绍。 本文就angular-cli这块的指令属性,在做一些扩展介绍。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

通过这四条命令,可以快速创建一个angular项目。 本章主要关注,ng new 这条命令。在下载好angular-cli之后,通过在命令行输入ng help可以获得angular-cli的指令详细介绍。

如果新建一个项目仅仅用上述5条,显然是不满足开发需求的,在介绍5条属性。

—style 指定生成项目的css预编译语言,例如 ng new PROJECT-NAME –style less 则创建的项目,由less开发。

—prefix 默认是app,可以选择改成其他的,如果不设置,那么项目生成的组件选择对象就是app开头,即:

—routing angular生成的项目默认是不带路由的,而路由在但也应用基本上是必备模块,因此在生成项目时需添加此属性。

—inline-style,–inline-template这两个属性放在一起介绍,一个是将css放在ts文件中,一个是将html放在ts文件中一起编写。用过vue或者react的同学应该非常熟悉。我这边都是没有做inline设置的,个人不喜欢这种把其他东西柔在脚本里的方式。

组件生成

之前用angularjs的时候,有自己写生成组件的脚本,换到4之后,发现天生带这个功能,很喜欢。比如生成一个名为stones的组件,只需运行命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ng g component stones

就ok了,然后会依照之前在ng new项目时的配置在app目录下生成相应的组件,并自动加入到依赖中,非常方便。

本章对angular-cli的介绍到此为止,下章具体介绍路由。

项目地址:https://github.com/jiwenjiang/angular4-material2

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年09月24日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用Angular CLI从蓝本生成代码
ng generate <蓝本名> 命令. 该命令的格式是 ng generate <蓝本名> <参数>. 也可以使用--dry-run参数来列出要生成的文件, 而不是真的生成. 例如: ng generate component person, 就会生成一个person.component.ts. ng generate service sales-data 就会生成一个sales-data.service.ts. ng generate class user-model 就会生成一个user-mode
solenovex
2018/03/29
1K0
使用Angular CLI从蓝本生成代码
Angular CLI 简介
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文.
solenovex
2018/03/22
6.1K5
Angular CLI 简介
angular4实战(4)ngrx
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78161765
j_bleach
2019/07/02
1.2K0
angular4实战(4)ngrx
使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命令会生成一
solenovex
2018/03/29
1.9K0
使用Angular CLI生成 Angular 5项目
angular4实战(2) router
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78077844
j_bleach
2019/07/02
5600
angular4实战(2) router
Angular学习(02)--Angular-CLI命令
官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主。
请叫我大苏
2019/03/19
2.6K0
Angular学习(02)--Angular-CLI命令
Angular CLI 常用终端操作命令
初始化创建项目时,自动添加了 <code> @angular/router </code> ,自动添加到package.json 文件中
用户1437675
2018/08/20
2.1K0
angular4实战(3) 插件引入及封装
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78118193
j_bleach
2019/07/02
7730
angular4实战(3) 插件引入及封装
Angular CLI 使用教程指南参考
Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.
庞小明
2018/07/30
3K0
Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
官方文档 :https://github.com/angular/angular-cli
易兒善
2018/08/21
1.1K0
Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
使用Angular CLI进行单元测试和E2E测试
单元测试. angular cli使用karma进行单元测试. 首先执行ng test --help或者ng test -h查看帮助. 执行测试的话就执行ng test即可, 它会执行项目里所有的.s
solenovex
2018/03/29
2.8K0
使用Angular CLI进行单元测试和E2E测试
Angular 6.x 基础教程
若想进一步了解 Angular CLI 的详细信息,请参考 Angular CLI 终极指南。
阿宝哥
2019/11/05
15.7K0
Angular10配置webpack打包 「详细教程」
对于 Angular 项目,推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。 但是有特殊的需求时就显然不是很灵活,比如想分割一些较大的打包文件、分析每个打包文件组成,自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能,但是,它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。
睡魔的谎言
2021/01/21
5.1K0
Angular-Cli脚手架介绍、安装并搭建项目
最简单的使用方式参照以下 StackBlitz 演示,也推荐 Fork 本例来进行 Bug Report,注意不要在实际项目中这样使用。
江一铭
2022/06/17
2K0
Angular-Cli脚手架介绍、安装并搭建项目
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
  上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加Angular应用的新功能。让你快熟的构建一个属于自己的NG-ZORRO后台管理框架,注意我们的前端代码的编写全部都是在VS Code上面编写。
追逐时光者
2020/12/31
4K0
玩转 Angular 环境变量
对于 “程序猿” 来说,在日常开发过程中,我们经常要与不同的开发环境打交道。在实际的项目的开发过程中,一般至少会有两个环境:开发环境和线上环境,这是很简单的情形。但对于一些项目来说,仅有两个环境是不够,除了开发环境和线上环境之外,可能还会包含测试环境和预发布环境等等。
阿宝哥
2019/11/05
3.3K0
Angular学习(01)-架构概览
官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主。
请叫我大苏
2019/03/19
3.7K0
Angular学习(01)-架构概览
angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释
一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过eject命令把webpack配置释放出来 }, "apps": [ { "root": "src", // 源码根目录 "outDir": "dist", // 编译后的输出目录,默认是dist/ "assets": [ // 记录资源文件夹
喝茶去
2019/04/16
1.6K0
一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序
现在我们可以app.component.html用这个替换:Angular是由Google开发的AngularJS框架的新版本。它带有一个完整的重写,以及各种改进,包括优化构建和更快的编译时间。在这个Angular 5教程中,我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5,本教程适合您。
WindCoder
2018/09/19
42.8K0
一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序
Angular2 :从 beta 到 release4.0 版本升级总结
一、版本说明 原始版本: 2.0.0-beta.6 目标版本: 4.1.1 新增脚手架: Angular-cli 脚手架版本: 1.0.0-rc.1 升级后主要依赖版本如下: "dependenci
被删
2017/05/16
8.2K0
推荐阅读
相关推荐
使用Angular CLI从蓝本生成代码
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文