How make it works a function on a single header in AngularJs

Question

I'm working with AngularJs, and i want to use a single header over all my pages. For the pages, i'm using ng-route. Right now, i want to make a test for the logout button (which lives in the header), but is not working. This is my index

<!DOCTYPE html>
<html ng-app="adminApp">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Test</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="app/css/admin.css" rel="stylesheet" />
    <link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

<head>

    <base href="/">

</head>
<body>

    <div ng-include="'app/components/include/header.html'"></div>

    <ng-view></ng-view>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/components/login/admin-login.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/routes/admin-route.js"></script>

</body>
</html>

And this is my html for my header

<section class="admin-header">
    <div class="row">
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <a id="admin-logo"><img src="myimagesource" /></a>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
            <button type="button" class="btn btn-user" ng-click="logout()">
                <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</section>

My code for the header:

(function(){

    var head = {
        templateUrl: '/app/components/include/header.html',
        controller: headCtrl
    };

    angular
        .module('adminApp')
        .component('adminHead', head);
        headCtrl.$inject = ["$scope"];
        function headCtrl($scope){

            $scope.logout = function(){
                console.log('Success');
            }

        }

})();

The adminHead on the component comes from my route file:

(function(){
    'use strict';

    angular
        .module('adminApp')
        .config(config);
        config.$inject = ["$routeProvider", "$locationProvider"];
        function config($routeProvider, $locationProvider){
            $locationProvider.hashPrefix('');

            $routeProvider

                .when('/', {
                    template: '<admin-login></admin-login>'
                })

                .when('/head', {
                    template: '<admin-head></admin-head>'
                })

                .when('/home', {
                    template: '<admin-home></admin-home>'
                })                

                .otherwise({
                    redirectTo: '/'
                });
        }

})();

When i click on the logout button, nothing happens. Someone can guide me please? What can i do to make the function(s) work no matter the page i'm in (login or home)? Something's missing?

I'm using AngularJs and Javascript, and Bootstrap for the HTML.

Thanx in advance.

Answer 1

You have to use either ng-include or component for reusability in the above example. So remove the element "<div ng-include="'app/components/include/header.html'"></div>" and add <admin-head></admin-head> try again. Here components can be called by using element alone.

If you want to use both then try to include the component **"<admin-head></admin-head>"** in the header.html and have the component as separate html..

How make it works a function on a single header in AngularJs

Question

1 answers

solution1
0 2019-10-20 14:25:48

How make it works a function on a single header in AngularJs

Question

1 answers

solution1 0 2019-10-20 14:25:48

solution1
0 2019-10-20 14:25:48