AngularJS入门教程引导程序

2016年08月24日 18 阅读

我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。进入angular-phonecat目录，运行如下命令：git checkout -f step-0该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。运行以下命令：nod...

AngularJS入门教程之静态模板详解

2016年08月24日 20 阅读

为了说明angularJS如何增强了标准HTML，我们先将创建一个静态HTML页面模板，然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。在本步骤中，我们往HTML页面中添加两个手机的基本信息，用以下命令将工作目录重置到步骤1。git checkout -f step-1请编辑app/index.html文件，将下面的代码添加到index.html文件中，然后运行该应用查看效果。app/index.html<ul><...

AngularJS入门教程之AngularJS 模板

2016年08月24日 20 阅读

是时候给这些网页来点动态特性了——用AngularJS！我们这里为后面要加入的控制器添加了一个测试。一个应用的代码架构有很多种。对于AngularJS应用，我们鼓励使用模型-视图-控制器（MVC）模式解耦代码和分离关注点。考虑到这一点，我们用AngularJS来为我们的应用添加一些模型、视图和控制器。请重置工作目录：git checkout -f step-2我们的应用现在有了一个包含三部手机的列表。步骤1和步骤2之间最重要的不同在下面列出。，你可以到Gi...

AngularJS入门教程之迭代器过滤详解

2016年08月24日 19 阅读

我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。请重置工作目录：git checkout -f step-3我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的...

AngularJS入门教程之双向绑定详解

2016年08月24日 19 阅读

在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。请重置工作目录：git checkout -f step-4你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制电话排列的顺序。步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。模板app/index.htmlSearch: <input ng-model="...

Javascript中apply、call、bind的巧妙使用

2016年08月24日 21 阅读

