CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
James Falter
James Falter

Reputation: 55

AngularJS working with bootstrap navbar for a one-page app

I am trying to create a one-page website that loads views in based on buttons clicked on a bootstrap navbar. However, The content of home.html does not show up. Can anyone tell me what is going wrong?

Okay, so I have this index.html:

<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="scotchApp">

<head>
  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

  <!-- SPELLS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="app.js"></script>
  <script src="controllers/mainController.js"></script>
  <script src="utils/basicUtils.js"></script>
</head>

<!-- define angular controller -->
<body>

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Angular Routing Example</a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><i class="fa fa-home"></i> User</a></li>
      <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
      <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
    </ul>
  </div>
</nav>

<div id="main">

  <!-- angular templating -->
  <!-- this is where content will be injected -->
  <div ng-view></div>

</div>

This app.js:

console.log("abouy to call the /home page and the maincontroller");
angular.module('scotchApp', ['ngRoute', 'basicUtils']).config(function($routeProvider) {
  $routeProvider

      .when('/', {
          templateUrl : 'pages/home.html',
          controller  : 'mainController'
      });

});

And this home.html:

  <div>
    <form ng-submit = "add(USERID)">
        User ID:<br>
        <input type = "text" name = "USERID" ng-model = "USERID"><br>
        <input type = "submit" value = "Submit">
    </form>
    <table border="1">
        <tr>
            <td>{{returnName}}</td>
            <td>{{AID}}</td>
        </tr>
    </table>
</div>

And this controller:

angular.module('scotchApp', ['ngRoute', 'basicUtils']).controller('mainController', ['$scope', '$route', '$http', 'AuthTokenService', function($scope, $route, $http, AuthTokenService){
    // create a message to display in our view
    var userurl = '';
    $scope.add = function(USERID) {
        userurl = 'http://dev.hypr.com:8080/DevAPI/rest/uafstats/user/'+USERID; //+USERID;
        var url = 'http://dev.hypr.com:8080/DevAPI/rest/login';
        var data = {userId: USERID};
        var userdata = {userid: USERID};
        var config =
        {
            headers: {
                'API_KEY': '864d9a941f0520653e51eae4935f6a640256f2f85610d0b281fa26a9dd',
                'Content-Type': 'application/json'
            }
        };
        var authToken = AuthTokenService.getAuthToken(url, data, config);

        var userconfig =
        {
            headers: {
                'AUTH_TOKEN': authToken,
                'Content-Type': 'application/json'
            }
        };
        var userPostRequest = $.get(userurl, userdata, userconfig);
        var userjson = '{\"USER_DATA_RETRIEVED\" : \"fail\"}';
        userPostRequest.done(function (userdata) {
            userjson = JSON.stringify(userdata);
            console.log("userjson :: " + userjson);

            var postResponse = jQuery.parseJSON(userjson);
            $scope.returnName = postResponse['username'];
            $scope.AID = postResponse['appId']
        });
    };
}]);

Upvotes: 0

Views: 557

Answers (1)

marton
marton

Reputation: 1350

From angular docs: Using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

When you declare your controller, you specify a second argument in the module call, you are redeclaring the module and losing the route configuration.

Omit the second argument

angular.module('scotchApp', ['ngRoute', 'basicUtils']).controller('mainController')

should be angular.module('scotchApp').controller('mainController')

Declare your module with the dependencies only once, and use the module call without the dependencies array when adding controllers or config.

If that's not it, it could be the path to your template, you will have an error in the console when the application is loaded if that's the case.

Upvotes: 1

Related Questions