AngularJs学习笔记7——四大特性之模块化设计

模块化设计

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