当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

AngularJS浅析

发表于: 2015-07-13   作者:kvhur   来源:转载   浏览:
摘要: 概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接:http://www.gbtags.com/gb/share/5726.htm Directive 扩展html,给html添加声明语句,以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称,ng是angular的命名空间
概念

AngularJS is a structural framework for dynamic web apps.

了解更多详情请见原文链接:http://www.gbtags.com/gb/share/5726.htm

Directive

扩展html,给html添加声明语句,以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称,ng是angular的命名空间,-后面的部分都是Directive。常用的如:ng-app,ng-cotroller,ng-repeat,ng-model,ng-click等等。

另外,还有一些关于表单验证的directive,如input[email],input[url]等。

scope

为把model里的data暴露给view,我们需要将$scope对象传给controller。$scope是controller与view之间的纽带。而ng-controller能够负责的dom范围,就是controller中$scope的有效区域(正确传递数据,传递正确的数据)。

service

services都是单例的(不知可否参考设计模式中的单例模式去理解),angular中的service有:$location,route,$http等。

当一个app中有一堆controller,其中一些controller实现类似的逻辑(如一个查询功能:发送服务器请求-解析服务器返回的内容存入对象-将对象添加到$scope以显示到view),这时我们就可以定义一个那些controller共用的service,这样做的好处是:1、可以在controller中共享它们,从而减少重复的代码,方便阅读;2、需要的话,多个controller之间能够进行交流,分享状态…

三种方式去创建一个service:

  • Services

语法: module.service( ‘serviceName’, function );

用法:不可配置,内部通过new实例化对象,给this添加属性,然后返回this。

  • Factories

语法: module.factory( ‘factoryName’, function );

用法:不可配置,内部直接创建一个对象,为它添加属性,然后返回这个对象。

  • Providers

语法: module.provider( ‘providerName’, function );

用法:可配置,内部通过$get方法返回一个实例对象。

备注:controller使用serviceName/factoryName/providerName作为参数,通过angular的依赖注入特性获取结果。

filter

声明data被显示给用户的格式,语法:

 {{ expression | filterName : parameter1 : ...parameterN }}

如{{12.9 | currency | number:0 }}显示为$13。常用的filter还有json,lowercase,orderBy等等。

filtername也可以是自定义的处理数据(转化格式)方法的方法名。

优势

angularjs扩展了html,缓解了编写ajax应用的痛苦。

MVC

Model包含app当前状态的数据,用对象来定义如:

var someText = ''; 

View显示数据,在dom中这样展示:``

Controller用来关联M和V,使用$scope对象来传递/操作Model,创建方法如下:

function TextController($scope) { $scope.someText = someText; }

MVC中,焦点应该被放在Model上:应该定义怎样的对象?怎样从服务器接收和保存对象?等等,花些时间考虑这些问题。

数据绑定

利用数据绑定特性,以非常精短的代码,在操作数据的同时实现页面的自动局部刷新。

如下的例子中,当点击button,items数组的对应位置(index)首先被删除,由于div的数量由items决定(ng-repeat),因此当对数组items的删除操作完成时,dom也随之刷新。

  1. <divng-repeat='item in items'>
  2. <span>{{item.title}}</span>
  3. <inputng-model='item.quantity'>
  4. <span>{{item.price | currency}}</span>
  5. <span>{{item.price * item.quantity | currency}}</span>
  6. <buttonng-click="remove($index)">Remove</button>
  7. </div>
 
  1.  
  1. functionCartController($scope){
  2. $scope.items =[{
  3. title:'Paint pots',
  4. quantity:8,
  5. price:3.95
  6. },{
  7. title:'Polka dots',
  8. quantity:17,
  9. price:12.95
  10. },{
  11. title:'Pebbles',
  12. quantity:5,
  13. price:6.95
  14. }];
  15. $scope.remove =function(index){
  16. $scope.items.splice(index,1);
  17. }
  18. }
 

依赖注入

angular要求我们遵循编码规则,按照规定去写代码,使用规定的参数名,这样来自动获取需要的内容。

比如controller中通过serviceName来获取service的返回值。

了解更多详情请见原文链接:http://www.gbtags.com/gb/share/5726.htm

AngularJS浅析

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
参考:http://www.runoob.com/angularjs/angularjs-intro.html http://angularjs.cn/A00n AngularJs
AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同
前台代码起来越多,需要用一种更高效方式整合 MVC只是手段,终极目标是模块化和复用 第一部分:快速
$http是AngularJS 中的一个核心服务,用于读取远程服务器的数据。 以下是存储在web服务器上的 JSON
$http是AngularJS 中的一个核心服务,用于读取远程服务器的数据。 以下是存储在web服务器上的 JSON
文件上传一直是我不熟悉的地方,<a href='https://github.com/nervgh/angular-file-upload/wiki/
AngularJS + CoffeeScript 前端开发环境配置详解 AngularJS 号称 '第一框架' ('The first framework
一、currency 货币格式化 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <me
最近突然发现,Coding.net真是一个神奇的网站。这各网站90%的请求都是通过ajax完成的。可以发现,不
为了更好的解耦,各个框架(Extjs、jquery)的目标都是实现MVC,只是方式不同,而angular采用的是双
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号