angular.js[1]
2016-01-11 18:34
656 查看
什么是angular.js ?
angular.js是的创新点在于依赖注入和数据绑定,这将我们从繁杂的DOM操作中解放出来。
AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
AngularJS应用引导过程有3个重要点:
注入器(injector)将用于创建此应用程序的依赖注入(dependency injection);
注入器将会创建根作用域作为我们应用模型的范围;
AngularJS将会链接根作用域中的DOM,从用ngApp标记的HTML标签开始,逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕,它将继续侦听浏览器的HTML触发事件,如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生,AngularJS将会自动检测变化,并作出相应的处理及更新。
一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。
在AngularJS中,一个视图是模型通过HTML模板渲染之后的映射。这意味着,不论模型什么时候发生变化,AngularJS会实时更新结合点,随之更新视图。
比如视图组件被AngularJS用下面这个模板构建出来
1 在
标签里面的ng-repeat=”phone in phones”语句是一个AngularJS迭代器。这个迭代器告诉AngularJS.。使用
标签作为模板,为列表中的每一部手机创建一个
元素。
2 而包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是,这里的表达式实际上是我们应用的一个数据模型引用,这些我们在PhoneListCtrl控制器里面都设置好了。
angular.js学习网址
我们在控制器中使用AngularJS服务
1 directive
代码如下
然后看这个restrict ,它限制directive为指定的声明方式。如果省略的话,directive将默认为A:
replace -它的默认值是false。 如果设置replace 为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理
当restrict使用默认值,也就是不定义restrict的时候,可以用来绑定函数
angular.js是的创新点在于依赖注入和数据绑定,这将我们从繁杂的DOM操作中解放出来。
AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定; 使用DOM控制结构来实现迭代或者隐藏DOM片段; 支持表单和表单的验证; 能将逻辑代码关联到相关的DOM元素上; 能将HTML分组成可重用的组件。
AngularJS应用引导过程有3个重要点:
注入器(injector)将用于创建此应用程序的依赖注入(dependency injection);
注入器将会创建根作用域作为我们应用模型的范围;
AngularJS将会链接根作用域中的DOM,从用ngApp标记的HTML标签开始,逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕,它将继续侦听浏览器的HTML触发事件,如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生,AngularJS将会自动检测变化,并作出相应的处理及更新。
一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。
在AngularJS中,一个视图是模型通过HTML模板渲染之后的映射。这意味着,不论模型什么时候发生变化,AngularJS会实时更新结合点,随之更新视图。
比如视图组件被AngularJS用下面这个模板构建出来
<body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body>
1 在
标签里面的ng-repeat=”phone in phones”语句是一个AngularJS迭代器。这个迭代器告诉AngularJS.。使用
标签作为模板,为列表中的每一部手机创建一个
元素。
2 而包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是,这里的表达式实际上是我们应用的一个数据模型引用,这些我们在PhoneListCtrl控制器里面都设置好了。
angular.js学习网址
app.controller('PhoneListCtrl', function($scope,$http) { $http.get('phone.json').success(function(data) { $scope.phones = data; }); });
$http向Web服务器发起一个HTTP GET请求,索取phone.json(注意,url是相对于我们的index.html文件的)。服务器用json文件中的数据作为响应。
我们在控制器中使用AngularJS服务
$http向你的Web服务器发起一个HTTP请求,以此从phones.json文件中获取数据。
$http仅仅是AngularJS众多内建服务中之一,这些服务可以处理一些Web应用的通用操作。AngularJS能将这些服务注入到任何你需要它们的地方。
1 directive
代码如下
var app= angular.module('app',[]) app.directive('hello',function () { return { restrict:'E' , replace: true, template:'<div>hello movie</div>' } })
然后看这个restrict ,它限制directive为指定的声明方式。如果省略的话,directive将默认为A:
E - 元素名称: <my-directive></my-directive> A - 属性名: <div my-directive=”exp”></div> C - class名: <div class=”my-directive:exp;”></div> M - 注释 : <!-- directive: my-directive exp -->
replace -它的默认值是false。 如果设置replace 为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理
当restrict使用默认值,也就是不定义restrict的时候,可以用来绑定函数
var app= angular.module('app',[]) app.directive('mousein',function () { return function (scope,ele,attr) { ele.bind('mouseenter',function () { ele.removeClass("btn-danger").addClass("btn btn-success") }) } }) app.directive('mouseout',function () { return function (scope,ele,attr) { ele.bind('mouseleave',function () { ele.removeClass("btn-success").addClass("btn-danger") }) } })
相关文章推荐
- 阅读zepto.js的core中的Core methods
- JavaScript setInterval()執行clearInterval() 再恢復setInterval()
- JavaScript简明教程
- 深入理解Javascript面向对象编程
- js控制div层背景半透明
- Jstorm 集群搭建过程/Jstorm集群一键安装部署
- javascript中4种类型识别的方法
- javascript----对象参数的引用传递
- 鼠标滚动插件smoovejs和wowjs
- mina的编码和解码以及断包的处理,发送自己定义协议,仿qq聊天,发送xml或json
- js中的闭包理解一
- JS正则表达式使用详细分析
- Web开发学习记录
- JS正则表达式验证账号、手机号、电话和邮箱
- js文件中$符号冲突
- JavaScript跨域总结与解决办法
- EJS 中文文档
- JavaScript几种类工厂实现原理剖析
- JavaScript里的类和继承
- js 编写简单插件