RestAngular 最佳实践
Best practice of RestAngular
所以我开始从事自己的项目,我正在开发我网站的前端。我从 PHP Laravel 后端开始,并为我的数据库设置了 API 服务。
考虑到混合应用程序,我开始将 angularjs 用于我的前端 Web 应用程序。为了使用 REST 与我的 API 进行通信,我遇到了 restangular,这非常好,因为它正是我所希望的。
只有一个问题困扰着我,没有真正的"guide"如何设置一个可维护的module/factory/provider/service来使用将数据存储在本地的系统来复制您的api存储或设置简单的系统,您可以将 "Model" 注入控制器,然后 Model->getAll()
获取所有模型。
因为我是 angularJS 的新手,因此我对如何应用它的知识相当有限。到目前为止我已经做到了:
主应用程序
var client = angular.module('clientApp', ['angulartics', 'angulartics.google.analytics', 'ngRoute', 'restangular']);
client.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
controller: 'flongsController',
templateUrl: '/client_partials/Homepage.html'
})
.when('/flongs/:slug', {
controller: 'flongsController',
templateUrl: 'client_partials/Flong.html'
})
.otherwise({
redirectTo: '/'
});
}]);
flongs控制器
client.controller('flongsController', ['$scope', 'Restangular', '$routeParams', function ($scope, Restangular, $routeParams) {
//controller variables
var baseFlongs = Restangular.all('flongs');
$scope.flongs = {};
init();
function init() {
baseFlongs.getList().then(function(flongs){
$scope.flongs = flongs;
});
}
}]);
所以,我的问题很简单:
我如何改进此代码,使其更高效、更易于维护?
提前致谢,
尼克范德梅杰
首先不要在控制器上使用服务逻辑,而是为此目的使用 angular 服务。
让我与您分享我是如何构建项目的,
第一次构建休息angular服务:
angular.module('example').factory('exampleService', ['Restangular', function(Restangular){
// this is service object with list of methods in it
// this object will be used by controller
var service = {
getExamples: getExamples,
getExample: getExample
};
// get examples from server by using Restangular
function getExamples(){
return Restangular.all('examples').getList();
}
// get example with given id from server by using Restangular
function getExample(exampleId){
return Restangular.one('examples', exampleId).get();
}
return service;
}]);
这里我们构建 exampleService 现在让我们将它注入控制器
angular.controller('ExampleCtrl', ['exampleService', function(exampleService){
// get examples by using exampleService
exampleService.getExamples().then(function (examples) {
$scope.examples = examples;
});
// get example with given id by using exampleService
exampleService.getExample('1234').then(function (example) {
$scope.example = example;
});
}]);
我基本上就是这样使用它的。有关更高级的用法,您可以查看 Restangular Github Page.
中的示例
所以我开始从事自己的项目,我正在开发我网站的前端。我从 PHP Laravel 后端开始,并为我的数据库设置了 API 服务。
考虑到混合应用程序,我开始将 angularjs 用于我的前端 Web 应用程序。为了使用 REST 与我的 API 进行通信,我遇到了 restangular,这非常好,因为它正是我所希望的。
只有一个问题困扰着我,没有真正的"guide"如何设置一个可维护的module/factory/provider/service来使用将数据存储在本地的系统来复制您的api存储或设置简单的系统,您可以将 "Model" 注入控制器,然后 Model->getAll()
获取所有模型。
因为我是 angularJS 的新手,因此我对如何应用它的知识相当有限。到目前为止我已经做到了:
主应用程序
var client = angular.module('clientApp', ['angulartics', 'angulartics.google.analytics', 'ngRoute', 'restangular']);
client.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
controller: 'flongsController',
templateUrl: '/client_partials/Homepage.html'
})
.when('/flongs/:slug', {
controller: 'flongsController',
templateUrl: 'client_partials/Flong.html'
})
.otherwise({
redirectTo: '/'
});
}]);
flongs控制器
client.controller('flongsController', ['$scope', 'Restangular', '$routeParams', function ($scope, Restangular, $routeParams) {
//controller variables
var baseFlongs = Restangular.all('flongs');
$scope.flongs = {};
init();
function init() {
baseFlongs.getList().then(function(flongs){
$scope.flongs = flongs;
});
}
}]);
所以,我的问题很简单:
我如何改进此代码,使其更高效、更易于维护?
提前致谢, 尼克范德梅杰
首先不要在控制器上使用服务逻辑,而是为此目的使用 angular 服务。
让我与您分享我是如何构建项目的,
第一次构建休息angular服务:
angular.module('example').factory('exampleService', ['Restangular', function(Restangular){
// this is service object with list of methods in it
// this object will be used by controller
var service = {
getExamples: getExamples,
getExample: getExample
};
// get examples from server by using Restangular
function getExamples(){
return Restangular.all('examples').getList();
}
// get example with given id from server by using Restangular
function getExample(exampleId){
return Restangular.one('examples', exampleId).get();
}
return service;
}]);
这里我们构建 exampleService 现在让我们将它注入控制器
angular.controller('ExampleCtrl', ['exampleService', function(exampleService){
// get examples by using exampleService
exampleService.getExamples().then(function (examples) {
$scope.examples = examples;
});
// get example with given id by using exampleService
exampleService.getExample('1234').then(function (example) {
$scope.example = example;
});
}]);
我基本上就是这样使用它的。有关更高级的用法,您可以查看 Restangular Github Page.
中的示例