初学者眼中的的Angularjs(三)
2017-04-18 11:09
274 查看
八、服务
服务是一个对象或函数,对外提供特定的功能。8.1内置服务
1、$location是对原生Javascript中location对象属性和方法的封装。
2、timeout&interval对原生Javascript中的setTimeout和setInterval进行了封装。
3、$filter在控制器中格式化数据。
4、$log打印调试信息
5、$http用于向服务端发起异步请求。
同时还支持多种快捷方式如http.get()、http.post()、$http.jsonp。
注:各参数含义见代码注释。
8.2自定义服务
通过上面例子得知,所谓服务是将一些通用性的功能逻辑进行封装方便使用,AngularJS允许将自定义服务。
1、factory方法
2、service方法
3、value方法定义常量
在介绍服务时曾提到服务本质就是一个对象或函数,所以自定义服务就是要返回一个对象或函数以供使用。
九、模块加载
AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。9.1配置块
1、通过config方法实现对模块的配置,AngularJS中的服务大部分都对应一个“provider”,用来执行与对应服务相同的功能或对其进行配置。
比如$log、$http、$location都是内置服务,相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。
下图以$log为例进行演示,修改了配置
下图以$filter为例进行演示,实现相同功能
9.2运行块
服务也是模块形式存在的对且对外提供特定功能,前面学习中都是将服务做为依赖注入进去的,然后再进行调用,除了这种方式外我们也可以直接运行相应的服务模块,AngularJS提供了run方法来实现。
不但如此,run方法还是最先执行的,利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行,比如验证用户是否登录,未登录则不允许进行任何其它操作。
注:此知识点意在了解AngularJS的加载机制。
十、路由
一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键。10.1 SPA
SPA(Single Page
Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个“原生”应用。
在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,所以当再次刷新页面时新添加的DOM元素会“丢失”,通过单页面应可以很好的解决这个问题。
10.2 路由
在后端开发中通过URL地址可以实现页面(视图
4000
)的切换,但是AngularJS是一个纯前端MVC框架,在开发单页面应用时,所有功能都在同一页面完成,所以无需切换URL地址(即不允许产生跳转),但Web应用中又经常通过链接(a标签)来更新页面(视图),当点击链接时还要阻止其向服务器发起请求,通过锚点(页内跳转)可以实现这一点。
实现单页面应用需要具备:
a、只有一页面
b、链接使用锚点
通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化,进而可以实现为不同的锚点准不同的视图,单页面应用就是基于这一原理实现的。
AngularJS对这一实现原理进行了封装,将锚点的变化封装成路由(Route),这是与后端路由的根本区别。
在1.2版前路由功能是包含在AngularJS核心代码当中,之后的版本将路由功能独立成一个模块,下载angular-route.js
10.2.1 使用
1、引入angular-route.js
2、实例化模块(App)时,当成依赖传进去(模块名称叫ngRoute)。
3、配置路由模块
4、布局模板
通过ng-view指令布局模板,路由匹配的视图会被加载渲染到些区域。
10.2.1 路由参数
1、提供两个方法匹配路由,分别是when和otherwise,when方法需要两个参数,otherwise方法做为when方法的补充只需要一个参数,其中when方法可以被多次调用。
2、第1个参数是一个字符串,代表当前URL中的hash值。
3、第2个参数是一个对象,配置当前路由的参数,如视图、控制器等。
a、template 字符串形式的视图模板
b、templateUrl 引入外部视图模板
c、controller 视图模板所属的控制器
d、redirectTo跳转到其它路由
4、获取参数,在控制中注入$routeParams可以获取传递的参数
十一、其它
11.1 jQuery在没有引入jQuery的前提下AngularJS实现了简版的jQuery
Lite,通过angular.element不能选择元素,但可以将一个DOM元素转成jQuery对象,如果引提前引入了jQuery则angular.element则完全等于jQuery。
11.2 bower
基于NodeJS的一个静态资源管理工具,由twitter公司开发维,解决大型网站中静态资源的依赖问题。 npm node package
manager 1、依赖NodeJS环境和git工具。 2、npm install -g bower安装bower 3、bower
search 查找资源信息 4、bower install 安装(下载)资源,通过#号可以指定版本号 5、bower info
查看资源信息 6、bower uninstall 卸载(删除)资源
相关文章推荐
- 初学者眼中的的Angularjs(一)
- 初学者眼中的的Angularjs(二)
- AngularJS 初学者必看 带你认识AngularJS
- 谨记初学者必须掌握的AngularJS技术要点清单
- 初学者眼中的计算机
- angularjs初学者知识点总结1:对于不同module间的依赖注入
- asp.net mvc中用angularJs写的增删改查的demo。初学者,求指点。。
- 嵌入式Linux初学者眼中的世界
- 初学者眼中的互联网产品设计
- angularjs 初学者的坑
- jQuery开发者眼中的AngularJS
- jQuery开发者眼中的AngularJS
- jQuery开发者眼中的AngularJS
- 转 框架页有Frame、Iframe、Frameset 3个标记,初学者容易将三者混淆,下面分别讲解三者的区别。
- angularjs UI控制其分离,scope应用及$watch观察模型变化
- 各角色眼中的性能测试
- AngularJS 表达式
- angularjs深度剖析与最佳实践 -- 阅读笔记
- c++初学者报道
- 《我眼中的性能测试工程师》摘录