Angular partial header view

Question

When trying to learn best practices for AngularJS structure I've read in several places that partial views should be implemented as directives so that's what I did for my app header.

Now, for my specific header I have a back button that should only be visible when not on the homepage. After finally getting it to work I'm not sure that I'm happy with my solution. For example it doesn't utilize the controllerAs methodology with var vm = this;, and I would rather not let it have a dedicated scope/controller at all if I could avoid it.

Here's the directive code for my headerView:

(function () {

    'use strict';

    function appHeader () {
        return {
            restrict: 'E',
            templateUrl: 'shared/header/headerView.html',
            controller: function ($scope, $route, $location) {
                $scope.homeUrl = 'start/' + $route.current.params.id;
                $scope.isHomeUrl = function () {
                    if($location.path() == $scope.homeUrl) {
                        return true;
                    }
                    return false;
                };
                $scope.backClick = function() {
                    window.history.back();
                    return false;
                };
            }
        }
    };

    angular.module('myApp').directive('appHeader', appHeader);

})();

What do you think, for my header with backbutton, would you do this in another way? Suggestions?

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Angular UI Router would be a better option than directive for your needs.

Have a look at this question, it is very well written and there's a working plunker!

As for the controllerAs methodology, have a look at this stackoverflow question.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 08 '15 at 20:48

Michael

3,416
1
19
21

Thanks, UI Router is something that I'll definitely need to check out. As for controllerAs I'm already familiar with the benefits and usage. – Christoffer Bubach Jul 09 '15 at 05:28

Angular partial header view

1 Answers1