Trying to understand the concept of AngularJS

Question

I have started playing around with AngularJS and I am having a hard time understanding directives and scope.

If I understand correctly, you create directives to create reusable components that contain behavior and logic to modify the DOM?

So do directives get services injected into them?

Or do you use a controller with the directive that has services injected into it?

I guess I am really struggling on the relationship between the directives with controllers and services as well as scope.

Are there any good tutorials out there that explain this in an easy to grasp way?

services and factories are simply like models and are a way of storing and sharing public methods that access and modify private data. So if you need to controllers whether they be just normal controller or controllers in a directive to communicate with one another or modify the same data, you can inject the same service into each controller. — btm1, Oct 13 '13 at 00:27

KayakDave · Accepted Answer · 2013-10-17T01:47:29.213

You can inject a service into a directive or a controller. One thing that helped me was hearing that the only place DOM manipulation should happen is in a directive.

Controllers should be the glue between views and services and basically handle view behavior. They should be thin

Services manage logic independent of the view (and are singletons).

So think more declarative, less iterative. Overall, represent state in models. Then set up bindings so you can change the model and the view automatically changes (From: http://www.youtube.com/watch?v=oJoAnVRIVQo)

You might check out the Angular team's youtube channel: http://www.youtube.com/user/angularjs

And here's some good tutorials: http://egghead.io

score 1 · Answer 2 · answered Oct 12 '13 at 18:33

Services are meant to persist state across your entire app. - Most of the time they will exist within your controllers - they can be injected into your directives

Controllers are meant to perform business/app logic with the values passed in from the view.

Directives are useful for: - creating reusable components - adding behavior to the DOM or Forms http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

Scope is the context within the app that a directive or controller has access to. - with controllers, the scope is limited to the DOM element to which it is assigned and its children elements. - with directives, the scope can be the same scope as the scope of the controller or be its own scope (isolated from all other scopes), or its own scope prototypically inherit from its parent scope.

i recommend the videos at http://egghead.io

score 1 · Answer 3 · edited Dec 14 '17 at 15:40

Trying to understand the concept of AngularJS

Please read THIS response written by Josh David Miller.

I think it will be good start for who knows jQuery but still beginner in AngularJS.

If I understand correctly, you create directives to create reusable components that contain behavior and logic to modify the DOM?

Directives are most difficult piece in AngularJS (at least for me). For sure you can do Service injection on Directives, like:

app.directive('changeMe', ['$compile', 'myService', function($compile, myService){
    return {
        restrict: 'CA',
        link: function (scope, element, attrs) {
            scope.value = myService.value;
        }
    }
 }]);

services

The key benefit of services is that it provides the formal mechanism for code reuse. Any shared piece of business logic can be moved to service to improve maintainability of your code by avoiding code duplication. Services like utilities, you can grab them (all services should written in separate JS file) and import to other Projects easily.

Trying to understand the concept of AngularJS

3 Answers3