Scopes in Angular 1 tie the DOM to your data (via a controller).

As of Angular 1.2, the use of $scope injectable has been greatly reduced in favor of the "controller as syntax". We are going to take a quick look at cleaning up Eggly to follow this best practice.

angularjs

AngularJS Architecture: Prefer the 'controller as' syntax

The "controller as" syntax was added to AngularJS 1.2. This syntax abstracts the use of `$scope` in controllers, simplifying the syntax of your controllers.

Experimental "Controller as" Syntax

The `$watchCollection` method on Angular scopes provides a convenient way to watch for changes on the *shallow* properties of an object.

Using the AngularJS scope's $watchCollection method

With Angular 1.3 you now have access to `$scope.$watchGroup`. This allows you to monitor an array of expressions for change. This is useful when you want to perform the some logic when any item in a group changes.

New in Angular 1.3 - $scope.$watchGroup

With AngularJS's $scope.$watch, you are able to monitor scope values for changes. This can be useful for validation of user input, as an example.

The basics of $scope.$watch

With Angular scopes, you have access to a `$destroy` event that can be used to watch $scope events. This is used for cleanup, and gives you a final opportunity to access any data on a scope. Scopes also have a (rarely used) `$destroy` method that allows you to manually destroy a scope.

Using the Angular scope $destroy event and method.

Using Aspect Oriented Programming (AOP) techniques, you can easily decorate AngularJS controller methods to add additional behaviors. This can be useful for handling analytics and other common concerns in a typical application.

Create a Scope Decorator

The Chrome Dev Tools console is an amazing tool. In this lesson you'll learn how to use the console to programmatically grab scopes in your AngularJS application.

Accessing Scope from The Console

Digging a little deeper into unit testing an AngularJS directive, this lesson looks at testing binding across multiple scopes.

Unit Testing Directive Scope Binding

Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes.

Unit Testing Directive Scope

A review of the three types of isolate scope binding methods in AngularJS.  The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope. 

Isolate Scope Review

The "&" in your isolated scopes within your AngularJS application will allow you to invoke a method within the scope that your directive lives in.

Isolate Scope "&"

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

Isolate Scope "="

AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or "@" designator in your isolate scopes.

Isolate Scope "@"

Armed with Controllers and service factories, you'll probably want to do some work on the data to give your app behaviors. In this video we will look at providing that behavior by defining a method on the scope. This method will be bound within the HTML and update live as input changes.

Defining a Method on the Scope

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Understanding Isolate Scope

This episode is explaining the naming conventions behind for the arguments passed to the factory functions for controllers, directives, linking functions, etc., its implications in regard to Angular’s dependency injection, minification side effects on arguments, and how to prevent them.

$scope vs. scope

How does AngularJS $scope relate to JavaScript function scope?

Angular scopes

Joel Hooks

Course Content