Monday, 5 June 2017

AngularJS controller Registration

I inherited a nodejs/angularJS project and I am getting errors just trying to display a $scope variable in my html. I keep on getting the error "The Controller with the name 'loginCtrl' is not registered. All I am trying to do is something basic, display an isAdmin variable which is a boolean, and I cannot figure out what I am doing wrong. My http call in my login.js is working fine and I can see when debugging that my $scope.isAdmin variable does populate as expected.

login.js

(function () {
'use strict';
angular
    .module('loginApp', ['ngMaterial', 'ngSanitize'])
    .controller('loginCtrl', loginCtrl)
    .config(function ($mdThemingProvider) {
        $mdThemingProvider.theme('default')
        .primaryPalette('blue')
    });
function loginCtrl($scope, $http, $log, $mdDialog, $window) {
    $scope.error = '';
    $scope.isAdmin = false;
    $scope.submit = function () {
        $http({
            method: 'POST',
            url: '/login',
            headers: {'Content-Type': 'application/json'},
            data: {'username': $scope.username, 'password': $scope.userpassword},
        }).then(function successCallback(response, data) {
            if (response.data.successful) {
                $scope.isAdmin = response.data.isAdmin;
              ...
           ...

my naviagtion.ejs partial As a test I just wanted to see either true or false on the line item

<!-- views/partials/header.ejs -->
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="loginCtrl">

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="/index">Home</a></li>
    <li><a href="/admin">Admin</a></li>
    <li><a href="/logout">Log out</a></li>
    <li><a href="">Test:  </a></li>
  </ul>

and my index.html I think this is where the problem is. I have my login.js script injected at the bottom of my page but the ng-app productName is meant to populate the second div for the /partials/checkboxes, which works just fine.

<body ng-app="productName">
<div class="container">
    <% include ./partials/navigation %>
</div>
<div>
    <% include ./partials/checkboxes %>
</div><!--bower:js-->
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular-animate/angular-animate.js"></script>
<script src="/lib/angular-aria/angular-aria.js"></script>
<script src="/lib/angular-messages/angular-messages.js"></script>
<script src="/lib/angular-sanitize/angular-sanitize.js"></script>

<!--endbower-->
<!--inject:js-->
<script src="/js/login.js"></script>
<!--endinject-->
</body>

</html>



via mbow

No comments:

Post a Comment