在这一步，你会在手机详细信息页面让手机图片可以点击。 请重置工作目录： git checkout -f step-10手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 控制器 app/js/controllers.js ... function PhoneDetailCtrl($scope, $ro...
AngularJS支持内置的国际化三种类型的过滤器货币，日期和数字。只需要根据国家的区域纳入相应的JS。默认情况下它处理浏览器的语言环境。例如，要使用丹麦语的语言环境，使用下面的脚本<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 使用丹麦语的语言环境实例 testAngularJS.html <html> <head><title>Angular JS Forms</title> </head> <body><h2>AngularJS Sample Application</h2><d...
个人觉得，要很好的理解AngularJS的运行机制，才能尽可能避免掉到坑里面去。在这篇文章中，我将根据网上的资料和自己的理解对AngularJS的在启动后，每一步都做了些什么，做一个比较清楚详细的解析。 首先上一小段代码（index.html），结合代码我们来看看，angular一步一步都做了些什么。<!doctype html> <html ng-app><head><script src="angular.js"></script></head><body><png-init=" name=World ">Hello {{name}}!</p></b...
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器，模型数据通过$scope对象访问。<script>var mainApp = angular.module("mainApp", []);mainApp.controller("shapeController", function($scope) {$scope.message = "In shape controller";$scope.type = "Shape";}); </script>以下是在上面的例子中需要考虑的重要问题。 $scope被作为第一个参数在其构造器确定指标到控制器。 $scope.messa...
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。 AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。 值 工厂 服务 提供者 常值 值值是简单的JavaScript对象，它是用来将值传递过程中的配置相位控制器。//define a module var mainApp = angular.module("mainApp", []); /...
自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素，并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持，以下列元素的类型来创建自定义指令。 Element directives - 指令遇到时激活一个匹配的元素。 Attribute - - 指令遇到时激活一个匹配的属性...
格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。<table><tr><th>Name</th><th>Marks</th></tr><tr ng-repeat="subject in student.subjects"><td>{{ subject.name }}</td><td>{{ subject.marks }}</td></tr> </table>表格可以使用CSS样式设置样式，如下：<style> table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px; } table tr:nth...
以下指令可用于应用程序数据绑定到HTML DOM元素的属性。S.No.名称描述1ng-disabled禁用一个给定的控制2ng-show显示一个给定的控制3ng-hide隐藏在给定的控制4ng-click表示AngularJS click事件 ng-disabled 指令添加ng-disabled属性到一个HTML按钮，通过它的模型。该模型绑定到复选框，看看以下变化。 <input type="checkbox" ng-model="enableDisableButton">Disable Button <button ng-disabled="enableDisableButton">Click Me!<...
AngularJS支持模块化的方法。模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的js文件中定义的模块，并将其命名为按照module.js文件形式。在这个例子中，我们要创建两个模块。 Application Module - 用于初始化控制器应用程序 Controller Module - 用于定义控制器 应用模块mainApp.js var mainApp = angular.module("mainApp", []);在这里，我们已经声明使用 angular.module 功能的应用程序 mainAp...
模型 - 视图 - 控制器或MVC，MVC是普遍的叫法，是一种软件设计模式，用于开发Web应用程序。模型- 视图 - 控制器模式是由以下三部分组成： 模型/Model - 一个负责维护数据模式的最低水平。 视图/View - 负责显示所有或数据到用户的部分。 控制器/Controller - 软件代码控制Model和View之间的相互作用。 MVC是受欢迎的，因为它隔离了应用逻辑从用户界面层和支持的关注点分离。这里的控制器接收用于该应用程序的所有请求，制备视图所需...
HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式： 1.使用Ajax - 让一台服务器来调用获取相应的HTML页面，并将其设置在HTML控件的innerHTML。 2.使用服务器端包含 - JSP，PHP等Web端服务器技术可以在包括动态页面中的HTML页面。 使用AngularJS，我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面。<div ng-app="" ng-controller="studentController"><div ng-include="main.html"></div><div ng-inc...
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令： ng-app - 该指令启动一个AngularJS应用。 ng-init - 该指令初始化应用程序数据。 ng-model - 此指令定义的模型，该模型是变量在AngularJS使用。 ng-repeat - 该指令将重复集合中的每个项目的HTML元素。 ng-app指令ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用...
AngularJS提供$http控制，可以作为一项服务从服务器读取数据。服务器可以使一个数据库调用来获取记录。 AngularJS需要JSON格式的数据。一旦数据准备好，$http可以用以下面的方式从服务器得到数据。function studentController($scope,$http) { var url="data.txt";$http.get(url).success( function(response) {$scope.students = response; }); }在这里，data.txt中包含的学生记录。 $http服务使Ajax调用和设置针对其学生的属性。...
AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。 <div ng-app="" ng-controller="studentController"> ... </div>在这里，我们已经声明采用ng-controller指令的控制器studentController。作为下一步，我们将定义studentController如下<script> function studentContr...
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。S.No.名称描述1大写转换文本为大写文本。2小写转换文本为小写文本。3货币货币格式格式文本。4过滤器过滤数组中它根据所提供的标准的一个子集。5排序排序提供标准的基础数组。 大写过滤器添加大写的过滤器使用管道符的表达式。在这里，添加了大写过滤器，全部用大写字母打印学生姓名。Enter first name:<input type="text" ng-mode...