SPA单页面

[Wscats]

AngularJS路由允许我们通过不同的URL访问不同的内容
路由是此链接中的http://127.0.0.1/angular/view/route.html#/home这部分#/home
它的格式是url后面加上#/xxxx，通过**#+标记实现路由跳转，类似锚点
不能直接访问home.html**，因为这是个模版文件
http://127.0.0.1/angular/view/home.html
所以通过AngularJS可以实现多视图的单页Web应用（single page web application，SPA）

1.创建路由
引入路由所需要的route.js文件

<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>

2.包含了ngRoute模块作为主应用模块的依赖模块
angular.module('wsscat',['ngRoute'])

3.使用 ngView 指令

该div 内的HTML内容会根据路由的变化而变化，就是在这个div页面里面实现局部刷新

4.配置$routeProvider，AngularJS$routeProvider用来定义路由规则

app.config(function($routeProvider) {
                //when方法
                $routeProvider.when('/home', {
                    //当路由更改为home的时候，显示home.html页面,并且该页面由homeCtrl控制
                    controller: 'homeCtrl',
                    templateUrl: 'home.html'
                }).when('/detail/:number', {
                    controller: 'detailCtrl',
                    templateUrl: 'detail1.html'
                }).when('/index', {
                    controller: 'indexCtrl'
                }).when('/add', {
                    controller: 'addCtrl',
                    templateUrl: 'add.html'
                })
            })

5.ng-repeat把数组或者数组对象渲染成复数标签

var studentData = [{
            id: 0,
            name: '张同学',
            date: new Date(),
            content:'在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。',
        }, {
            id: 1,
            name: '晨同学',
            date: new Date(),
            content:'在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！',
        }, {
            id: 2,
            name: '李同学',
            date: new Date(),
            content:'Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。',
        }]

把上面的内容用$scope绑定在需要数据的视图并所在的控制器内
$scope.studentData = studentData;
在页面中可以用ng-repeat渲染，ng-repeat不适宜渲染过多的DOM，会引发性能问题

<table class="table table-striped">
    <tr>
        <th>序号</th>
        <th>名字</th>
        <th>时间</th>
    </tr>
    <tr ng-repeat="stu in studentData">
        <td>{{stu.id}}</td>
        <td><a ng-href="#/detail/{{stu.id}}">{{stu.name}}</a></td>
        <td>{{stu.date}}</td>
    </tr>
</table>

6.路由之间的跳转
视图中我们可以这样实现跳转
<a class="btn btn-primary" ng-href="#/add">新增</a>
控制器中我们可以实现这样跳转
window.location.href="#/home";
还可以用angular的方法，但记得要注入$location这个服务
$location.path('home');

7.在控制器中加载我们需要的服务
$http是AngularJS应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据
用$http向后台请求数据，并把数据绑定到视图上
还有常用的两个异步服务$timeout和$interval
当然还能自建服务，并在需要用到的控制器中注入
自建服务必须返回的是对象

app.service('intance',[function(){
                var obj = {};
                obj.addFunc = function(a,b){
                    return a+b;
                }
                obj['name'] = 'wsscat';
                return obj;
                //console.log("这是我的服务");
            }])

用服务提供的方法来对控制器的数据进行操作，或者在控制器之间交换数据

app.service('instance',[function(){
            return {};
        }])

$rootSccope适合在中小型SPA应用中使用，大型应用交换数据，可以用service服务

app.controller('homeCtrl', ['$scope', '$rootScope', 'instance', function($scope, $rootScope, instance) {
            //利用$rootScope交换数据
            $rootScope.exchange = '123';
                        //利用服务交换数据
            instance.name = '123';
            console.log(instance);
        }])

app.controller('detailCtrl', ['$scope', '$rootScope','instance', function($scope, $rootScope, instance) {
            console.log($rootScope.exchange);
            console.log(instance.name);
        }])

8.路由传参数
让**#/detail/:number**路由带参数

app.config(function($routeProvider) {
                //when方法
                $routeProvider.when('/home', {
                    controller: 'homeCtrl',
                    templateUrl: 'home1.html'
                }).when('/detail/:number', {
                    controller: 'detailCtrl',
                    templateUrl: 'detail1.html'
            })

路由之间传递参数
在控制器中利用routeParams服务来读取这个数据

app.controller('detailCtrl', ['$scope', '$rootScope', '$routeParams', function($scope, $rootScope, $routeParams) {
            console.log($routeParams.number);
}])