angular1的 伪MVC

以下的代码是自己对angular1的一些理解。如果非要按照mvc的这种模式开发。。可以用以下的这种方式理解。

//userFactorys.js 这是服务方法 return 的方法取得json数据里的值  按照我的理解他属于 Model里的静态方法 也就是MVC中的M

var app = angular.module(‘appFactorys‘,[]);

app.factory(‘Movies‘,[‘$http‘,function($http){var getMoveies = function(page){return $http({method: ‘GET‘,url: ‘http://localhost:3000/moves?page=‘+page,cache:false})    }return {programs:function(page){return getMoveies(page);        }    }}])

//userControllers.js 这是控制器方法 我个人理解他的 作用是 把从服务器取到的Json文件交给本身的 作用域 在让模板循环出来 相当于MVC中的C

var app = angular.module(‘app‘,[‘appFactorys‘,‘appDirectives‘]);            //依赖服务模块，和指令模块（自定义对应 指定module）app.controller(‘getMovie‘,[‘$scope‘,‘Movies‘,function($scope,selMovie){    selMovie.programs(2).success(function(datas, status) {          //服务模块里的方法$scope.Moives = datas;              //把获取到的数据库获取的数据交给 作用域console.log(datas)    }).error(function(data,status){console.log(‘error‘,status)    });}])

//userDirectives.js 这是指令，使用了getMovie控制器(Controller)；这个时候利用getMovie控制器作用域里的$scope.Moives。值交给该模板Movies.html渲染页面 个人理解相当于MVC中的V

var app = angular.module(‘appDirectives‘,[‘app‘,‘appFactorys‘]);app.directive(‘movies‘,function(){return {restrict: ‘E‘,templateUrl: ‘/angularJs/Movies.html‘,replace: false,transclude: true,controller:‘getMovie‘,    }});

//这是movies模板 自己领会 （/angularJs/Movies.html）

<div class="row"><div ng-repeat="movie in Moives" class="col-md-12 " style="box-sizing: border-box; padding: 10px; "><div style="background: #f3f3f3; padding: 10px; border-radius: 5px; list-style: none;"><div class="row"><div class="col-md-1" style="text-align: center;"><img src="/torrent/{{movie._id}}/{{movie.title}}.jpg"></div><div class="col-md-11"><ul style="list-style: none;"><li title="{{movie.title}}">影片名：<span style="color: red;">{{movie.title}}</span></li><li>标签：<span ng-repeat="tag in movie.tags">&nbsp;&nbsp;{{tag}}&nbsp;&nbsp;</span></li><li>出产年月：{{movie.particularYear}}</li><li>地区：<span ng-repeat="region in movie.regions">&nbsp;&nbsp;{{region}}&nbsp;&nbsp;</span></li><li>imdb：{{movie.imdb}}</li></ul></div></div></div></div></div>

以上是MVC化 ，接下来将执行单页面程序化

1、这里需要导入 angular-route.js

2、测试用到两个 json 

稍微将 userFactorys.js 改变一下

var app = angular.module(‘appFactorys‘,[]);

app.factory(‘Movies‘,[‘$http‘,function($http){return {programs:function(page){        //这个方法是查询指定页面电影的所有json数据return $http({method: ‘GET‘,url: ‘http://localhost:3000/moves?page=‘+page,cache:false});        },movieCount:function(){        //这个页面则是查询一共有多少页的电影数据 用来做翻页操作。return $http({method: ‘GET‘,url: ‘http://localhost:3000/moc‘,cache:false})        }    }}])

此时的 userControllers.js 应该是这样的

var app = angular.module(‘appController‘,[‘appFactorys‘,‘appDirectives‘]);app.controller(‘getMovie‘,[‘$scope‘,‘Movies‘,‘$routeParams‘,function($scope,selMovie,$routeParams){

$routeParams.page = $routeParams.page ? $routeParams.page : 1;

var promise = selMovie.programs($routeParams.page).then(function(req){        $scope.Moives = req.datareturn selMovie.movieCount();    }).then(function(req){        $scope.MoivesCount = req.data;console.log($scope.MoivesCount,$scope.Moives)    })

}])

要把原来的方法promise化。 这样作用域 Moives 和 MoivesCount  将会同时有值 （因为查询json同时！） promise化很重要

而 $routeParams.page 这个参数 是路由传过来的

路由 ：userRouter.js

var remoteCamera = angular.module(‘app‘,[‘ngRoute‘,‘appController‘])    .config([‘$routeProvider‘,function($routeProvider) {        $routeProvider.when("/movies/:page", {template: ‘<movies></movies>‘}).otherwise({redirectTo: "/movies/1"})    }]);

需要依赖于ngRoute 那么这个时候 指定路径 /movies/：page

1、page就是给controller 传过去的值  举例 ：路径-> /movies/2就告诉了controller 去走第二页方法那么controller 会告诉服务去找相对json数据 

    返回给 temolate 模板 这个时候模板套用了 <movies></movies> 那么这个标签已经在指令中调整 渲染页面

2、此时的html页面应该是这样的

<div ng-view></div>

同 1  服务 -》 控制器 -》 模板 -》 渲染给 ng-view