1.1. WebAPI
API 应用程序编程接口，简单来说，就是：方法
依赖于Web而提供的API称为： WebAPI ，通过URL实现。
可以把 WebAPI 看作是有 输入和输出（I/O） 的方法
webapi就相当于函数
webapi的参数（?username=小明&pwd=123465） 相当于 函数参数
function fn(username, pwd) {} fn(\'小明\', 123456)
webapi接口返回的数据，就相当于函数的返回值
1.2. 豆瓣电影项目
1.2.1. 豆瓣电影API
1 输入上述网址
2 点击最上部的开发文档，进入 豆瓣API快速入门
3 从该页面中找到 \'https://api.douban.com/v2/\' 这是所有API的URL地址的前半部分
4 点击左侧菜单中的 \'豆瓣Api V2（测试版）\'，进入 豆瓣Api V2（测试版）
5 将页面滑动到底部，找到 \'电影Api V2\'，点击，然后会进入到 Movie API Doc 页面
6 在该页面中即可找到："正在热映"、"即将上映"、"Top250"
1.2.2. 模块的划分
首页模块、电影详情页模块
有三个模块： "正在热映"、"即将上映"、"Top250"
各个模块之间相互独立， 主模块中引入单个模块即可！
1.2.3. 电影案例思路
- 1 首页模块的搭建
- 2 正在热映、即将上映、Top250模块的搭建
- 3 通过$http服务获取数据，展示列表（in_theaters）
- 4 创建跨域服务，获取数据，展示列表
- 5 实现分页功能
- 6 其他两个模块的功能实现
- 7 统一实现三个模块的功能
- 8 添加加载动画
- 9 导航栏焦点状态高亮处理
- 10 实现搜索功能
- 11 实现电影详情页
1.2.4. ng-src
- 作用：设置图片的src属性
- 目的：为了解决浏览器优先解析img的src属性的问题
- 其他属性：
ng-href
<img ng-src="{{item.iamges.large}}" alt="">
1.3. $http服务
- 说明：提供了XHR的功能，类似于jQuery中的$.ajax()
1.3.1. $http.get
- 作用：发送get请求
- 语法：
$http.get(url, [option])
app.controller(\'DemoController\', [\'$scope\', \'$http\', function($scope, $http) {
// 路径最好使用绝对路径
$http.get(\'url\').then(function(response) {
// 成功的回调函数
}, function() {
// 失败的回调函数
});
}]);
1.4. JSONP -实现跨域
1.4.1. JSONP跨域原理分析
- 动态创建script标签并添加到页面中，浏览器会根据script标签的src属性发送请求
- script标签的src属性带有：\'?callback="jsonpcallback"\' 参数
- 由服务器返回的是：函数调用，格式为：\';jsonpcallback({})\'
1.4.2. 其他跨域方式
window.name：同一个标签也中的页面共享同一个 name 属性iframepostMessage
1.5. 2 $http.jsonp -实现跨域
- 说明：angular为了防止全局污染，把JSONP的回到函数放在
angular.callbacks对象中 - 注意：豆瓣API 支持JSONP方式的调用，但是不支持包含点的情况！
- 结论：无法使用angular的内置 $http.jsonp 跨域访问豆瓣API中的数据
$http.jsonp("url地址?callback=JSON_CALLBACK").then();
// 获取手机号码归属地
// http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&callback=JSON_CALLBACK×tamp=\' + (new Date()-0)
1.6. $scope.$apply()
- 作用：强制让 angular 监视数据的变化
- 注意：angular的内置方法，会自动调用$apply执行脏检查
- 说明：
1 angular代码执行会触发 Dirty Check 机制，进行数据的双向绑定
2 异步操作是在angular代码执行完毕之后才执行的
3 也就是说，angular代码执行完了，脏检查已经执行完毕，才执行的异步回调
4 此时，可以在异步操作中手动调用 $scope.$apply() 方法告诉angular让其立即执行一次 Dirty Check
5 执行完毕，angular知道了数据变化，就会展示出我们想要的数据
如果没有调用 $scope.$apply，数据已经改变了，但是双向绑定没有触发。
1.7. 自定义指令
1 自定义指令用于扩展和增强HTML
2 用于封装一些常用而且共用的功能
3 AngularJS仍然有DOM操作,所有的DOM操作都应该集中在自定义指令中
4 内部指令基本满足我们平时开发的需求, 少数情况的一些特殊需求,会用到自定义指令
1.7.1. 创建指令
- 语法：
模块.directive(\'指令名称\', callback) - 说明：创建指令的语法与创建控制器的语法完全相同
// 第一个参数：表示指令的名称，使用驼峰命名法，在视图中使用时修改为`-`分割的形式
// 第二个参数：是一个回调函数，让用户设置该指令的行为
angular.module(\'testApp\', [])
.directive(\'myBtn\', [function() {
return {};
}]);
1.7.2. 指令常用属性说明
<!-- 标签 -->
<my-btn></my-btn>
<!-- 类名 -->
<div class="my-btn"></div>
<!-- 注释 -->
<!-- directive:my-btn -->
<!-- 属性 -->
<div my-btn></div>
1.7.3. 参考文章
发表于 2017-07-08 18:50 Leo扶风 阅读(446) 评论(0) 编辑收藏举报