0

This is my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style>
</style>
</head>
<body ng-app="myApp" >

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>WELCOME!</h1>
  </div>

<div ng-view></div>

    <div data-role="footer">
    <h1>&copy; 2015 - HSKA</h1>
  </div>
</div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
'use strict';

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

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'views/home.html',
            controller  : 'HomeController'
        })
        .when('/abc', {
            templateUrl : 'views/abc.html',
            controller  : 'abcController'
        })
        .when('/def', {
            templateUrl : 'views/def.html',
            controller  : 'defController'
        })
        .when('/efg', {
            templateUrl : 'views/efg.html',
            controller  : 'efgsController'
        });

});

app.controller('HomeController', function($scope, $http, $location) {

     $http.get('http://localhost/webapp/dbconnect.php').
        success(function(data) {
            $scope.users = data;
        }).error(function(data) {
            console.log("error");
        });

});

app.controller('abcController', function($scope) {
    $scope.info = 'abcController';
});

app.controller('defController', function($scope) {
    $scope.info = 'defController';
});

app.controller('efgsController', function($scope) {
    $scope.info = 'efgsController';
});

</script>

</body>
</html>

This is how e. g. the efg.html looks:

<div data-role="main" class="ui-content"  ng-controller="efgsController">
    <h1>VG</h1>
    <p>{{ info }}</p>
</div> 

However, I get the following error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

What exactly am I doing wrong? Am I using an outdated way to implement this?

Help and tips would be highly appreciated!

3 Answers 3

1

All modules must be referenced and since you are including ngRoute you need to reference the corresponding source.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
Sign up to request clarification or add additional context in comments.

1 Comment

duh... what a noob mistake. I thought it was all in one file... Thanks!
1

You have to include angular route as a separate file so under where add the angular core script tag add this, or use a cdn of your choice

  <script src= "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>

1 Comment

Thanks for the reply!
1

you have to include angular-route.js which is manadatory for versions after 1.2.0 in your header section after your angular.min.js inclusion

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.