AngularJS遇到的第一个坑
2016-01-15 17:15
555 查看
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。无需进行手工DOM操作,兼容主流浏览器,与 jQuery 配合良好。
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定使得代码更少,你可以专注于你的应用。
并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
现在让我们仔细看看代码,当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用,然后加载了angular.js,然后声明了一个全局的控制器FirstCtrl(js函数),可以看到在p标签中声明了这个控制器,紧接着使用{{}}表达式绑定数据。
注意:当我们引用AngularJS的1.4.8版本,也就是上面注释的一行,我们的代码会报下面的异常
Argument ‘FirstCtrl’ is not a function, got undefined;
到这里郁闷了一下,心中猜想应该是版本的原因,然后网上搜了一圈,果不其然:
因为从Angular-1.3.0 beta15开始,Angular不再支持全局的Controller!那么如何新版本如何解决这个问题呢,继续往下看。
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
上面的示例中,只有一个作用域 scope,处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。
根作用域:所有的应用都有一个 rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
要调用自定义指令,HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, myselfDirective, 但在使用它时需要以 - 分割, myself-directive:
你可以通过元素名、属性、类名、注释来调用自定义指令。也可以限制你的指令只能通过特定的方式来调用。
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
ng-click指定button的点击事件。
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定使得代码更少,你可以专注于你的应用。
并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
一、Hello World!
AngularJS使用双大括号{{}}语法进行数据绑定;<html ng-app> <head> <!-- <script src="https://code.angularjs.org/1.4.8/angular.js"></script> --> <script src="https://code.angularjs.org/1.2.8/angular.js"></script> <script > function FirstCtrl($scope){ $scope.data = {message: "World"}; } </script> </head> <body> <p ng-controller="FirstCtrl">Hello {{data.message}}!</p> </body> </html>
现在让我们仔细看看代码,当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用,然后加载了angular.js,然后声明了一个全局的控制器FirstCtrl(js函数),可以看到在p标签中声明了这个控制器,紧接着使用{{}}表达式绑定数据。
注意:当我们引用AngularJS的1.4.8版本,也就是上面注释的一行,我们的代码会报下面的异常
Argument ‘FirstCtrl’ is not a function, got undefined;
到这里郁闷了一下,心中猜想应该是版本的原因,然后网上搜了一圈,果不其然:
因为从Angular-1.3.0 beta15开始,Angular不再支持全局的Controller!那么如何新版本如何解决这个问题呢,继续往下看。
二、AngularJS Scope(作用域)
AngularJS 应用组成如下:View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
上面的示例中,只有一个作用域 scope,处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。
根作用域:所有的应用都有一个 rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}} </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes"; }); </script>
三、AngularJS指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。除了 AngularJS 内置的指令外,我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, myselfDirective, 但在使用它时需要以 - 分割, myself-directive:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.angularjs.org/1.4.8/angular.js"></script> </head> <body ng-app="myApp"> <myself-directive></myself-directive> <script> var app = angular.module("myApp", []); app.directive("myselfDirective", function() { return { template : "<p>自定义指令!</p>" }; }); </script> </body> </html>
你可以通过元素名、属性、类名、注释来调用自定义指令。也可以限制你的指令只能通过特定的方式来调用。
<!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 ng-app="myApp"> <myself-directive></myself-directive> <div myself-directive></div> <script> var app = angular.module("myApp", []); app.directive("myselfDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; }); </script> <p><strong>注意:</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p> </body> </html>
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
四、AngularJS事件
下面的例子演示了angularjs配合checkbox,button的一些动作。<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://code.angularjs.org/1.4.8/angular.js"></script> <!-- <script src="https://code.angularjs.org/1.2.8/angular.js"></script> --> <script > //module第一个String参数是该模块的名字,第二个参数是所依赖的模块(这里暂时用不着),返回了myApp这个模块. angular.module('myApp', []).controller('CostCtrl',CostCtrl).controller("FirstCtrl", FirstCtrl); function FirstCtrl($scope){ $scope.data = {message: "World"}; } function CostCtrl($scope) { $scope.cost = 1000; $scope.tax = true; $scope.$watch("cost", function(){ $scope.bill_tax = $scope.cost*0.15; }); $scope.$watch("tax", function(){ $scope.bill_display = $scope.tax?"block":"none"; }); $scope.add = function() { alert('hello'); } } </script> </head> <body > <p ng-controller="FirstCtrl">Hello {{data.message}}!</p> <div ng-controller="CostCtrl"><input type="checkbox" ng-model="tax"/><span>tax</span> <input placeHolder="cost" ng-model="cost"> <p>the money is {{cost|currency:"¥"}}</p><!-- angular过滤器 --> <div style="display:{{bill_display}}"><p>tax is {{bill_tax}}</p><button ng-click="add()">add</button</div> </div> </body> </html>
ng-click指定button的点击事件。
相关文章推荐
- AngularJs表单验证
- AngularJS中实现无限级联动菜单(使用demo)
- 【问题:发现与解决】angularJs指令在dijit控件中的使用
- 实例详解AngularJS实现无限级联动菜单
- angularjs学习资料
- 利用CSS3在Angular中实现动画
- AngularJS内置指令
- angularjs 指令详解 - template, restrict, replace
- angularJs学习第一篇
- AngularJs+ui.route+lazyload按需加载
- 关于angularjs的下拉列表的绑定
- 关于angularjs中的时间控件datepicker
- AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service
- AngularJS学习之directive自定义指令
- Angularjs 服务注册
- 利用CSS3在Angular中实现动画
- 实例详解AngularJS实现无限级联动菜单
- 前端开发入门:AngularJS
- AngularJs 与Jquery的对比分析,超详细!
- AngularJS中实现无限级联动菜单