Controllers - m-kostira/angularjs-notes GitHub Wiki
see also official docs:
https://docs.angularjs.org/guide/controller (good!)
https://docs.angularjs.org/tutorial/step_02
A controller is a piece of JavaScript code. Via the so called 'scope' object, it exposes data and methods to the HTML template. Then directives in the template can access these data and methods to generate the view(html you see on the page). A controller can be associated with an html tag and its children; this can happen either explicitly, via the 'ng-controller' attribute:
<body ng-controller="CustomersController">
or via some custom directive:
<greet-user></greet-user>
Regarding the scope: it is an object that has properties and methods, assigned to it by the controller. The view has access to the scope, but it is not aware of the controller, nor the controller is aware of the view. In this way, the scope decouples the view from the controller.
There is the concept of scope inheritance, where a controller's scope is available to child controllers and views - these are the controllers and views associated with the child html tags of the controller's tag. Each controller is passed('injected') the scope of its parent controller. From the docs:
AngularJS scopes prototypically inherit from their parent scope, all the way up to the root scope of the application. As a result, assigning values directly on the scope makes it easy to share data across different parts of the page and create interactive applications.
But passing data around indiscriminately using the scope is bad practice, as it breaks encapsulation and promotes tight coupling.
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since 1.5.
https://docs.angularjs.org/guide/component https://docs.angularjs.org/guide/component#example-of-a-component-tree
(function() {
var CustomersController = function ($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers= [{joined: '2000-12-02', name:'John', city:'Chandler', orderTotal: 9.9956}, {joined: '1965-01-25',name:'Zed', city:'Las Vegas', orderTotal: 19.99},{joined: '1944-06-15',name:'Tina', city:'New York', orderTotal:44.99}, {joined: '1995-03-28',name:'Dave', city:'Seattle', orderTotal:101.50}];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
}());
/*
A component binds a controller and a template and has isolate scope:
'In order to make the definition easier, components enforce best practices like
use of controllerAs, bindToController. They always have isolate scope and are
restricted to elements.'
bindToController - binds scope properties directly to the controller
controllerAs - identifier name for to reference the controller in the component's scope.
If present, the controller will be published to scope under the controllerAs name.
If not present, this will default to be $ctrl.
bindings - bindings – {object=} – defines bindings between DOM attributes and
component properties. Component properties are always bound to the component controller
and not to the scope. See https://docs.angularjs.org/guide/component.
*/
angular
.module('managedobjecteditor')
.component('editorWidgetConfig', { //
templateUrl: ':::PLUGIN_PATH:::/views/editor.config.html',
bindings: {
config: '<' // '<' means one way binding, i.e. 1) in this controller we have the 'config'
// property set to the value of the 'config' property in the parent scope (e.g.,
// <my-component config="value"> and 2) if the value of config in the controller scope
// changes, this won't affect config in the parent scope
},
controllerAs: 'vm'
});