Diving into AngularJS
floatleft.com
floatleft.com
However I cannot comprehend Angular's source code on github. Can anyone give me pointers on where to start reading it and/or how it's organized?
However: I read the documentation first.
I think you'll find if you give it a chance, you'll find that AngularJS has excellent documentation.
Someone put a lot of effort into taking what is organised for implementation (code) and reorganising it for users, and it was something that was very much appreciated.
For example, you should look at this:
* http://docs.angularjs.org/guide/di
There's a very subtle piece in there about how AngularJS figures out what the dependencies of a function actually are, and understanding that piece is key to understanding how much of the AngularJS code is written.
[1] http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tuto...
AngularJS' strict adherence to separation of concerns is definitely a breath of fresh air.
Great blog post :)
After a year on a large project using Angular, I'm loving it more every day.
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.
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.
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.
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;
});
function thingCtrl($scope, Thing) {
Thing.all().then(function(data) {
$scope.things = data;
});
}
thingCtrl.$inject = ['$scope', 'Thing']; function thingCtrl($scope, Thing) {
$scope.things = Thing.all()
}
thingCtrl.$inject = ['$scope', 'Thing'];Angular made a tutorial video on building a Twitter search app that may be helpful: https://www.youtube.com/watch?v=IRelx4-ISbs
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.
The Angular code you write now won't need to be updated and will get a great speed boost later. Other libraries, like Ember, get you to add all that metadata to your code to give you a performance boost now (which to me feels like something you'll regret in a year's time).
Ah, this is the post I was looking for [1].
[0] http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.ht...
[1] https://plus.google.com/112439678898563138768/posts/RZKRBiGX...
Ember.js in comparison has a certain glow to it. Especially with that weird mascot.
[2]: http://snapframework.com/
It's progress.
"TodoMVC [is] a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today."
Speaking of which, I started a project in Ember and quickly encountered the primary reason why it is dangerous to change conventions and APIs -- searching for basic information on how to do certain things brings me to various StackOverflow posts, etc, most of which are just entirely wrong now.
It is awesome sauce.