5 ms·

What do you wish you knew about writing directives then that you know now? Or what did you find confusing? I am currently writing a book on Angular and would l

What do you wish you knew about writing directives then that you know now? Or what did you find confusing? I am currently writing a book on Angular and would like to know. I remember I had a lot of trouble on how to write a reusable component defined in a partial, and what to pass into the directive constructor.

147 14y ago
Hey Kevin, this isn't about directives but about RESTful services and $resource. I started learning how to use AngularJS yesterday and all of the examples that I've found on it are confusing to me and seem to do it in different ways. I've seen somebody do it by calling myModule.factory. I've seen an example on Stackoverflow that says all you need to do is something like var Todo = $resource('/api/1/todo/:id');. I'm not sure where I'm supposed to put this code. I want to be able to use the resource globally but I don't have access to $resource in the global namespace. All I'm trying to do is make a simple blog that can interact with my backend. If you have this part of the book written I'd love to read it right now. EDIT: I figured out how to do it I think. But I'd still love a more complete introduction to using Angular with a RESTful service.
- squidsoup 14y ago
  Personally I found using $http less restrictive - there seem to be some edge cases where $resource behaves oddly. Ideally what you should be doing with REST calls is pushing them out to Angular Services (http://docs.angularjs.org/guide/dev_guide.services.creating_services http://docs.angularjs.org/guide/dev_guide.services.creating_...) rather than making them directly in your controller. Here's a simple example: appServices.factory('Thing', function($http) { var Thing = function(data) { angular.extend(this, data); } Thing.all = function() { return $http.get('/things).then(function(response) { return new Thing(response.data); }); } Thing.get = function(id) { return $http.get('/things/' + id).then(function(response) { return new Thing(response.data); }); } Thing.delete = function(id) { return $http.delete('/things/' + id).then(function(response) { return new Thing(response.data); }); } Thing.create = function(data) { return $http.post('/things', data).then(function(response) { return new Thing(response.data); }); } Thing.update = function(data, id) { return $http.put('/things/' + id, data).then(function(response) { return new Thing(response.data); }); } return Thing; }); In your controller, inject the service: function thingCtrl($scope, Thing) { Thing.all().then(function(data) { $scope.things = data; }); } thingCtrl.$inject = ['$scope', 'Thing'];
  - grncdr 14y ago
    Another nice feature of angular is that templates are promise-aware. So the following controller is equivalent for most purposes: function thingCtrl($scope, Thing) { $scope.things = Thing.all() } thingCtrl.$inject = ['$scope', 'Thing'];
- ngokevin 14y ago
  I have not gotten to that part yet but will perhaps notify you when I get around to it. Angular made a tutorial video on building a Twitter search app that may be helpful: https://www.youtube.com/watch?v=IRelx4-ISbs https://www.youtube.com/watch?v=IRelx4-ISbs
jonny_eh 14y ago
Great question. It's been a few months, but I remember being confused by "compile" vs "link". I had a hell of a time figuring out which one I needed to use. I also was confused by the passing in of parameters, with weird syntax like "@", and "=" prepending the parameters. One thing that I tried doing, that I figured would be common, was to access a model specified by ng-model, and to access the controller's scope. But even that was really confusing.
visarga 14y ago
I too, tried to define a directive after the bootstrapping phase and couldn't figure out how. I'd like to create a directive that would help me define directives. Sounds circular? I just want syntactic sugar to define 'components', in other words, to nicely package my code. I want to wrap together a piece of html, js and css under one name and invoke it as a HTML tag. That way I could better modularize my website. This needs to work in partials too. What I don't like about Angular is that I's not easy to dynamically define/load stuff like directives and such. It all needs to be known beforehand, statically.

147 14y ago

Hey Kevin, this isn't about directives but about RESTful services and $resource. I started learning how to use AngularJS yesterday and all of the examples that I've found on it are confusing to me and seem to do it in different ways. I've seen somebody do it by calling myModule.factory. I've seen an example on Stackoverflow that says all you need to do is something like var Todo = $resource('/api/1/todo/:id');. I'm not sure where I'm supposed to put this code. I want to be able to use the resource globally but I don't have access to $resource in the global namespace. All I'm trying to do is make a simple blog that can interact with my backend. If you have this part of the book written I'd love to read it right now. EDIT: I figured out how to do it I think. But I'd still love a more complete introduction to using Angular with a RESTful service.

squidsoup 14y ago
Personally I found using $http less restrictive - there seem to be some edge cases where $resource behaves oddly. Ideally what you should be doing with REST calls is pushing them out to Angular Services (http://docs.angularjs.org/guide/dev_guide.services.creating_services http://docs.angularjs.org/guide/dev_guide.services.creating_...) rather than making them directly in your controller. Here's a simple example: appServices.factory('Thing', function($http) { var Thing = function(data) { angular.extend(this, data); } Thing.all = function() { return $http.get('/things).then(function(response) { return new Thing(response.data); }); } Thing.get = function(id) { return $http.get('/things/' + id).then(function(response) { return new Thing(response.data); }); } Thing.delete = function(id) { return $http.delete('/things/' + id).then(function(response) { return new Thing(response.data); }); } Thing.create = function(data) { return $http.post('/things', data).then(function(response) { return new Thing(response.data); }); } Thing.update = function(data, id) { return $http.put('/things/' + id, data).then(function(response) { return new Thing(response.data); }); } return Thing; }); In your controller, inject the service: function thingCtrl($scope, Thing) { Thing.all().then(function(data) { $scope.things = data; }); } thingCtrl.$inject = ['$scope', 'Thing'];
- grncdr 14y ago
  Another nice feature of angular is that templates are promise-aware. So the following controller is equivalent for most purposes: function thingCtrl($scope, Thing) { $scope.things = Thing.all() } thingCtrl.$inject = ['$scope', 'Thing'];
ngokevin 14y ago
I have not gotten to that part yet but will perhaps notify you when I get around to it. Angular made a tutorial video on building a Twitter search app that may be helpful: https://www.youtube.com/watch?v=IRelx4-ISbs https://www.youtube.com/watch?v=IRelx4-ISbs

jonny_eh 14y ago

Great question. It's been a few months, but I remember being confused by "compile" vs "link". I had a hell of a time figuring out which one I needed to use. I also was confused by the passing in of parameters, with weird syntax like "@", and "=" prepending the parameters. One thing that I tried doing, that I figured would be common, was to access a model specified by ng-model, and to access the controller's scope. But even that was really confusing.

visarga 14y ago

I too, tried to define a directive after the bootstrapping phase and couldn't figure out how. I'd like to create a directive that would help me define directives. Sounds circular? I just want syntactic sugar to define 'components', in other words, to nicely package my code. I want to wrap together a piece of html, js and css under one name and invoke it as a HTML tag. That way I could better modularize my website. This needs to work in partials too. What I don't like about Angular is that I's not easy to dynamically define/load stuff like directives and such. It all needs to be known beforehand, statically.