模块化设计
1.引用自定义模块并调用
自定义模块中,如果有一些服务、封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块)
var app02 = angular.module('fan02',['ng','fan']);
就调用fan02模块中所定义的东西
2.ng内置的模块的用法
(1) ngRoute模块(路由模块)
AngularJS是一个开源的js框架。用在数据操作比较频繁的场景下,用于SPA应用
单页面应用的工作原理:
1.页面url:http://127.0.0.1/index.html#/路由地址
2.浏览器首先解析基础页面index.html,再解析路由地址
3.查找路由词典,#/startàstart.html#/mainàmain.html
4.得到当前url中路由地址所对应的真实模板页面地址
5.发起ajax请求,获取目标模板页面,插入到当前的DOM树
使用ngRoute来实现SPA的步骤
1.创建一个完整的HTML页面,引入angular.js、angular-route.js
2.创建自定义模块,在依赖列表中依赖ng,ngRoute
3.在index.html的body中声明一个容器(盛放代码片段)
实现方式:使用ngView指令声明一个容器
4.创建代码片段
5.配置路由词典
$routeProvider.when(‘/start’,{templateUrl:‘start.html’});
6.测试
使用SPA,怎么实现页面间的跳转
1.修改地址栏中的路由地址
2.超链接
3.js
$location.path(‘路由地址’);
调用控制器的时候,有两种方式:
1.直接使用ng-controller=’’
2.在路由词典中,在对应路由地址的对象中添加controller属性:controller:’’;
如果多个控制器需要用到相同的变量或者方法,可以将它放在父元素所对应的控制器中;子元素是可以调用父元素中定义好的方法或者变量。(parentCtrl)
SPA,如何实现带参数的模板页面间的跳转
1.分清发送方和接收方
发送方:’/start/200’
接收方:
2.配置接收方路由
.when('/myPay/:price',{templateUrl:'tpl/pay.html'})
3.发送
<a href='#/myPay/200'></a>
4.接收到参数
$routeParams.price