Angular 4
文章平均质量分 66
关于前端框架Angular4的研究总结
Hepburn Yang
匠心精神
展开
-
前端独立实现模糊查询--filter()与match()
filter()方法和match()方法结合使用可以使前端已获取数据的情况下独立实现模糊查询,不再调用后端接口,这种情况适用与查询次数比较多,且数据比较固定的情况,减少调用后端接口一定程度上可以缓解后端压力。示例: teacherList = allTeacherList.filter(array => array.name.match(searchContent));这里有几个小t...原创 2018-11-18 21:50:05 · 11763 阅读 · 10 评论 -
【Angular4学习】模块化再理解-4
共享模块 在多个特性模块中,可能存在公共的组件、指令和管道。我们可以添加SharedModule来存放这些公共组件、指令和管道,并且共享给那些需要它们的模块。 如,项目中公共的有AwesomePipe管道、HighlightDirective指令、CommonModule和FormsModule模块。可以定义SharedModule如下:import { NgModule } ...原创 2018-06-17 23:53:40 · 716 阅读 · 13 评论 -
【Angular4学习】模块化再理解-3
通过路由器惰性加载模块惰性加载也就是懒加载,或者说延迟加载,一些模块使用懒加载后,只有当用户第一次导航到这个模块时,才会加载一些特性。这对于应用程序的性能和减小初始包的大小有很大的帮助,其设置也非常简单。应用路由app/app-routing.module.tsimport { NgModule } from '@angular/core';impor...原创 2018-06-10 16:07:34 · 1036 阅读 · 10 评论 -
【Angular4学习】模块化再理解-2
解决指令冲突 指令冲突表现在指令同名但功能不同时导入根模块时的情况。即这些指令是不同的,只是恰好指令名称相同而已。 我们可以通过创建特性模块来消除组件与指令的冲突。特性模块可以把来自一个模块中的声明和来自另一个的区隔开。特性模块 特性模块是带有@NgModule装饰器及其元数据的类,就像根模块一样。特性模块的元数据和根模块的元数据的属性是一样的。 根模块和特性模...原创 2018-06-10 16:00:01 · 438 阅读 · 7 评论 -
【Angular4学习】模块化再理解-1
Angular模块把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。 Angular模块是一个由@NgModule装饰器提供元数据的类,元数据包括: 声明哪些组件、指令、管道属于该模块; 公开某些类,以便其它的组件模板可以使用它们; 导入其它模块,从其它模块中获得本模块所需的组件、指令和管道; 在应用程序级提供...原创 2018-06-03 21:04:29 · 616 阅读 · 12 评论 -
LocalStorage存储JSON对象的问题
首先,localStorage是没有时间限制的数据存储 ,是以键值对的形式存储的。 var arr=[1,2,3]; localStorage.setItem("temp",arr); //会返回1,2,3 console.log(typeof localStorage.getItem("temp"));//string console.log(localStorage.getItem(...原创 2018-05-26 11:42:34 · 1121 阅读 · 23 评论 -
【Angular 学习】--- 常用命令的通用关键参数解释
1.ng serve --host (self)指定本地Server绑定的域名,默认值:localhost.如果希望使用self来访问你的站点,须加入以上参数2.ng serve --hmr注意开启之后,只是在angular-cli里的webpack添加必要的扩展,等价于webpack-dev-server –hot,还需要在应用代码里处理hmr逻辑,如可在main.ts里添加:...原创 2018-05-10 22:33:49 · 783 阅读 · 11 评论 -
npm 私服工具verdaccio 搭建(二) (ps:欲使用sinopia搭建私服的一定要看过来)
引言上篇文章我写了关于verdaccio私服在服务端的搭建过程,这篇文章我来分享一下客户端如何与私服连接,下载私服的包以及更新和发布公司内部封好的包。(ps:全文中的http://192.168.XX.50默认为我们的私服地址。)一、与私服连接当我们用type命令查看npmrc文件内容,此文件内容是npm镜像下载源的地址。windows下的type命令同Linux的cat命令。...原创 2018-04-27 22:22:55 · 5639 阅读 · 16 评论 -
npm私服工具verdaccio配置文件config.yaml详解(同sinopia配置文件)
配置文件原文:storage: ./storageauth:htpasswd: file: /.htpasswduplinks:npmjs: url: http://registry.npmjs.org/packages:'@*/*': access: $all publish: $authenticated'*': access: $all ...原创 2018-04-26 21:43:36 · 14730 阅读 · 15 评论 -
npm 私服工具verdaccio 搭建(一) (ps:欲使用sinopia搭建私服的一定要看过来)
吐个槽(关于为什么用verdaccio )先跟大家吐个槽,其实我本来是用sinopia搭建的私服,也知道大家也都倾向于sinopia来搭,毕竟它出道比较早,知名度比较高,但是sinopia的作者两年前就已经停止了对sinopia的维护和升级,不信大家可以自己去GitHub上看,上次更新真的停留在了两年前,唉,然后真是留了一堆坑,所幸不是没人管,只是有一群人又出了一个sinopia的fork,也...原创 2018-04-26 17:33:56 · 20502 阅读 · 30 评论 -
【Angular项目生产环境构建问题集锦1】--ERROR in Type XX is part of the declarations of 2 modules;
生产环境构建命令:本项目中用output-path命令改变了构建后的输出文件夹名称ng build --prod --output-path=prod --base-href ./详细错误信息示例: ERROR in Type SafeHtmlPipe in E:/Hepburn‘s desk/graduate-FrontEnd/src/app/workspace/no...原创 2018-04-03 11:24:54 · 1871 阅读 · 9 评论 -
【Angular4学习】--DOM属性绑定生效过程(2)
前言上篇文字我们分析了HTML属性和DOM属性的区别与联系,这篇文章小编将详细分享DOM属性生效的整个过程。 图示过程解析过程 1. 当控制器中的值发生变化时,angular启动单向绑定机制来更新dom,即从控制器的greeting属性到dom的value属性,将dom属性的值改成greeting属性值,即“A value” 2. Angular的dom属性不...原创 2018-04-15 19:26:59 · 504 阅读 · 10 评论 -
Linux环境:gyp WARN EACCES user "root" does not have permission to access the dev dir“XX”
背景最近项目里需要搭建npm私服,在各种对比后了使用sinopia来搭建,可是本地的工作做完了,在Linux服务器上搭的时候刚开始就出师不利。详细错误信息在安装sinopia的过程中出了下面的错误信息,也不算安装错误吧,应该说是因为权限问题安装的不完整。 gyp WARN EACCES user “root” does not have permission to acce...原创 2018-04-18 16:25:37 · 11768 阅读 · 15 评论 -
【Angular4学习】npm 安装参数中的 --save-dev 含义 + package.json的依赖关系说明
关于 - -save-dev参数有些 node.js 的包安装的时候都加上 –save-dev 参数,这参数是做什么的,加和不加有什么区别呢?> npm install xxx --save-dev解释当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件...原创 2018-04-26 11:50:09 · 1273 阅读 · 15 评论 -
【gulp-util警告】:npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it
问题图示:问题原因:gulp开发团队一直计划弃用gulp-util,因为它只是一堆模块,大概6752个modules,其中许多都使用过了较低版本的Vinyl, 低版本的Vinyl是不兼容的,但仍被许多插件使用,然而Vinyl的v2版不会附带gulp-util,所以开发团队在我们下载gulp-util包时,或者并不是你直接下载但你别的包需要依赖gulp-util而间接下载时,他们都会...原创 2018-04-26 16:37:15 · 10423 阅读 · 14 评论 -
【Angular学习】单向数据绑定--属性/事件/差值
前言 Angular JS时默认双向绑定,Angular2之后进行彻底的变革,默认为单向绑定,为什么要变革呢?绑定方式 单向绑定:当我们使用jquery库改变模板上绑定对象的值时,控制器中的属性值不会改变。双向绑定:与单向绑定相反,两者要保持同步实现方式 双向绑定的实现:angularJS 在页面上存有一个维护所有绑定表达式的列表,当一个浏览器事件发...原创 2018-03-31 16:06:06 · 1414 阅读 · 12 评论 -
【Angular4】 HTML属性与DOM属性对比(1)
HTML属性和DOM属性的关系少量HTML 属性和DOM 属性之间有着1:1的映射,如id. eg:有些HTML 属性没有对应的DOM 属性,如colspan. 有些DOM 属性没有对应的HTML 属性,如textContent.HTML 属性的值指定了初始值; DOM 属性的值表示当前值。DOM 属性的值可以改变; HTML 属性的值不能改变。模板绑定是通过DOM属性和事件...原创 2018-03-31 21:44:21 · 846 阅读 · 12 评论 -
【Angular4学习】服务端 自动编译typeScript为JavaScript(vscode/webstrom)
【前言】 本文遇到的问题是在搭建web服务器时无法将写好的typeScirpt编译成Javascript造成无法访问web服务器。 【正文】 1.首先确保自己已经安装了typescript,可以用tsc -v查看版本,没有安装的话使用下面命令安装。这里没有写版本号默认是最新版。npm install -g typescript2.安装tsd编译typescript代码命令工具...原创 2018-02-14 14:49:54 · 2755 阅读 · 19 评论 -
【Angular学习】Angular4 ng serve报错:ERROR in AppModule is not an NgModule解决方法
【错误信息图示】【错误原因】出现这个错误的原因是angular/cli自己依赖的那个版本和本地ts版本不一致的问题,ts版本过高会出现这个错误。【解决办法】第一步:卸载全局的tsnpm uninstall -g typescript第二步:安装2.2.2版本的tsnpm install -g typescript@2.2.2第三步:查看ts版本是否安原创 2018-02-01 20:17:16 · 3090 阅读 · 10 评论 -
【Angular4学习】--子路由
什么是子路由:简单的说就是如果你希望可以无限制的在一个组件的内部进行多级嵌套其他组件,但是由于每层的嵌套都是以上一层为基础的,所以你在找到嵌套在内层的组件时就需要用到angular子路由来导航,当然这是相对来说的,根路由和子路由都是相对的。子路由语法: 当我访问home组件时,会展示home组件,当我访问xxx组件时在home组件模板上的rooteroutlet插座位置显示组件X原创 2018-01-23 15:42:38 · 1600 阅读 · 20 评论 -
【Angular4学习】--辅助路由
什么是辅助路由在一个组件的模板上只允许有一个插座,但是辅助路由允许定义多个插座,即辅助插座,辅助插座上显示的组件需要辅助路由导航过去。举个简单的例子:比如我们京东买东西的时候看上了一个商品这个时候想咨询卖家,就可以点击联系客服出现聊天页面,当我们在聊天的时候其他页面也可以独立自由操作,他们是独立变化互不影响的。 辅助路由语法 辅助路由实现三部曲1.插座设置:组件原创 2018-01-23 16:54:12 · 913 阅读 · 21 评论 -
【Angular4项目在linux环境构建与部署】--(1)环境配置
1.用xshell连接服务器2.放置压缩文件用winscp或者xftp将本地下载好的jdk 压缩包 nodejs压缩包 和NGINX压缩包放到服务器的/usr/local下。或者用wget命令直接下载三个文件。3.解压三个压缩包tar xvJf ***.tar.xz //解压tar.xz格式文件tar -xzvf ***.tar.gz原创 2017-12-24 17:13:50 · 3829 阅读 · 17 评论 -
【Angular4项目在linux环境构建与部署】--(2)项目部署
上一篇我们已经将Angular4项目的环境搭建完毕,接下来开展部署工作。首先从svn上拉取前端最新的代码,这里以我们的云平台ITOO为例,ITOO前端的整个文件夹是ITOO-FrontEnd,deploy文件是使用gulp对ITOO-FrontEnd中的html和css,js文件进行了压缩。当然gulp也不仅仅只有压缩的功能,对于gulp的学习以后小编将会在接下来的博客中做详细的分享。1.在/va...原创 2017-12-25 21:33:42 · 1717 阅读 · 15 评论 -
【Angular4学习】--路由的五个对象
前言今天小编根据实例来分享一下路由的五个对象的作用,五个对象RoutesRoutes(路由配置),一般在app.routing.module.ts文件里配置,Routes里面是一组路由对象,每个对象有两个属性:path(路由对象的路径)+component(路由对象的组件),即,当我导航到某一个路径(path)上时,angular会显示哪个组件(component)原创 2018-01-07 22:11:30 · 954 阅读 · 8 评论 -
【Angular4学习】--路由传参一(在查询参数中传递数据)
前言路由时传递参数有什么意义呢?举个简单的例子,我们进入了某宝或某东,点击了某个商品之后会指定跳转到相应的页面,这个时候我们知道在我们点击商品时候页面进行了跳转,从商品陈列页面到了商品详情页面,为什么正好能调到我们点击的那个商品页面呢,因为路由在跳转时传递了点击商品的数据。那么它就是怎么实现传递参数呢?方式路由传递数据的方式有三种,分别是在查询参数中传递数据在路由路径中传递原创 2018-01-08 20:23:13 · 2371 阅读 · 8 评论 -
【Angular4学习】--路由传参二 (在URL中传递数据)
前言:上一篇文章已经介绍了如何路由传递参数的第一种方法:在查询参数中传递参数,这篇文章来分享路由传递参数的第二种方式,在URL中传递参数。第一步:1.修改app-routing.module.ts路由配置关于product的path属性,使其携带id参数 const routes: Routes = [ {path: '', component:Ho原创 2018-01-09 22:00:16 · 6529 阅读 · 10 评论 -
【Angular4学习】--参数快照与参数订阅
前言在上篇文章的demo中,我们采取了参数快照的方式来获取URL传递过来的参数,(详见上篇博文)获取参数的方式不仅仅有参数快照还有参数订阅,那他们之前效果有怎样的差别,实现方式上又有什么不同呢? 小编接下来分享给大家。参数快照展示:出现的问题我们会发现,当点击主页之后再点击商品详情连接,或者商品详情按钮的时候,参数都可以被正确的拿到。 但是点击完商品详情连接再点击商品详原创 2018-01-12 14:21:58 · 1993 阅读 · 11 评论 -
【Angular4学习】--路由重定向
解决的问题当我们变更网站地址了之后,如果用户没有收到变更后的新网址,依旧输入了旧网址能访问我们新发布的网站吗? Angular的路由重定向可以帮你实现。什么是路由重定向?在用户访问一个特定的地址时,将其重定向到另一个指定的地址。示例//当用户访问前者时,路由会自动跳转至后者所指向的页面www.aaa.com ==> www.aaa.com/productswww.原创 2018-01-14 14:29:14 · 1668 阅读 · 9 评论