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，它却是省时省力！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解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安装angular-cli

    最近在学习angular2,并尝试用这个框架来做公司的一个新项目. 终于要开始开发了,等了1个多月. 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目. 安装了好多次,看了好多博文,终于成功了. 依据本宝宝帮多位小伙伴安装成功的经验,现总结安装angular-cli过程如下: 1.设置淘宝镜像,在 .npmrc文件(该文件在C盘>用户(或user)>你的电脑名字下就可找到)加入下面一句: registry = https://registry.npm.t

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • Angular通过angular-cli来搭建web前端项目的方法

    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 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

  • Angular2关于@angular/cli默认端口号配置的问题

    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快速搭建工程（二）

    Angular2使用Angular-CLI快速搭建工程（二）

    使用iconfont iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont:(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通) iconfont上创建工程 具体怎么做已经超出本文范围:有兴趣的可以自己学习: 我们选择一个做实验 最终写出一个css文件,在styles.css中 安装@angular2-material

  • 如何利用@angular/cli V6.0直接开发PWA应用详解

    如何利用@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开发环境搭建教程

    .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的安装使用

    前面我们已经准备好开发环境,现在可以正式开发了.正如前面提到的,Angular 提供了一个命令行工具,可以简化我们的程序开发.我们今后的开发也会使用这一工具,因此我们需要首先安装这个名为 Angular CLI 的开发工具. 安装 CLI 的过程很简单,与安装其它工具.甚至是安装一个普通开发包没什么区别.我们前面已经配置好 NPM Registry.安装成功 yarn,那么就使用 yarn 来安装这个工具.具体的命令是: yarn global add @angular/cli 参数 globa

  • idea快速搭建springboot项目的操作方法

    idea快速搭建springboot项目的操作方法

    Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置',实现零配置. 那么,如何在idea中创建一个springboot项目呢? 一.在你建立的工程下创建 Module 选择Spring initializr创建. 二.在Type处选择: Maven Project(项目的构建工具) 三.创建依赖时勾上web,mybatis,mysql(这个看你个人需要吧,可以自主选择) 建立好的项目结构如下: 相对应的

随机推荐