Bossable.com - MEAN Stack: 16 - AngularJS Scope & Controllers

Learn how to build a MEAN Stack (MongoDB, Express, AngularJS, NodeJS) app! Tutorial Step 16/30 - AngularJS Scope & Controllers.

Want to build scalable web apps quickly and easily? Check out the MEAN stack, a collection of technologies that fit together to provide a solution that allows for a full-stack JavaScript implementation of web applications.

If you like it, please share it!

---

This Video Tutorial:

In this video we'll break some code! We'll look at the Customers Controller and break it up to support Create and Edit functions. We'll also look at how we can remove the data-ng-init directive and use 'Controller As' to give our Controller an Alias.

We look at:
- The List Customers Page that was created from the Yeoman Generator
- Breaking the Customers Controller into 3 parts
- Using 'this' instead of '$scope'
- The use of the data-ng-init directive
- Removing the data-ng-init directive with 'Controller As'
- Referring to a scope within our new Controller as an Alias

Thanks for viewing. I really appreciate any feedback you have.

---

------

[silverback]

Wonderful detailed presentation. Thank you so much. I have followed every one of them until this one.  I need to take a small detour because I need to learn more about route authorization and MEAN. Do you plan to cover this in any of your future videos ? I may be mistaken but I did not see it in the description for the remaining videos in this series. Once again a great job. 

[sunmustbedestroyed]

I completely broke my app and was panicking for quite some time. My customers were missing — even Batarang failed to show them. So I desperately began checking my code and about fifteen minutes later, I found I had made a very silly error. I had forgotten to remove the "$location" closure(?) (inside the Controller) which we removed as a Controller parameter. In other words, there was no $location from which to inherit and Angular  (or maybe it was the "use strict" syntax(?)) was not very forgiving!

[RichardWu]

Hey! Great vid again, I'm really new to angular so this may be a stupid question. But why did you break up the Customers Controller as well as remove the data-ng-init when it did the same thing before you broke it?

[DavidPerez-crmy]

Hi again! And thanks for your great work here!! Still following your videos - not always in the exact sequence :) but yet trying to get the most of them into my own app. I was very surprised to see how easy you get to clean the controller by splitting it in smaller parts; I was exactly aiming for something like this, since I already got to include some google maps, as well as other smaller cosmetics into it, and it was feeling a bit messy. I will try to apply this idea to my code.
There is something I kind of miss now. Is has to do with customizing queries and the fact that the .query() function is actually not included in the factory definition. How should I implement several different queries for my app? (eg. the 5 most recent entries, all the entries matching a string given in a search field, and all the entries created by me, the currently logged-in user)
Please: excuse me if this is somehow covered or pointed out in any video - even when I've already watched them at least once, there is so many information; just let me know the video number and that's it.
Thanks again!! And congratulations for the great work here.

[blakelockbrown]

Just as a heads up to anyone else who has this issue. If you find the "Customers" tab missing in the navbar, it's because your not logged into the application. This had me stuck for a few minutes xD

[abiolaakinnubi]

is i code my own controller and app module how do i add it to MEANJS i have tried all day i am not getting through

[lode]

Hello, I have a question. If a someone has the Angular extension installed in Chrome, they can access (read) all the properties in the database? For example, in a real app, I only want display and only want the user to know their username. I know that only write "customer.username" in HTML, but they can still access to other properties that belong to the "customer" by using the AngularJS extension. Will this cause some security problems? Just wonder. many thanks!

[TrungCr]

as customersCtrl"
where is customersCtrl???