angular1的 伪MVC

标签：ppc   页面   router   elm   region   pad   rom   data   举例   

以下的代码是自己对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.data
return 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  

angular1的 伪MVC

标签：ppc   页面   router   elm   region   pad   rom   data   举例   

原文地址：http://www.cnblogs.com/dandingjun/p/6088271.html