Created
June 10, 2015 16:02
-
-
Save crudbetter/47ea60aee2a9458f6d32 to your computer and use it in GitHub Desktop.
Using $resource in an Angular shared service
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('dataSharing.controllers', []); | |
| angular.module('dataSharing.services', ['ngResource']); | |
| angular.module('dataSharing', ['dataSharing.controllers', 'dataSharing.services']); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('dataSharing.controllers') | |
| .controller('ListCtrl', function($scope, ArticleList) { | |
| // continue to point scope prop to service prop | |
| $scope.articles = ArticleList.articles; | |
| $scope.selectArticle = function(article) { | |
| // let us know when an article is selected | |
| console.log('article with id ' + article.id + ' selected'); | |
| ArticleList.selectedArticle = article; | |
| }; | |
| }); | |
| angular.module('dataSharing.controllers') | |
| .controller('DetailCtrl', function($scope, ArticleList) { | |
| $scope.article = null; | |
| // our watch expression is now a function | |
| // which is executed per digest cycle and the return value dirty checked | |
| // when dirty the listener is called with this scope - clever stuff! | |
| $scope.$watch(ArticleList.getSelectedArticle, function(newArticle, oldArticle, scope) { | |
| // let us know when an article has been selected | |
| console.log('watched article: ' + newArticle); | |
| scope.article = newArticle; | |
| // equivalent | |
| //$scope.article = newArticle; | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="dataSharing"> | |
| <head> | |
| <title>angular-controllers-data-sharing</title> | |
| </head> | |
| <body> | |
| <h1>Sharing data between AngularJS controllers</h1> | |
| <div ng-controller="ListCtrl"> | |
| <ul> | |
| <li ng-repeat="article in articles" ng-click="selectArticle(article)">{{article.title}}</li> | |
| </ul> | |
| </div> | |
| <div ng-controller="DetailCtrl"> | |
| <dl> | |
| <dt>Title:</dt> | |
| <dd>{{article.title}}</dd> | |
| <dt>Author:</dt> | |
| <dd>{{article.author}}</dd> | |
| <dt>Published date:</dt> | |
| <dd>{{article.date}}</dd> | |
| <dt>Excerpt</dt> | |
| <dd>{{article.excerpt}}</dd> | |
| </dl> | |
| <a ng-if="article" href="#" ng-click="article.$save()">save</a> | |
| </div> | |
| <script src="../bower_components/angular/angular.js"></script> | |
| <script src="../bower_components/angular-resource/angular-resource.js"></script> | |
| <script src="app.js"></script> | |
| <script src="controllers.js"></script> | |
| <script src="services.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('dataSharing.services') | |
| .factory('ArticleList', function($resource) { | |
| var Article = $resource('/article/:articleId', { articleId: '@id' }); | |
| var service = {}; | |
| service.articles = [ | |
| new Article({ id: 1, title: 'A title', author: 'M Godfrey' }), | |
| new Article({ id: 2, title: 'Another title', author: 'J Bloggs' }) | |
| ]; | |
| service.selectedArticle = null; | |
| service.getSelectedArticle = function() { | |
| return service.selectedArticle; | |
| }; | |
| return service; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment