Angular2使用Angular-CLI快速搭建工程(二)
使用iconfont
iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont;(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通)
iconfont上创建工程
具体怎么做已经超出本文范围;有兴趣的可以自己学习;
我们选择一个做实验
最终写出一个css文件,在styles.css中
安装@angular2-material/icon
npm install @angular2-material/icon
在app.module.ts中添加以下代码
在刚刚的home.component.html中添加icon
启动应用 ng serve
这,我们就看到了我们选的图标了;
编译
Angular-CLI编译的配置都帮我们写好了
开发环境输入 ng build
生产环境:ng build --prod,这里对比下前后的差异
对比可以看到,生产环境把3M的压缩到了1M(还不够,还应该优化,我后续会继续努力),生产的文件还加了MD5,这样可以避免浏览器缓存;
我们走过的路:
如此,我们的Angular-CLI的搭建完了,我们可以具备什么能力了?
(1)创建一个可用于开发,测试,生产的工程;
(2)具备路由的能力,按需加载,代码分割;
(3)我们可以添加外部的css,js我没讲,其实原理相同;
(4)集成angular2 material;
(5)添加自己的icon font;
(6)开发环境和生产环境的编译;
上面涵盖的内容应该可以用来开发一个简单的工程了。剩下的内容就靠angular的具体内容和typescript的熟练程度了。
当然,作为生产中,上述的内容还略显不够,我们还没提到集成一些组件,比如用js写的组件怎么集成进来。测试如何进行?我后续会继续推出,请关注我!我个人更倾向于用angular2-webpack-seed来开发生产的代码(目前正在用它开发一个网站),因为它配置起来更方便,但是有时候真是精力有限,应该也会用angular-cli,它却是省时省力!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解Angular-Cli中引用第三方库
最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题... 初试 我最初的想法是直接将相对路径写到index.html即可,如下: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow&qu
-
Angular2安装angular-cli
最近在学习angular2,并尝试用这个框架来做公司的一个新项目. 终于要开始开发了,等了1个多月. 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目. 安装了好多次,看了好多博文,终于成功了. 依据本宝宝帮多位小伙伴安装成功的经验,现总结安装angular-cli过程如下: 1.设置淘宝镜像,在 .npmrc文件(该文件在C盘>用户(或user)>你的电脑名字下就可找到)加入下面一句: registry = https://registry.npm.t
-
Angular通过angular-cli来搭建web前端项目的方法
准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就
-
简单谈谈关于Angular Cli打包的事
本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使
-
详解基于angular-cli配置代理解决跨域请求问题
1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一
-
Angular2使用Angular CLI快速搭建工程(一)
前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步
-
Angular2关于@angular/cli默认端口号配置的问题
前言 最近研究Angular2的@Angular/cli,有改端口号的需求. 方法一 1.定位到:..\node_modules\._@angular_cli@1.0.1@@angular\cli\lib\config 2.打开schema.json 3.直接看图,修改即可. 方法二 cmd定位到项目目录,命令:ng serve --port 端口号 总结 有需求就会有方法,没有走不通的路. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
-
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动
-
Angular2使用Angular-CLI快速搭建工程(二)
使用iconfont iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont:(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通) iconfont上创建工程 具体怎么做已经超出本文范围:有兴趣的可以自己学习: 我们选择一个做实验 最终写出一个css文件,在styles.css中 安装@angular2-material
-
如何利用@angular/cli V6.0直接开发PWA应用详解
什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的
-
Angular CLI在Angular项目中如何使用scss详解
前言 SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法. 由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作.也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何
-
.Net Core+Angular Cli/Angular4开发环境搭建教程
一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul
-
详解Angular CLI + Electron 开发环境搭建
本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el
-
Angular 开发学习之Angular CLI的安装使用
前面我们已经准备好开发环境,现在可以正式开发了.正如前面提到的,Angular 提供了一个命令行工具,可以简化我们的程序开发.我们今后的开发也会使用这一工具,因此我们需要首先安装这个名为 Angular CLI 的开发工具. 安装 CLI 的过程很简单,与安装其它工具.甚至是安装一个普通开发包没什么区别.我们前面已经配置好 NPM Registry.安装成功 yarn,那么就使用 yarn 来安装这个工具.具体的命令是: yarn global add @angular/cli 参数 globa
-
idea快速搭建springboot项目的操作方法
Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置',实现零配置. 那么,如何在idea中创建一个springboot项目呢? 一.在你建立的工程下创建 Module 选择Spring initializr创建. 二.在Type处选择: Maven Project(项目的构建工具) 三.创建依赖时勾上web,mybatis,mysql(这个看你个人需要吧,可以自主选择) 建立好的项目结构如下: 相对应的
随机推荐
- redis常用命令、常见错误、配置技巧等分享
- 仿百度联盟对联广告实现代码
- 16进制显示字节流技巧分享
- JavaScript 程序执行顺序问题总结
- Memcache 在PHP中的使用技巧
- 不错的JS中变量相关的细节分析
- python实现类的静态变量用法实例
- 浅谈MFC 改变控件大小和位置
- Python中装饰器兼容加括号和不加括号的写法详解
- jquery中checkbox使用方法简单实例演示
- fleaphp下不确定的多条件查询的巧妙解决方法
- 深入理解Hibernate中的flush机制
- php设计模式 Facade(外观模式)
- PHP生成唯一ID之SnowFlake算法
- Android Service中方法使用详细介绍
- Android自定义控件实现边缘凹凸的卡劵效果
- 使用Solaris搭建路由器
- 基于Python log 的正确打开方式
- SpringBoot项目不占用端口启动的方法
- yii框架数据库关联查询操作示例