AngularJS
Directives
and
Services
Tightly coupled directives have no isolated scope so this directive will be using the scope it is nested within in the html
(For example a controller's scope)
Loosely coupled directives have an isolated scope, but you add properties to the isolate scope from the directive's parent scope
(Such as a controller)
The use of "=?" means you will optionally be adding data-binding from the parent's scope into the directive's scope
Optional scope property "list"
Attaching the property "list" to your directive's scope using a property from the parent scope(a controller)
The use of @? means you will optionally be adding a string value into the directive's scope
If you drop the '?' then it means a value is required
$scope.$watch && $scope.$broadcast
scope.$on
The link method
Discuss
What is the = symbol used for when creating isolated scope?
What is the @ symbol used for when creating isolated scope?
What is a tightly coupled directive?
What is a loosely coupled directive?
What is isolate scope?
What is the link method used for in a directive?
What is $scope.$watch, $scope.$broadcast ,and $scope.$on? Why would you use them?
AngularJS Services
Lazily instantiated - Angular only instantiates(loads) a service when an application component injects it as a dependency
Singletons - Each application component dependent on a service gets a reference to a sing instance generated by the service.
This allows each component dependent on a service to use to the same set of data and methods.
Encapsulation pattern
Encapsulation is when you add hidden data to a constructor and expose different methods to either retrieve data from the hidden data or modify the hidden data.
Those methods are called getters and setters.
This is a common object oriented programming pattern and is generally considered to be best practice when using constructors.
Since an angular service is a singleton constructor then it is recommended to use the encapsulation pattern.
AngularJS Services
Injecting and using your service
Because the service is a singleton, the data you modify and return from the service is the same data that will be accessible in other directives or controllers that inject the service as a dependency
Utility service
No need for encapsulation in this case
Discuss
What does "Lazily instantiated" mean?
Angular services are "Singletons" what does that mean?
How do you use services in your application?
Why are services useful?
What is encapsulation?
When should you use encapsulation in angular services?
Angular directives and services
By Akyuna Akish
Angular directives and services
- 1,069