AngularJS Overview and Best Practices
One Way
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body ng-init="firstName = 'Peter'; lastName = 'Pan';">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span>
</body>
</html>
Two Way
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body ng-init="firstName = 'Peter'; lastName = 'Pan';">
<strong>First name:</strong> {{firstName}}<br />
<input type="text" ng-model="firstName"><br /><br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<input type="text" ng-model="lastName">
</body>
</html>
Lists
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body ng-init="persons = [{'name': 'Person 1'},
{'name': 'Person 2'}, {'name': 'Person 3'}]">
<ul>
<li ng-repeat="person in persons">
<span>{{person.name}}</span>
</li>
</ul>
</body>
</html>
<div ng-controller="PersonController as pc">
First Name: <input type="text" ng-model="pc.firstName"><br>
Last Name: <input type="text" ng-model="pc.lastName"><br>
<br>
Full Name: {{pc.firstName + " " + pc.lastName}}
</div>
(function(){
'use strict';
angular.module('person').controller('PersonController', ['$scope', function ($scope) {
$scope.firstName = 'Peter';
$scope.lastName = 'Pan';
}]);
})();
Dependency Injection = Takes control of creating components, resolving their dependencies, and providing them to other components as requested
(function(){
'use strict';
angular.module('person')
.controller('PersonController', ['$scope', 'persons', 'notifications'
function ($scope, persons, notifications) {
$scope.persons = persons.getAll().then(function(response) {
notifications.success('Persons loaded.');
}, function(error) {
notifications.error('An error occured while loading the data.');
});
}
]);
})();
(function(){
'use strict';
angular.module('person')
.factory('persons', ['apiService', function (apiService) {
// Interface
var persons = {
getAll: getAll,
get: get,
add: add
};
return persons;
// Implementation
function getAll() {
return apiService.call('GET', '/persons/getAll');
}
]);
})();
Factory vs. Service
(function(){
'use strict';
angular.module('person')
.directive('personList', [function () {
return {
restrict: 'AECM',
replace: true, // make sure there is only one top level node
transclude: true,
controller: function($scope, $element, $attrs),
require: 'ngModel', // ^, ?
link: function($scope, $element, $attributes, controller),
scope: {
data: '=' // @, =, &, ? e.g. =? or =?my-data
},
template: '<div>Test</div>', // or as function
templateUrl: './test.html',
compile: function(tElement, tAttrs), // pre-link, post-link
priority: 0 // default
};
]);
})();
<span person:list="data"></span>
<span person_list="data"></span>
<span person-list="data"></span>
<span data-person-list="data"></span> // Best Practice
<span x-person-list="data"></span>
// or as an element
<person-list></person-list> // no support for IE8 and below
Search: <input ng-model="searchText">
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
Name only <input ng-model="search.name"><br>
Phone only <input ng-model="search.phone"><br>
Equality <input type="checkbox" ng-model="strict">
<table id="searchObjResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friendObj in friends | filter:search:strict">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
(function(){
'use strict';
angular.module('common.filters')
.filter('reverse', [function () {
function reverse(input) {
input = input || '';
var result = "";
for (var i = 0; i < input.length; i++) {
result = input.charAt(i) + result;
}
return result;
}
reverse.$stateful = true; // executes each digest cycle
return reverse;
]);
})();
<div>{{ lagerregal | reverse }}</div>
(function() {
// prevents from certain actions from being taken and throws more exceptions.
'use strict'
app.module(...
})();
<div ng-controller="ParentController as pc">
{{ pc.name}}
<div ng-controller="ChildController as cc">
{{ cc.name }}
</div>
</div>
return {
restrict: 'EA',
scope: {
value: '='
},
link: linkFn,
controller: ExampleController,
controllerAs: 'vm'
};
(function() {
'use strict';
angular.module('dashboard').controller('Dashboard', Dashboard);
dataservice.$inject = ['$http', 'logger'];
function Dashboard($http, logger) { }
})():
(function() {
'use strict';
angular.module('dashboard').factory('persons', persons);
function persons() {
// Interface
var persons = {
getAll: getAll
}
return persons;
// Implementation
function getAll() {}
}
})():
$http.get('/Checklist/Index')
.then(function(response) { return transform1(response) })
.then(function(response) { return transform2(response) })
.then(function(response) { return transform3(response) });
<div data-ng-controller="ParentController as pc">
<div data-my-directive>
<span>Text goes here</span>
</div>
</div>
2. Enhance the WYSIWYG directive so that values in ngModel
are parsed and formatted as markdown
3. Develop a directive with a Datepicker?