控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。 当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于Angularjs会自动实例化控制器，所以我们只需要写构造函数即可。下面的例子展示了控制器初始化：function my Controller($scope){$scope.msg="hello,world!"; }上面这个创建控制器的方...
AnularJS的过滤器用来格式化需要展示给用户的数据，有很多实用的内置过滤器，也可以自己编写。 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串 转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器： {{ name | uppercase }} 在JavaScript代码中可以通过$filter来调用过滤器。例如，在JavaScript代码中使用lowercase 过滤器：app.controller('DemoController', ['$scope...
写在前面：由于directive部分是angularjs中的重中之重，所以会分多篇章进行讲解。本章主要讲解directive返回对象中比较简单的属性 angularjs中使用.directive()来定义指令，该方法接收两个参数：name（指令的名字）、factory_function（该函数定义指令的全部行为，返回一个对象） 栗子：//index.js angular.module('myApp',[]); myApp.directive('myDirective',function() {return {};});返回对象中包含以下属性及方法： 1：restri...
在涉及GUI程序开发的过程中，常常有模态对话框以及非模态对话框的概念 模态对话框：在子界面活动期间，父窗口是无法进行消息响应。独占用户输入非模态对话框：各窗口之间不影响 主要区别：非模态对话框与APP共用消息循环，不会独占用户。模态对话框独占用户输入，其他界面无法响应 本文内容 Angular JS 实现模式对话框。基于 AngularJS v1.5.3 和 Bootstrap v3.3.6。 项目结构图 1 项目结构 运行结果图 1 运行结果：大模态 index.h...
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建议大家...
对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。 Okay，废话不多说。为了弄明白angular JS为何物，我先是从Scope开始。那么什么是Scope呢？借用官方文档的一段话：代码如下: “scope is an object that refers to the application model. It is an execution context for expressions. Scopes a...
模板和数据的基本运作流程如下： 用户请求应用起始页面 用户的浏览器向服务器发起一次http连接，然后加载index.html页面，这个页面包含了模板 angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板的边界 angular遍历模板，查找指定和绑定关系，将触发一些列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后，应用将会启动起来，并将模板转换成DOM视图 连接到服务器去加载需要展示给用户的其他...
src和href属性 Angularjs中src应写成ng-src，href应写成ng-href 例如：代码如下:Some text表达式 在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数组、和对象符号等 尽管我们可以使用表达式做很多事情，但是表达式是使用一个自定义的解释器来执行的(Angular的一部分)，而不是用Javascript得eval()函数执行的，所以局限性较大。 虽然很多方面这里的表达式比Javascript更严格，但是他们对undefined和null的容错性...
在讲angularjs的模块之前，我们先介绍一下angular的一些知识点： AngularJS是纯客户端技术，完全用Javascript编写的。它使用的是网页开发的常规技术(HTML,CSS,Javascript)，目的是让网页应用开发更快更容易。 AngularJS简化应用开发的一个重要方法是，将一个些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作。它们包括： 1.DOM操作 2.设置事件的监听 3.输入验证，因为AngularJS会处理大部分这些操作，...
今天我们来了解一下AngularJS的内置过滤器先来看看这些内置过滤器使用方法: 一个过滤器，不带参数的情况 {{expression | filter}}一个过滤器，带参数的情况 {{expression | filter:arguments}}一个过滤器，带多个参数的情况 {{expression | filter: arg1: arg2: ...}}多个过滤器，不带参数的情况 {{expression | filter1 | filter2 | ...}}下面我们分别使用以下AngularJS的内置过滤器 currencycurrency允许我们设置自己的货币符号，...
表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。 使用数字Expense on Books : {{cost * quantity}} Rs使用字符串Hello {{student.firstname + " " + student.lastname}}!使用对象Roll No: {{student.rollno}}使用数组Marks(Math): {{marks[3]}}例子 下面的例子将展示上述所有表达式。 test...
AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。 事件 AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。ng-click ng-dbl-click ng-mousedown ng-mouseup ng-mo...
表格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。NameMarks{{ subject.name }}{{ subject.marks }}表格可以使用CSS样式设置样式，如下：table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px; } table tr:nth-child(odd) {background-color: #f2f2f2; } table tr:nth-child(even) {background-color: #ffffff; }例子 下面的例子将展示...
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。小写过滤器 添加小写的过滤器，使用管道符的表达式。在这里添加小写过滤器，以小写字母打印学生姓名。Enter first name: Enter last name: Name in Upper Case: {{student.fullName() | lowercase}}货币滤波器 加币过滤器使用管道符返回数的表达式。在这里，我们添加了过滤器，货币使用货币格式的打印费用。Enter fees: fees: {...
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器，模型数据通过$scope对象访问。var mainApp = angular.module("mainApp", []);mainApp.controller("shapeController", function($scope) {$scope.message = "In shape controller";$scope.type = "Shape";});以下是在上面的例子中需要考虑的重要问题。$scope被作为第一个参数在其构造器确定指标到控制器。 $scope.message 和 $scope.typ...