apply、call在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。先来一个栗子：function fruits（） {}fruits.prototype = {color: "red",say: function（） {...

JavaScript中函数声明与函数表达式的区别详解

2016年08月24日 23 阅读

前言在ECMAScript中，有两个最常用的创建函数对象的方法，即使用函数表达式或者使用函数声明。对此，ECMAScript规范明确了一点，即是，即函数声明 必须始终带有一个标识符（Identifier），也就是我们所说的函数名，而函数表达式则可以省略。下面看看这两者的详细区别介绍。什么是 Function Declaration（函数声明）？Function Declaration 可以定义命名的函数变量，而无需给变量赋值。Function Declar...

AngularJS入门教程之XHR和依赖注入详解

2016年08月24日 18 阅读

到现在为止，我们使用是硬编码的三条手机记录数据集。现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集。我们将使用AngularJS的依赖注入（dependency injection （DI））功能来为PhoneListCtrl控制器提供这个AngularJS服务。请重置工作目录：git checkout -f step-5刷新浏览器，你现在应该能看到一个20部手机的列表。步骤4和步骤5之间最重要的不同在下面列出。你可以在G...

AngularJS之依赖注入模拟实现

2016年08月24日 14 阅读

一、概述AngularJS有一经典之处就是依赖注入，对于什么是依赖注入，熟悉spring的同学应该都非常了解了，但，对于前端而言，还是比较新颖的。依赖注入，简而言之，就是解除硬编码，达到解偶的目的。下面，我们看看AngularJS中常用的实现方式。方法一：推断式注入声明，假定参数名称就是依赖的名称。因此，它会在内部调用函数对象的toString（）方法，分析并提取出函数参数列表，然后通过$injector将这些参数注入进对象实例。如下：//方法一：推断式注...

AngularJS入门教程之链接与图片模板详解

2016年08月24日 18 阅读

这一步，你会为手机列表的手机添加缩略图以及一些链接，不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。请重置工作目录：git checkout -f step-6现在你应该能够看到列表里面手机的图片和链接了。步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。数据注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接。这些url现在指向app/img/phones/目录。app/pho...

AngularJS入门教程之路由与多视图详解

2016年08月24日 18 阅读

在这一步，你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。请重置工作目录：git checkout -f step-7注意到现在当你转到app/index.html时，你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来。当你点击一个手机链接时，一个手机详细信息列表也被显示了出来。步骤6和步骤7之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。多视图，路由和布局模板我们的...

js 获取当前web应用的上下文路径实现方法

2016年08月24日 12 阅读

js 获取当前web应用的上下文路径实现方法//js webcontextvar webroot=document.location.href;webroot=webroot.substring（webroot.indexOf（"//"）+2,webroot.length）; webroot=webroot.substring（webroot.indexOf（"/"）+1,webroot.length）;webroot=webroot.substring（...

JS获取当前使用的浏览器名字以及版本号实现方法

2016年08月24日 12 阅读

工作中需要通过JS去获取当前使用的浏览器的名字以及版本号，网上大堆资料都有一个关键词是 navigator.appName，但是这个方法获取的浏览器的名字只有两种要么是IE要么就是Netscap，倒是可以用来判断是否使用了IE，但是我想获取具体的浏览器产品名字比如 Firefox，Chrome等。所以只好通过navigator.userAgent，但是这个字符串是非常长的，分析他的特征，通过正则表达式来解决这个问题是不错的方法。（1） 获取浏览器名字+版本...

AngularJS应用开发思维之依赖注入3

2016年08月24日 18 阅读

找不到的API？AngularJS提供了一些功能的封装，但是当你试图通过全局对象angular去 访问这些功能时，却发现与以往遇到的库大不相同。$http比如，在jQuery中，我们知道它的API通过一个全局对象：$ 暴露出来，当你需要 进行ajax调用时，使用$.ajax（）就可以了。这样的API很符合思维的预期。AngularJS也暴露了一个全局对象：angular，也对ajax调用进行封装提供了一个 $http对象，但是，但是，当你试图沿用旧经验访问...

JS获取当前页面名称的简单实例

2016年08月24日 15 阅读

JS获取当前页面名称的简单实例// 取当前页面名称（不带后缀名）function pageName（）{var a = location.href;var b = a.split（"/"）;var c = b.slice（b.length-1, b.length）.toString（String）.split（"."）;return c.slice（0, 1）;} //取当前页面名称（带后缀名）function pageName（） { var strUr...

详解Angular中$cacheFactory缓存的使用

2016年08月24日 14 阅读

最近在学习使用angular,慢慢从jquery ui转型到用ng开发，发现了很多不同点，继续学习吧； 首先创建一个服务，以便在项目中的controller中引用，服务有几种存在形式，factory（）;service（）;constant（）;value（）;provider（）;其中provider是最基础的，其他服务都是基于这个写的，具体区别这里就不展开了，大家可以看看源码；服务是各个controller之间通话的重要形式，在实际项目中会用的很多，...

AngularJS入门教程之更多模板详解

2016年08月24日 21 阅读

在这一步，你将实现手机详细信息视图，这个视图会在用户点击手机列表中的一部手机时被显示出来。请重置工作目录：git checkout -f step-8现在当你点击列表中的一部手机之后，这部手机的详细信息页面就会被显示出来。为了实现手机详细信息视图我们将会使用$http来获取数据，同时我们也要增添一个phone-detail.html视图模板。步骤7和步骤8之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。数据除了phones.json，ap...

Angular中$cacheFactory的作用和用法实例详解

2016年08月24日 14 阅读

先说下缓存：一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。$cacheFactory介绍：$cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象，可以使用$cacheFactory通过一个ID和capacity。其中，ID是一个缓存对象的名称，capacity则...

jQuery中实现prop（）函数控制多选框（全选,反选）

2016年08月24日 14 阅读

今天看了jQuery手册，对prop（）函数又多了一点认识，记忆力不好，记录下来。prop（） : 获取匹配元素集中第一个元素的值判断checkbox中的第一个是否被选中：$（":checkbox"）.prop（"checked"）; //如果第一个checkbox被选中返回true,否则返回false.禁用和选中页面上的所有复选框：$（"input[type="checkbox"]"）.prop（"disabled", true）;$（"input[ty...

javascript设计模式Constructor（构造器）模式

2016年08月24日 15 阅读

Constructor是一种在内存已分配给该对象的情况下，用于初始化新创建对象的特殊方法。Object构造器用于创建特定类型的对象–准备好对象以备使用，同事接收构造器可以使用参数，以在第一次创建对象时，设置成员属性和方法值。对象创建 创新新对象，在javascript中通常有两种方法：1.对象直面量方法 var newObj = {};2.构造器的简洁方法 var newObj = new Object（）; 在Object构造器为特定的值创建对象封装，或...