strava1 strava1 - 12 days ago 4
AngularJS Question

why nothing showing in ng-view?

I learning angular and I have problem. When I put script directly to code it works but when I am move js controllers to controllers.js it nothing to show. here is my code:

INDEX.html

<!DOCTYPE html>
<html ng-app="pivoApp">
<head>
<title>Pivovara Medvedgrad Kupci</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="css/main.css">


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>

</head>
<body>
<h1>Početna</h1>
<nav>
<ul>
<li><a href="index.html#!/">Početak</a></li>
<li><a href="index.html#!/registracija">Registracija</a></li>
</ul>
</nav>
<div ng-view>

</div>

</body>




templates/registracija.html

<div>
<h2>Registracija</h2>

<form >
Ime:<input type="text" ng-model="ime"/><br/>
Prezime:<input type="text" ng-model="prezime"/><br/>
Korisničko ime:<input type="text" ng-model="username"/><br/>
<input type="button" value="submit" ng-click="insertdata()"/></br>
</form>




templates/main.html

<div>{{message}}</div>


Controllers.js

'use strict';
// Controllers

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

pivoAppControllers.controller('MainCtrl', ['$scope', '$location', '$http',
function MainCtrl($scope, $location, $http) {
$scope.message = "Dobro došli u sustav za kontrolu skladišta u pivovari Medvedgrad.";
}])

pivoAppControllers.controller('regCtrl', function($scope,$http){
$scope.insertdata = function(){
$http.post("insert.php", {'ime':$scope.ime, 'prezime':$scope.prezime, 'username':$scope.username })
.success(function(data,status,headers,config){
console.log("Podaci uspiješno spremljeni");
alert("Podaci za novog korisnika su uspiješno spremljeni. Novi korisnik se sada može prijaviti u aplikaciju sa navedenim podacima.");
});
}
});




app.js

'use strict';
// App Module


var pivoApp = angular.module('pivoApp', [
'ngRoute',
'pivoAppControllers'
]);

pivoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
when('/registracija', {
templateUrl: 'templates/registracija.html',
controller: 'regCtrl'
})
;



$locationProvider.html5Mode(false).hashPrefix('!');
}
]);






http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=pivoApp&p1=ReferenceError%3A%20when%20is%20not%20defined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fjs%2Fapp.js%3A17%3A2%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A41%3A376)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A321)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A445%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20db%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A20%3A359)%0A%20%20%20%20at%20Bc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A21%3A163)%0A%20%20%20%20at%20ge%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A19%3A484




Answer

You missed a period before one of your whens change your app.js to:

'use strict';
// App Module


    var pivoApp = angular.module('pivoApp', [
      'ngRoute',
      'pivoAppControllers'
    ]);

    pivoApp.config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) {
        $routeProvider
        .when('/', {
          templateUrl: 'main.html',
          controller: 'MainCtrl'
        })
        .when('/registracija', {
          templateUrl: 'registracija.html',
      controller: 'regCtrl'
        })
        ;

and it should work. plunkr:https://plnkr.co/edit/6lUYQdVVClZVsW2wQ1SA?p=preview

Comments