本文对 Angular Schematics 进行了介绍，并创建了一个用于创建自定义 Component 的 Schematics ，然后在 Angular 项目中以它为模板演练了通过 Schematics 添加自定义的 Component 。 1. 什么是 Schematics? 简单来说，Schematics 是一个项目处理工具，可以帮助我们对 Angular 项目中的内容进行成批的处理。 比如我们在是使用 Angular CLI 的时候，可能使用过诸如 ng g c myComponent 之类的命令来帮助我们创建一个新 Component ，...
本文介绍了Angular操作cookies方法，分享给大家，具体如下：var setCookie = function(name, value) {var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();//$cookies[name] = value;}; 这是用Javascript写的方法去设置 var getCookie = function(name) {var arr, reg = new RegExp("(^| )" + name + "...
本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考，具体如下： 选项卡一： JavaScript+html+css <!DOCTYPE html> <html><head><meta charset="utf-8"><title>www.gxlcms.com js标签页tab切换</title><style>#div1 .active{background:blue;}#div1 div{width:200px;height:200px;background:gray;border:1px solid black;display:none;}</style><script>window.onload=function (){var oDiv=document.getElem...
一、路由守卫 当用户满足一定条件才被允许进入或者离开一个路由。 路由守卫场景： 只有当用户登录并拥有某些权限的时候才能进入某些路由。 一个由多个表单组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。 当用户未执行保存操作而试图离开当前导航时提醒用户。 Angular提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫，可以通过这些钩子实现上面场景。 CanActivat...
项目开始的时候我们用的对话框是AngularJS的$modal模态框，但是后来发现$modal打开的对话框是相对页面静止的，如果对话框是一个很长的表单，这样体验度就不是很好了，还有$modal传$scope不是很灵活的原因，后来就改用的$ngDialog. 官方的API在这里：https://www.npmjs.com/package/ng-dialog 首先确定你的项目已经安装了$ngDialog需要的相关文件。 接下来一个简单的demo del.html内容如下，就是你的对话框内容，这里比较简单，只是...
什么是PWA PWA（Progressive Web App）利用TLS，webapp manifests和service workers使应用程序能够安装并离线使用。 换句话说，PWA就像手机上的原生应用程序，但它是使用诸如HTML5，JavaScript和CSS3之类的网络技术构建的。 如果构建正确，PWA与原生应用程序无法区分。 PWA 的主要特点包括下面三点： 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现体验 - 快速响应，并且有平滑的动画响应用户的操作粘性 - 像设备上的原生应...
路由高亮是什么？有什么好处？ 当你在做一个后台管理系统，左边是一排路由导航，点击可以进入不同的页面，那么这个路由所在dom元素会添加上样式表示当前是位置。但是一刷新你会发现，这个样式没了...怎么办？ 采用路由高亮：当路由被激活时允许你添加一个class在你添加路由的dom元素上，只有url变化时才会移除此样式。 当前路由被激活或者当前路由处于激活状态表示页面的url中路由和当前dom标签里的路由想匹配。 // 用法概览 @Dire...
本文介绍了Angular5 路由传参，一共3种方法。分享给大家，具体如下： 1.问号后面带的参数，获取参数的方式：ActivatedRoute.queryParams[id] 例如：/product?id=1&name=iphone还可以是： [ routerLink]= "[/books]" [ queryParams]= "{bookname:《活着》} 代码：html <h4>Messages</h4> <p>Total:{{msgs.total}}</p> <div *ngFor="let item of msgs.data"><b>{{item.name}}</b>:<a [routerLink]="[/next,item.id]" [queryParams]="...
目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中路由不仅仅是页面跳转,其中还有一项叫英雄列表跳转英雄详情!在诸多的列表,不可能给每个英雄做一个详情页,于是乎路由参数起到作用了!通过路由传入参数识别那个英雄的详情!现在对于路由传值进行详解,首先一种方式是官网的...
概述 XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨大的，是web安全的头号大敌。 前情提要 angularJs通过“{{}}”...
前言 本文主要给大家介绍了关于以Angular的姿势打开Font-Awesome的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 环境Angular: v5.2.9Font-Awesome: v5.0.10angular-fontawesome: v0.1.0-9无须再用传统的 Web Font 方式以前习惯于 Font-Awesome 的传统方式：页面底部引用一个 font-awesome.min.css 文件，然后在页面中使用 <i class="fa xxx"></i> 放置图标——这在 Angular 里依然可行，不过这并不...
ng-animate 本文讲一下Angular中动画应用的部分。 首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。 那么，刚开始需要在项目的入口html文件中引入Angular框架(angular.js)，然后引入angular.animate.js。 在项目的js入口文件app.js中，新建项目模块，并且添加所依赖的模块ng-Animate(有其他需要的模块...
前言 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。 由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作...
前言 组件是Angular中很重要的一部分，下面这篇文章就来给大家介绍关于Angular入口组件（entry component）与声明式组件的区别，Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。 声明式组件是通过组件声明的selector加载入口组件（entry component）是通过组件的类型动态加载 声明式组件 声明式组件会在模板里通过组件声明的selector加载组件。 示例 @Component({selector: a-cmp,template: `<p>这是A组件</p>` })...
第一篇文章是: "使用angular cli生成angular5项目" ://www.gxlcms.com/article/136621.htm 这篇文章主要是讲生成 Components, Directive, Service, class, interface, enum等等. ng generate <蓝本名> 命令. 该命令的格式是 ng generate <蓝本名> <参数>. 也可以使用--dry-run参数来列出要生成的文件, 而不是真的生成. 例如: ng generate component person, 就会生成一个person.component.ts. ng generate service sales-data 就会...