how to include controller.js into ng-include html page?

Question

this is home.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css"	href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>

<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>




<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>


<script type='text/javascript'>//<![CDATA[ 
  //angular module
  
	'use strict';
	alert("1");
	var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
	
	myApp.controller('commonController', ['$scope', '$http',  function($scope, $http) {
		$scope.menus =  [
			        	   { link : '/summary', treeState : '' , url: 'body.html'},
			        	   { link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
			        	  
			        	];
		
		$scope.menu = $scope.menus[0];
		
	
	}]);


</script>
</head>



<body  ng-controller="commonController">

	<div>
		<div ng-include="'head.html'"></div>
	</div>
	
	
	<!-- footer  -->
	<footer class="footer">
		<div ng-include="'footer.html'"></div>
	</footer>
	<!-- footer  -->

</body>

</html>

and

head.html is

<script type='text/javascript'>

myApp.controller('headController', ['$scope', '$http',  function($scope, $http) {
	
	$scope.change = function (param){
		alert(param);
		
	};
}]);

</script>



<div ng-controller="headController">
    details......
</div>

use angularjs version 1.3.7

problem is 'can't find headController'

in my code what shoud i do ? can i change my angular version? 1.2.X version can allow function headController($scope){ .....}; but 1.3.7 not work what can i do ?

you should check stackoverflow.com/questions/12197880/…

bahadir
– bahadir

2014-12-25 16:28:22 +00:00
Commented Dec 25, 2014 at 16:28 — bahadir
– bahadir, Commented Dec 25, 2014 at 16:28

DavidEdwards · Accepted Answer · 2014-12-31 22:30:45Z

0

This is a know issue that has been reported.

https://github.com/angular/angular.js/issues/3756

https://gist.github.com/endorama/7369006

Long story short, the script tag is a special little flower and angular does not treat it as such. If you include jquery before you include angular this issue will resolve itself. Otherwise you can do the script lazy loading technique that the github links recommend.

Or just move the script tag from head.html and put it on home.html since it will always be needed. (Disclaimer: I would not do this for an app of any size and complexity, but for something small it is the easiest solution. Of course creating js files and including them via seperate scripts would be best.)

answered Dec 31, 2014 at 22:30

DavidEdwards

5933 silver badges12 bronze badges

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

3 Comments

Cha winter Over a year ago

thank you , I solved this problem ....using this code App.config(function ($controllerProvider) { App.controller = $controllerProvider.register; });

supersan Over a year ago

@Chawinter thanks! your comment helped me to get it to work.. you should add it as an answer and then mark it as the "Accepted answer" so that somebody doesn't miss this gem.

Senica Gonzalez Over a year ago

two hours...two freaking hours. Thanks, your comment helped @Cha winter

Collectives™ on Stack Overflow

how to include controller.js into ng-include html page?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related