angular 学习笔记 (4) -- 路由（单页面操作）

今天写一下把不同模块的控制器分开，写到不同的js文件中：

一：html代码：

电影分类：正在热映，即将上映和top250。

　　　　<ul class="nav nav-sidebar">
          <li auto-focus><a href="#/in_theaters/1">正在热映</a></li>
          <li auto-focus><a href="#/coming_soon/1">即将上映</a></li>
          <li auto-focus><a href="#/top250/1">TOP</a></li>
        </ul>

电影详情：

 <a ng-repeat="item in subjects" href="#/detail/{{item.id}}" class="list-group-item">
</a>

二：js代码：app.js(汇总的js文件)、my_controller.js（电影分类模块的） detail.js（电影详情模块）

app.js

angular.module('myapp',[
    'ngRoute',
    'detail',
    'my_controller'
]).config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({ redirectTo: '/in_theaters/1' });//都不符合路由规则的话，走这里       
}]);

my_controller.js

/**
 * Created by WEIWEI on 2017/6/29.
 */
(function(angular){
    'use strict';
    var my_controller = angular.module('my_controller',['ngRoute','moviecat.services.http']);
    //路由
    my_controller.config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/:category/:page',{
            templateUrl:'movie_list/view.html',
            controller:"all_controller"
        })
    }]);

    //控制器
    my_controller.controller('all_controller',[
        '$scope',
        '$routeParams',
        'HttpService',
        '$route',
        function($scope,$routeParams,HttpService,$route){
        //console.log($routeParams);
            var page = parseInt($routeParams.page); // 当前第几页
            var currentPage = ($routeParams.page-1) * 10;
            $scope.subjects = [];
            $scope.title = 'Loading...';
            $scope.message = '';
            $scope.totalCount = 0;
            $scope.totalPages = 0;
            $scope.nowpage = page;
            //$scope.currentPage = page;
            console.log($scope.nowpage);
            HttpService.jsonp(
                'http://api.douban.com/v2/movie/'+$routeParams.category,
                { start: currentPage, count: 10},
                function(data) {
                    console.log(data);
                    $scope.title = data.title;
                    $scope.subjects = data.subjects;
                    $scope.totalCount = data.total;
                    $scope.loading = false;
                    $scope.$apply();
                    // $apply的作用就是让指定的表达式重新同步
                    //如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()
                    // 来通知AngularJS。这就像告诉AngularJS，你修改了一些models，
                    // 希望AngularJS帮你触发watchers来做出正确的响应。
                });

    //        上下页
            $scope.go = function(page){
                $route.updateParams({ page: page });
            }
    }
    ])
})(angular);

detail.js

(function(angular){
    'use strict';
    var detail = angular.module('detail',['ngRoute','moviecat.services.http']);
    detail.config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/detail/:id',{
            templateUrl:'detail/detail.html',
            controller:"detail_controller"
        })
    }]);
    detail.controller('detail_controller',[
        '$scope',
        'HttpService',
        '$routeParams',
        function($scope,HttpService,$routeParams){

            //$scope.loading = true; // 开始加载
            $scope.subjects = [];
            $scope.title = 'Loading...';
            $scope.message = '';
            $scope.totalCount = 0;
            $scope.totalPages = 0;
            //$scope.currentPage = page;
            HttpService.jsonp(
                'http://api.douban.com/v2/movie/subject/'+$routeParams.id,
                { },
                function(data) {
                    console.log(data);
                    $scope.title = data.title;
                    $scope.subjects = data.subjects;
                    $scope.totalCount = data.total;
                    $scope.loading = false;
                    $scope.$apply();
                    // $apply的作用就是让指定的表达式重新同步
                });

    }])
})(angular);

三： $scope.$apply()、$route、$routeParams、定义全局变量

$scope.$apply()：$apply的作用就是让指定的表达式重新同步

                    //如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()
                    // 来通知AngularJS。这就像告诉AngularJS，你修改了一些models，
                    // 希望AngularJS帮你触发watchers来做出正确的响应。
$route：通过$route.updateParams({ page: page });来修改url的值。
$routeParams：打印$routeParams即可看到当前url的一些参数。
定义全局变量（AppConfig）：先在app.js定义变量（相当于微信小程序的全局变量）

 // 为模块定义一些常量
  .constant('AppConfig', {
    pageSize: 10,
    listApiAddress: 'http://api.douban.com/v2/movie/'
  })

然后再别的js文件中注入AppConfig依赖之后，AppConfig.pageSize即可访问到 拿到 10 。