1

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.

Community
  • 1
  • 1
Anonymoose
  • 2,389
  • 6
  • 36
  • 69

1 Answers1

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.

mohamedrias
  • 18,326
  • 2
  • 38
  • 47
  • 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 – Anonymoose Apr 19 '15 at 10:41
  • 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 https://docs.angularjs.org/guide/directive to get more idea – mohamedrias Apr 19 '15 at 10:47