AngularJS controller not called

lukin · 31-05-2015 5:04pm #1

I am having a problem with an AngularJS app/site. I have an index.html file with the following:

<!DOCTYPE html>
<html ng-controller="Basicontroller" ng-app="myApp" >
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/myModule.js" ></script>
<script type="text/javascript" src="modules/controllers.js" >
</script>
<title ng-view>
</title>
	
</head>
<body>
<div ng-view > 
        </div>


</body>
</html>

My myModule.js file is the following:



var ciqApp = angular.module('myApp',[
'ngRoute',
'myController'
        ]);



ciqApp.config(['$routeProvider',
function($routeProvider){

	$routeProvider.
		when('/home',{
			templateUrl:'/Paul/partials/basic-template.html',
			controller:'Basicontroller'

		}).
		otherwise({
                    redirectTo: '/home'
                });

}]);

function MainController($scope){


}

function Basicontroller($scope){
	
$scope.title = 'this is the title';
$scope.body = 'Welcome...';

}

My controller.js file is as follows:

var myController = angular.module('myController', []);

myController.controller('Basicontroller', ['$scope', '$http',
        function ($scope, $http) {
            $http.get('/paul/Index.html#/home').success(function(data) {
                $scope.home = data;
            });
        }]);

My basic-template.html file is:

<h1>{{title}}</h1>
<h4>{{body}} </h4>

The index.html page is in a folder called 'Paul' by the way. When Index.html loads it should have a title with "this is the title' and the body should say "Welcome" (as these are assigned by the $scope variable). I am not getting any errors in the javascript console. When I write some text into 'basic-template.html' it displays it in Index.html so the partial page is loading but the function I am assigning to the controller (Basicontroller) is not.
I would appreciate any replies.

redman85 · 31-05-2015 11:45pm

When you have the Network tab of dev tools open can you see a request for '/paul/Index.html#/home'? What exactly are you trying to do with this?

Also you can only have one 'ng-view' when using the Angular router, you have 'ng-view' on the title attribute and a div.

ui-router allows multiple parallel views but i doubt you need that in this case.

red_ice · 01-06-2015 2:59am

Remove 'ng-view' from title anyway as redman85 said.

Here's something I did a while back, it might help out. I've just got it a single js file. If its just navigating views, and passing a param into it, the below stuff will work.

var app = angular.module ("app", [ 'ngRoute' ] );
 
app.config( function( $routeProvider ){

  $routeProvider.when( "/",
    {
      controller: "myCtrl",
      templateUrl: "/views/home.html"
    }
  );
 
  $routeProvider.when( "/somepoxylist/",
    {
      controller: "myCtrl",
      templateUrl: "/views/somepoxylist.html"
    }
  );
 
  $routeProvider.when( "/somepoxylist/:theID",
    {
      controller: "myCtrl",
      templateUrl: "/views/somepoxylist/whatever-detail.html"
    }
  );

});
 
 
 
app.controller( "myCtrl", function( $scope, $routeParams ){
   
  $scope.theID= $routeParams.theID;

// Do whatever you're looking to do here based on your param blah blah

});

You should look into Services / Factories for getting data. I haven't bothered yet myself tbh, but I will real soon when I get some time. Then again, isnt Angular 2 due soon?

lukin · 01-06-2015 12:29pm

redman85 wrote: »

When you have the Network tab of dev tools open can you see a request for '/paul/Index.html#/home'? What exactly are you trying to do with this?

No I don't see anything in the Network tab when I open it. It's an assignment and we are supposed to get the partial page displaying in the index page (title displaying 'this is the title' and the body displaying 'Welcome...'). But these values have to be passed using the controller function which is called Basicontroller.
Anyway I got it working but not in the way I was supposed to:
I took out one of the "ng-view" attributes from the Index.html page and left just one (see below). I left myModule.js the same but changed controller.js to what is at the very bottom. I am not using the Basicontroller function at all now, I am doing what I wanted to do in that function in the .success function instead.
Not the way I was supposed to do it but I am not sure if it is possible to do it that way.

<!DOCTYPE html>
<html ng-controller="Basicontroller" ng-app="myApp" >
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/myModule.js" ></script>
<script type="text/javascript" src="modules/controllers.js" >
</script>
<title>
</title>
	
</head>
<body>
<div id="container">
	<div ng-view> 
	</div>
</div>

</body>
</html>

controller.js

var myController = angular.module('myController', []);

myController.controller('Basicontroller', ['$scope', '$http',
        function ($scope, $http) {
            $http.get('/paul/Index.html#/home').success(function(data) {            	
            	$scope.title = "title";
                $scope.body = "data";
            });
        }]);

AngularJS controller not called

Comments