CODEWITHSUNDEEP
javascriptangularjs
Anonymoose
Anonymoose

Reputation: 2471

Structuring views in AngularJS

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.

Upvotes: 1

Views: 63

Answers (1)

mohamedrias
mohamedrias

Reputation: 18566

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.

Upvotes: 2

Related Questions