Angular 多环境配置

2019-5-19 一诺 js库

实际开发中,我们经常需要配置多个环境,如:开发环境、测试环境、生产环境。 比如接口的地址在不同环境下各有一个地址,如: 开发环境:http://dev.xxx.xxx 测试环境:http://test.xxx.xxx 生产环境:http://www.xxx.xxx Angular给我们提供了一个很方便的方式,就是通过environment变量来控制 1、找到src/environments目录, 用@angular/cli工具创建的项目默认会有environment.prod.ts(生产环境) 和environment.ts(开发环境),为了方便测试环境,我们再新建一个...

阅读全文>>

标签: 多环境

评论(2) 浏览(68)

angular界面引导插件ngx-joyride的使用

2019-4-27 一诺 js库

先看几个常用的jquery引导插件效果 1、intro.js 2、Bootstrap Tour  3、Bootstro.js  4、aSimpleTour  5、Joyride  如果在angular 中也使用上述jquery的插件当然也是可以的,但会产生以下几个问题: 1、要引入jquery库,这就增加的代码量,而且用到的部分并不多,导致代码冗余。 2、因为是基于jquery 的所以对dom的操作较为频繁,性能上也会产生影响。 3、对angular组件化、模块化方式操作不友好,使用较为繁琐。 这时,我们需要一种基于angul...

阅读全文>>

标签: 插件

评论(0) 浏览(48)

angular 中的路由简单的配置详解

2019-4-21 一诺 js库

1.重定向路由配置 const routes: Routes = [ {path:'', redirectTo: '/home', pathMatch:'full'}, {path:'home', component: HomeComponent }, // 默认展示HomeComponnet {path:'about', component: AboutComponent} ]; 作用就是可以指定访问某个路由时跳转到其它路由,如上述所示当访问的是根路由时则直接重定向到home路由,展示HomeComponent组件的内容。 pathMatch: 'full'表示全部符合才...

阅读全文>>

标签: angular

评论(0) 浏览(56)

angular 中的路由守卫CanActivate、CanDeactivate、Resolve

2019-2-26 一诺 js库

一、路由守卫 当用户满足一定条件才被允许进入或者离开一个路由。 路由守卫场景: 1、某些路由用户未登录无法进入(登录) 2、某些路由用户没权限无法进入(权限) 3、不可跳过中间步骤直接访问某一步骤路由(注册流程、步骤条) 4、当用户未执行保存操作而试图离开当前导航时提醒用户(防止误操作) 5、用户进入某路由前获取该路由需要的数据(提升用户体验) Angular提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫,可以通过这些钩子实现上面场景。 CanActivate: 是否允许进入某路由(场景1、2、3) CanDeactivate: 是否允许离开某路由(场景4)...

阅读全文>>

标签: 路由

评论(0) 浏览(47)

前端mvvm框架中双向绑定的原理和实现

2019-1-24 一诺 js库

1、通过Object.defineProperty(obj, prop, descriptor)劫持对象的属性读写,其中obj是要在上面定义属性的对象,prop是要定义或修改的属性名称,descriptor是属性的描述符。描述符中可选get和set键值。get是属性的getter方法,返回属性值;set为setter方法,接受唯一参数,并将该参数的值赋值给属性,get和set的默认值均为undefined。 2、双向绑定的简单实现。 <input type="input" id="input"> <span id="show">&...

阅读全文>>

标签: 底层 框架

评论(0) 浏览(128)

前端路由之angular路由配置的区别#和/

2018-12-9 一诺 js库

先说下什么是前端路由 以前路由都是后台做的,通过用户请求的url导航到具体的html页面,这种无法做单页应用 而一般要前端单页应用项目就会需要用到前端路由 现在我们在前端可以利用 Angular、vue、react等通过配置文件,达到前端控制路由跳转的功能。 前端路由的实现方法 1.通过hash实现 当url的hash发生改变时,不触发网页重载,触发hashchange注册的回调,回调中去进行不同的操作,进行不同的内容展示。 使用hash来实现的话,URI规则中要带上#,路由中#后边的内容就是hash 如 http://localhost:4200/#/home/pa...

阅读全文>>

标签: 路由

评论(0) 浏览(54)

Angular 模块懒加载和预加载策略

2018-6-12 一诺 js库

angular2及以上提供了两个非常实用的特性:懒加载和预加载 一、理论 1. 什么是懒加载? 懒加载也叫延迟加载,在访问到这个模块的时候,Angular才会加载这个模块。 2. 为什么要使用懒加载? 我们知道一个项目做得比较大的时候,模块组件比较多的时候,代码的体积也就相应增加,执行时间相应延长,这样会使得页面首次打开加载时长增大,用户体验下降。使用懒加载可以很好地解决这个问题,让开始只加载需要用户需要的代码,后续用户交互时再加载对应的代码,可以大幅提升首屏用户体验,让用户感觉到首屏很快,但是随之带了的是用户第一次去查看懒加载模块时,这个时候懒加载模块菜开始加载,会有个加载等待的延...

阅读全文>>

标签: angular

评论(1) 浏览(91)

select2 默认不选中以及动态改变数据

2018-6-6 一诺 js库

select2 使用总结 记录 select2 一般比较难查到的功能 特别是     加载数据并默认不选中     加载数据后动态改变数据(包含清空数据) 至于滚动加载、多选、ajax获取数据官网都有演示,这里不做多余演示 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,...

阅读全文>>

标签: select2

评论(0) 浏览(483)

angular 如何在打包发布时清除console信息

2018-5-28 一诺 js库

问题 console一般是我们开发时 用于测试打印到控制台的数据 以便我们调试程序 当项目打包上线时 这些console已然无用 这个时候还在控制台打印出来 如果打印的是一些敏感信息 就没那么安全了 并且还会影响美观 我们如果只是简单的查找代码中的console并删除 会有几个问题 1、工作量比较大(如果你使用console多的话) 2、如果你使用了一些插件,那么插件中的console删起来比较繁琐 3、如果后期想要开发环境上再次打印,则又要重复写和删 分析 那么既然我们开发环境需要而生产环境不需要 那么我们可以通过判断当前环境是开发还是生产 从...

阅读全文>>

标签: angular

评论(0) 浏览(34)

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

2017-10-11 一诺 js库

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

阅读全文>>

标签: angular

评论(0) 浏览(616)

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog