I made a little fiddle here. In the example below, there are 3 controllers:
1st is a regular controller.
2nd I changed ordering of controller constructor parameters
3rd Assigned value to local $scope instead of $rootScope.
2nd controller shows that even I when changed ordering and number of parameters, value still gets assigned to root scope. From this I conclude angular somehow knows names of parameters for a function, regardless of their order? (kinda like named parameters?) This sounds weird to me. How can parameter names mean something outside of function's own 'curly brackets'?
3rd controller shows, all local scopes are a copy of $rootScope, and {{variable}} convention points to variable inside local scope, instead of the global root scope.
Am I right in these two conclusions?
index.html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div ng-controller="myController">
<h3>Echo: {{one}}</h3>
</div>
<div ng-controller="myController2">
<h3>Echo: {{two}}</h3>
<h3>Echo: {{three}}</h3>
</div>
<div ng-controller="myController3">
<h3>Echo: {{three}}</h3>
</div>
</body>
</html>
script.js
var app = angular.module('myApp',[]);
app.run(function($rootScope) {
$rootScope.today = new Date();
});
app.controller("myController", function($rootScope, $scope){
$rootScope.one = 'root scope one';
});
app.controller("myController2", function($scope, $scope, $rootScope){
$rootScope.two = 'root scope two';
});
app.controller("myController3", function($scope, $scope, $rootScope){
$scope.three = '~scope three';
});
outputs:
Echo: root scope one
Echo: root scope two
Echo:
Echo: ~scope three
