AngularJS
an introduction
What is AngularJS?
- MVC (-ish)
- Data binding, as in {{amazing}}
- DOM control structures for repeating, showing and hiding DOM fragments
- Attaching new behavior to DOM elements
- Grouping of HTML into reusable components
- Feels kinda magical
A complete client-side solution
Data Binding
Hello World!
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<h1>{{greeting}}</h1>
</div>
</div>
</body>
</html>
angular.module('HelloWorldApp', [])
.controller('HelloWorldController', function($scope) {
$scope.greeting = "Hello World";
});
Controllers
Scopes
Services
AngularJS Module
Service 1
Service 2
Service 3
Ctrl 1
Ctrl 2
Ctrl 3
Ctrl 1
Ctrl 2
Ctrl 3
Singletons
Instances
Business
Logic
View
Logic
Services
angular.module('myApp', [])
.service('MyBusinessLogic', [() => {
this.sendMessage = function (message) {
// do something with message
};
this.getMessages = function () {
let messages = [];
// get messages, somehow
return messages;
}
}])
.controller('MyViewController', ['MyBusinessLogic', (businessLogic) => {
this.messages = businessLogic.getMessages();
this.sendMessage = function (message) {
businessLogic.sendMessage(message);
}
}]);
<div ng-controller="MyViewController as ctrl">
<ul>
<li ng-repeat="msg in ctrl.messages">{{msg}}</li>
</ul>
<button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>
Services
$animate - DOM utilities to support animations
$http - facilitates communication with remote HTTP servers (XHR)
$location - manipulate the browser's address bar
$rootScope - the Angular's global scope (avoid using)
$timeout - wrapper for window.setTimeout
$window - wrapper for window
Directives
<div ng-controller="MyViewController as ctrl">
<ul>
<li ng-repeat="msg in ctrl.messages">{{msg}}</li>
</ul>
<button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>
angular.module('myApp', [])
.controller('MyViewController', [() => {
this.messages = [
'message 1',
'message 2',
'message 3'
];
this.sendMessage = function (message) {
console.log(message);
};
}]);
<div ng-controller="MyViewController as ctrl">
<ul>
<li>message 1</li>
<li>message 2</li>
<li>message 3</li>
</ul>
<button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>
Directives
ngApp - declares an angular app
ngClick - executes a callback when user clicks the element
ngController - attaches a controller to a view
ngHide - hides an element (display: none) based on a property
ngIf - renders an element based on a property
ngModel - binds a model to a user input
ngRepeat - intantiates a template once per item in collection
Directives DIY
<!-- view 1 -->
<div ng-controller="MyViewController as ctrl">
<ul>
<li ng-repeat="msg in ctrl.messages">{{msg}}</li>
</ul>
<button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>
<!-- view 2 -->
<div>
some content
<ul>
<li>hello</li>
<li>world</li>
</ul>
</div>
Directives DIY
angular.module('myApp')
.directive('view-one', [() => {
return {
restrict: 'E',
templateUrl: 'view1.html',
controller: 'MyViewController',
controllerAs: 'ctrl'
};
}]);
angular.module('myApp')
.directive('view-two', [() => {
return {
restrict: 'E',
template: `
<div>
some content
<ul>
<li>hello</li>
<li>world</li>
</ul>
</div>
`
};
}]);
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp">
<view-one></view-one>
<view-two></view-two>
</body>
</html>
Filters
Filters
currency - Formats a number as a currency (ie $1,234.56).
date - Formats date to a string based on the requested format.
filter - Selects a subset of items from array.
limitTo - Creates a new array or string containing only a specified number of elements.
lowercase - Converts string to lowercase.
orderBy - Returns an array ordered by a comparator function.
uppercase - Converts string to uppercase.
This was level 0
- AngularJS: Up and running, Shyam Seshadri, Brad Green
- Mandatory
- PRO AngularJS, Adam Freeman
- Intermediate
- Build Your Own AngularJS, Tero Parviainen
- Advanced
Homework time!
This was level 0
Homework time!
-
https://egghead.io/technologies/angularjs
- Great videos, Blip can provide PRO access
-
https://docs.angularjs.org/guide
- Follow the official guides/api
-
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js
- The best source is... the source!
Godspeed you! Amazing Graduates
Shoot questions - to me or anybody around you!
AngularJS
By André Duarte
AngularJS
- 344