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