So many missing pieces. Where to look next? [closed] - angularjs

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Learning angular is a pretty frustrating process. I've just started the journey down this endless road a couple of weeks ago. I've gone through the official tutorial on the angular website, watched the first 40+ videos on egghead.io and read through several other tutorials and examples. I'm new to angular but have a good amount of experience with javascript, jQuery, and knockout, but even after all of the research and examples I've gone through, I still can't piece together even the simplest angular app in a real-world situation.
The problem is that most of these tutorials and examples try to show all the different parts of angular, including controllers, directives, filters, services, $http/$resource, routing, animations, etc.so you end up with this one or two controller app that doesn't have any substance but it incorporates the basics of all of these features. Now, strip away all of the features that aren't really needed for a simple app like $resource, routing, and animations, and add substance to the business logic and data management, and you quickly can see how many holes exist in these tutorials.
For example, a tutorial will show how you can share data between controllers using services. It will go over creating the controller, and using a service to get the data from a server using $http or $resource. Then it will show that even though the request for data is asynchronous, there is rarely a need for callbacks because the data-bindings will just be empty until the data arrives and then magically filled in. Now you have a reusable service to get data in all of your controllers.
Wow! everything is so simple and clean, and it just works! Angular is awesome! Then, of course, when you go to write an actual app that needs more than one controller, and the controllers all depend on the same data, and you add something called "business logic" that is also shared and uses this data, you immediately realize things aren't so simple.
First of all, as soon as you add business logic that has to use the data from the server (like with any real app), your clean code with no callbacks is broken. You now have to implement callbacks everywhere, because you have to wait for the data to arrive before you can use it. Second, prototypal scope inheritance becomes unreliable because you don't know if the data from other controllers has loaded yet or not. Worst of all though, there is nothing in these tutorials about how you are supposed to keep the data in sync between controllers, and with the server. If the data is modified in the scope of one controller, somehow all of the other controller scopes need to be updated as well...
These are just some of the complexities that are introduced even with a pretty simple app that doesn't even use routing. I'm trying to make a simple calculator that doesn't persist data, and I am stuck with all of these problems and questions and can't find any real solutions.
Can someone please point me in the right direction of a good tutorial, example, or book that will fill in these missing holes without getting into complex parts of angular that my app doesn't require?
Thanks in advance and sorry for the rant, this has been very frustrating :/

Answer 1

I am far from being an angularJS expert, I am actually in the process of learning too. However, we are almost done with our first angularJS MVP at work so maybe I can share some of my experience. Here are a few patterns I learnt
Your controllers should be minimalist and call services and factories.
Controller actions are triggered by $emit and $broadcast which is what keeps everything in sync. I have controllers with just a list of $scope.$on('onCustomAction',function(event,params){ $scope.myObject.doSomething(); }). Ideally, it should be a minimalist list of those.
In ng-click, you should have methods like myObject.fancyMethod() where myObject is part of the '$scope`.
Put small pieces of reusable html that have their own little controller in directives. I am quite late on that but I am starting to have a few.
Use ng-include for large pieces of html that you need to move around (ie: modal windows, main content, sidebars etc).
Remember, if it's not in the $scope, it might as well not exist.
Services can call other services and can be used for singletons and instanced objects. They should be the meat of your code.
Hope this helps. Feel free to argue each of those items.

Answer 2

As someone who was experiencing the same type of angularjs frustration. I get it. What helped me immensely was Jeremy Howard's 4 part tutotial, "Angularjs End to end web app in under an hour". It uses ASP.net but I am sure most of the back end examples would be easily reproducible with any other framework.
Here is a quick and dirty laundry list of why I found this useful.
Example is a Todo CRUD app that could be used as a template for most other web apps.
The videos move at a reasonable pace and are broken down into logical functional areas.
Jeremy uses some of the techniques you described above that are in other videos such as promises, directives, factories, services, link functions, controllers, etc. However, the examples he uses do have substance as they work within the context of the todo app.
Lastly, it becomes clear in watching Jeremy going through his tutorial that being very organized in how you structure your back end will make your front end angular app so much better and powerful. Think separation of concerns to a whole other level.
I could go on and on but one thing I can say, is that Jeremy's tutorials not only made me better at angularjs but made me better at being a full stack developer.
Do yourself a favor and check it out. You won't regret it. Good luck.

Answer 3

Here is a nice tutorial on data model dealing with your problem:
"Worst of all though, there is nothing in these tutorials about how you are supposed to keep the data in sync between controllers, and with the server. If the data is modified in the scope of one controller, somehow all of the other controller scopes need to be updated as well..."
http://www.webdeveasy.com/angularjs-data-model/