查看详情

去掉单页应用中的可恶的'#' (hashbang)

随着谷歌开始支持对Ajax站点应用的抓去，那么Angular,Vue或者其他单页应用(SPA) 网站的seo将变得容易得多。但是 # hashbang 符号有着一定的限制。或者那些执着于伪静态url的追求的话，一定是想尽办法去掉这个符号。修改完成之后大家可以参考这个站点fadeit.dk 如何转换为静态路由以及开启html5 mode 前面的例子，大家可以明显看到url中失去了＃，我们看下angular中的代码吧: angular.module('main', []).config(['$locationProvider', function($locationProvider) { ... $locationProvider.html5Mode(true); ... }); 如果你使用的是Apache，则你需要添加重写规则的文件.htcaccess。 RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ 详情 »

查看详情

十个由浅入深的Angular.js面试问题

虽然只有10个问题，但是覆盖了angular开发中的各个方面，有基本的知识点，也有在开发过程中遇见的问题，同时也有较为开放性的问题去辨别面试者的基础水准和项目经验（PS:答案仅供参考～）。 1. ng-show/ng-hide 与 ng-if的区别？ 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show. 2.解释下什么是$rootScrope以及和$scope的区别？ 通俗的说$rootScrope 页面所有$scope的父亲。 我们来看下如何产生$rootScope和$scope吧。 step1:Angular解析ng-app然后在内存中创建$rootScope。 step2:angular回继续解析，找到{{}}表达式，并解析成变量。 step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。 3. 表达式 {{yourModel}}是如何工作的？ 它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$ 详情 »

查看详情

使用ES2015开发Angular1.x 应用指南

关键词:架构, 文件结构, 组件, 单向数据流以及最佳实践 来自 @toddmotto 团队的编码指南 Angular 的编码风格以及架构已经使用ES2015进行重写,这些在Angular 1.5+的变化可以更好帮助您的更好的升级到Angular2.。 这份指南包括了新的单向数据流，事件委托，组件架构和组件路由。 老版本的指南你可以在这里找到, 在这里你能看到目前最新的. 目录 模块架构 1. 基本概念 1. 根 模块 1. 组件模块 1. 公共模块 1. 低 级别模块 1. 可扩展的文件结构 1. 文件命名规范 组件 1. 基本概念 1. 支持的属性 1. 控制器 1. 单向数据流和事件 1. 状态组件 1. 无状态组件 1. 路由组件 指令 1. 基本概念 1. 详情 »

查看详情

[译]使用karma进行angular测试

紧随前文如何对Angular Controller进行单元测试, 但是我们也提到了前文工作流程的不方便，简单总结上前文进行测试的一个流程： 修改测试代码; 刷新浏览器； 查看测试结果； 该方法最大的缺陷就是，我们每次都得手动的去刷新我们的浏览器。但是如果我们需要测试不同的浏览器我们又应该如何处理呢？ 而本文将提出一个自动化测试的方案，从而解决这些问题。 关于Karma Karma是一个由AngularJS 团队创造的JavaScript测试工具。前面我们写过了Jasmine的一篇文章《开始对Angular App进行单元测试》 而Karma提供了非常有用的工具去帮助我们进行Jasminede的测试。 安装 Karma 你在这里可以看到更为详细的安装文章，而本文随后也会概括总结一些。首先你得安装node.js,如果安装了则跳过，没有安装的可以看这里 注意官方文档中有说明，Karma在某些版本的node工作不那么友好。然而作者本身的v0.12.x并没遇见什么问题。打开你的命令行软件，我们输入下面命令， mkdir CalculatorKarma cd CalculatorKarma echo {} >> package.json bash 接下来我么用npm安装karma， npm install karma --save-dev 如果安装成功， package.json中将会有下面内容: { "devDependencies": { " 详情 »

查看详情

[译]如何对Angular Controller进行单元测试

上面一篇文章简单介绍了如何使用 Jasmine 进行JavaScript的单元测试 我们用了一段简单的代码进行计算的测试。 接下来我们将其延伸到我们对Angular Controller的测试中。如果你不太了解angular也没关系，下文也会提及关于Angular的一些知识。 写个简单的Angular App 在开始写测试之前，我们先写一个简单的计算App,它会计算两个数字之和。 代码如下： <html> <head> <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> </head> <body> <!-- This div element 详情 »

查看详情

[译]开始对Angular App进行单元测试（1）

这是一些列文章，陆续翻译整理中... 原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/ @ Bradley Braithwaite 前言 在写测试之前，我们还得对基础的JS的单元测试框架和如何写测试用例等一些问题做一个简要的介绍。 先说说 jasmine ，它算作一个行为驱动开发(behaviour driven development,BBD)的 JavaSciprt的框架，会让人困惑的是，它也可以用测试驱动开发(test driven development,TBD)的思想来写测试。 BBD和TBD两种风格会有些区别，但是使用jasmine确实可以用TBD的方式。jasmine会提供一种结构去组织你的测试以及一些函数来进行代码输出的断言。究竟是TBD还是BBD实际取决于开发者自己的如何去组织自己的测试，当然下文我们仅仅用TBD来进行讲解。 开始你的第一个测试 先建一个项目文件比如jasmine-test,然后粘贴下面的代码到一个html文件中。 <html> <head> <link rel="stylesheet" type="text/ 详情 »