Structuring views in AngularJS

Question

I am creating my first application with AngularJS comming from Backbone. As a first exercise I want to port an existing backbone application that I wrote towards AngularJS.

The application consists of a main view with 3 divs.

<!-- main.html -->
<div id="filter"></div>
<div>
    <div id="result-list"></div>
    <div id="result-details"></div>
</div>

So far I'm able to create my mainView in Angular

// My Route
$routeProvider.when("/", {
    controller: "mainController",
    templateUrl: "app/components/main/main.html"
});

...

// My mainController
'use strict';
app.controller('mainController', function ($scope) {});

What I want to do now is bind a second view called filter on the div filter of my main view. However I read that in Angular you can only have 1 view. And the equivalant of a view in backbone corrresponds to a directive in angular.

I have read into the different semantics in angular but I'm still confused on how I should go further to implement this in my application.

Can anyone help me out understanding ? Maybe I'm still looking at it the wrong way.

mohamedrias · Accepted Answer · 2015-04-19 10:36:10Z

2

As you've mentioned, View in backbone is equivalent to directive in angular. So, to create the results-list view, you need to create directives.

<results-list></results-list>

In your directive code:

angularApp.directive("resultsList", function() {
     return {
       restrict: "AEC", // Attribute, element, class
       template: " <div id="result-list">remaining code here</div>",
       // if its in separate file then
       // templateUrl : "",
       link : function(scope, element, attrs) {
             // add your logic to customize
             // binding events etc
       }
     }
});

Now you can reuse the directive anywhere required. In case you've the logic & data required for the directive inside controller, then you can refer it using the scope variable inside your link function.

answered Apr 19, 2015 at 10:36

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anonymoose Over a year ago

Thanks,that works! So does that mean that in any angular application you will only have 1 controller? Because a directive does not seem to have one

mohamedrias Over a year ago

Not really. Mostly 1 controller per route will be there. You can use the link function as the controller for binding events or managing data. In terms of isolated scope, the directives will act as standalone widgets. Read more on docs.angularjs.org/guide/directive to get more idea

Collectives™ on Stack Overflow

Structuring views in AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related