范围扮演其视图连接控制器的角色一个特殊的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函数，并负责只做一个特定的任务。这也使得他们即维护和测试的单独实体。控制器，过滤器可以调用它们作为需求的基础。服务使用AngularJS的依赖注入机制注入正常。 AngularJS提供例如许多内在的服务，如：$http, $route, $window, $location等。每个服务负责例如一个特定的任务，$http是用来创建AJAX调用，以获得服务器的数据。 $route用来定义路由信息等。内...
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。 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...
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调用和设置针对其学生的属性。...
表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。 使用数字<p>Expense on Books : {{cost * quantity}} Rs</p>使用字符串<p>Hello {{student.firstname + " " + student.lastname}}!</p>使用对象<p>Roll No: {{student.rollno}}</p>使用数组<p>Marks(Math): {{marks[3]}}</p>例子下面的例子...
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...
AngularJS ng-list 指令AngularJS 实例转换用户的输入为数组: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app=""><p>在输入框中，输入一些文本，并使用逗号分隔它们：</p><input ng-model="customers" ng-list/><p>当使用 ng-list 指令时，你的输入信息会转换为数组，如下所示：</p><pre>{{customers}}</p...
AngularJS ng-model 指令AngularJS 实例绑定输入框的值到 scope 变量中： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"><p>input 输入框的值绑定了变量 "name" :</p> {{name}}</div><script> var app = angular.module(myApp, []); app.controll...