Gleb Z. Gleb Z. - 1 year ago 51
Javascript Question

Cant add second ng-controller

I am pretty new in angular/js development so now i stacked with this.

When I add ng-controller="HeaderController" to my HTML code it cant load Angular. If you remove this everything is fine. Why that happened? Thanks for any help and sorry for bad English :)

Code:



(function() {
var app = angular.module ('FunStuff',[]);

app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController'['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
})();

<!DOCTYPE html>
<html ng-app ="FunStuff">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>LEARN JS</title>
<meta charset="utf-8">
</head>

<body >

<header ng-class = "ColorClass" ng-controller="HeaderController">
<h1>$~/Path_To_Js/</h1>
<button class="changeColorBtn" ng-click="changeColorClass('white')">
ChangeColorButton
</button>
</header>

<div class="wrapper" >
<article ng-controller = "TextController">
<p>There will be some information</p>
<form ng-submit="add()">
<input ng-model="name"><button>Add</button>
</form>
<ul class="buttons" ng-repeat= "n in stuff track by $index">
<li>{{n}}</li>
</ul>
</article>
</div>
<script type="text/javascript" src="index.js"></script>
</body>

</html>




Answer Source

As your error says, You are missing , after the header controller,

app.controller ('HeaderController',['$scope',function($scope){
        $scope.textClass = '';
        $scope.changeClrClss = function(name){
            $scope.ClrClss = name;
        }
    }]);

DEMO

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

	app.controller ('TextController',['$scope',function($scope){
		$scope.stuff = [];
		$scope.add = function(){
				$scope.stuff.push ($scope.name);
		}
	}]);
	app.controller ('HeaderController',['$scope',function($scope){
		$scope.textClass = '';
		$scope.changeClrClss = function(name){
			$scope.ClrClss = name;
		}
	}]);
<!DOCTYPE html>
<html ng-app ="FunStuff">

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>LEARN JS</title>
	<meta charset="utf-8">
</head>

<body >

	<header  ng-class = "ColorClass" ng-controller="HeaderController">
		<h1>$~/Path_To_Js/</h1>
		<button class="changeColorBtn" ng-click="changeColorClass('white')">
			ChangeColorButton
		</button>
	</header>

	<div class="wrapper" >
		<article ng-controller = "TextController">
			<p>There will be some information</p>
			<form ng-submit="add()">
				<input ng-model="name"><button>Add</button>
			</form>
			<ul class="buttons" ng-repeat= "n in stuff track by $index">
				<li>{{n}}</li>
			</ul>
		</article>
	</div>
	<script type="text/javascript" src="index.js"></script>
</body>

</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download