AngularJS navigation

Question

I am trying to implement a navigation into a webpage using angularJS. The problem is that the route does not work at all. The browser console does not give any errors and the ng-view just does not show the templatesUrls.

route.js

   var routeApp = angular.module('myApp', ['ngRoute']);

routeApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'partials/task.html',
            controller: 'TraineesController'
        })
        .when('/technology', {
            templateUrl: 'partials/technology.html',
            controller: 'TraineesController'
        })
.otherwise({redirectTo:"/technology"});

});

Index.html

<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/taskman.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/javascript" src="app/route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<a href="#/technology" class="btn btn-sm btn-danger nav-button-margin">
  <i class="glyphicon glyphicon-user"></i>&nbsp;Account panel
</a>
<div class="col-sm-12">
  <div ng-view></div>
</div><!-- Closing col-sm-12-->
</body>
</html>

app.js

var app = angular.module('myApp', []);

app.controller('TraineesController', function($scope, $http, $log) {
  getTrainee(); // Load all available tasks

  function getTrainee(){  
  $http.post("ajax/getTrainee.php").success(function(data){
        $scope.trainees = data;
       });
  };
});

task.html

<div class="widget-box" id="recent-box" ng-controller="TraineesController">
Random text tables
</div>

Updated the question still have the same problem. <div ng-include src="'partials/task.html'"></div> seems to work fine, but not the ng-view — Spinxas
– Spinxas, Commented Aug 21, 2014 at 12:52

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

remove the ; from here:

.when('/technology', {
        templateUrl: 'partials/technology.html',
        controller: 'TraineesController'
    }) // <-----here you have a ; remove it and it will work.
.otherwise({redirectTo:"/technology"});

; broke the chaining and caused a syntax error there.

update:

you can remove this controller:

<body ng-controller="TraineesController">

and instead you can place the controller in the respective templates.

checkout this plunkr demo.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 21, 2014 at 12:25

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jai Over a year ago

do you have controllers defined? if you got any error in the browser console, share that too.

Spinxas Over a year ago

my app.js var app = angular.module('myApp', []); app.controller('TraineesController', function($scope, $http,$log) { getTrainee(); // Load all available tasks function getTrainee(){ $http.post("ajax/getTrainee.php").success(function(data){ $scope.trainees = data; }); }; }); task.html <div class="widget-box" id="recent-box" ng- controller="TraineesController"> ...Other functions... I removed the controller from body but it still does not work

Jai Over a year ago

checkout the demo i have provided in the answer.

Spinxas Over a year ago

Thank you for the demo the navigation started to work, but it keeps popping up with an error - Error: [ng:areq] Argument 'TraineesController' is not a function, got undefined

Jai Over a year ago

yes that happens when we use the directive but we do not have that controller written there.

|

Juan Biscaia · Accepted Answer · 2014-08-21 13:57:16Z

I've made two different plunkers, the first one is a plain app just to do an example of routes magic with angular...

First example, basic routes

var app = angular.module('plunker', ['ngRoute']);

app.controller('MainCtrl', function($scope) {

  $scope.technology = 'this is the tech page';
  $scope.task = 'this is the task';

});

app.config(['$routeProvider',
  function($routeProvider) {

    $routeProvider
      .when('/technology', {
        templateUrl: 'technology.html',
        controller: 'MainCtrl'
      })
      .when('/task', {
        templateUrl: 'task.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/technology'
      });

  }
]);

The second example is an myApp example based on your application, it's basicaly your application but slightly different...

Second example, your app

// I like to keep the app.js file "clean", what means that this file will only
// load the app modules and declare the DI of the app...
var app = angular.module('myApp', [
  'ngRoute',            // ngRoutes directive from angularjs
  'myAppControllers',   // controllers module, u can add how controllers wtv u need
  'myAppRoutes',        // routes module, you can keep the routes configs separated or in the same file
]);
// start the modules, other way to do this is to put this lines in every 
// single controllers or route file, what is ugly
angular.module('myAppRoutes',[]);
angular.module('myAppControllers',[]);

Collectives™ on Stack Overflow

AngularJS navigation

2 Answers 2

update:

checkout this plunkr demo.

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

update:

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related