Simon de Turck
Web technologist (whatever that means) from Eindhoven, the Netherlands
Simon de Turck
Front-end Developer
WHITE internetbureau
AngularJS
Een introductie
Wat is AngularJS
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
De AngularJS pitch
- Een javascript Framework voor op het MVC / MVVM design pattern gebaseerde web applicaties
- Uitermate geschikt voor 'data-driven' CRUD applicaties en single page apps
- Gemaakt door Miško Hevery en wordt gefinancierd door Google.
- Magic
Angular is ...
- Geen javascript library
- Geen DOM manipulatie tool a-la jQuery (al gebruikt angular wel een subset van jQuery genaamd jqLite)
- Niet geschikt voor apps die veel complexe DOM manipulatie behoeven zoals games of WYSIWYG editors
Wat is AngularJS niet?
AngularJS is what HTML could have been if it had been designed for web application development
- Miško Hevery, de man met het plan
De grondbeginselen van AngularJS
Seperation of concerns
- Data
- UI
- Logic
- Model
- View
- Controller
- JS Objecten
- DOM*
- JS Modules
* DOM = HTML + Directives
Testbaarheid
- View en logic zijn strikt gescheiden
- Dependency injection
- Test tools zijn ingebouwd (unit en end-to-end testing)
Concepten van AngularJS
De belangrijke onderdelen
- Template
- View
- Model
- Scope
- Directive
- Compiler
- DI
- Expression
- Data-Binding
- Controller
- Module
- Injector
- Service
De belangrijke onderdelen
- View: De Dom
- Scope: De 'lijm' tussen controller en views
- Model: De variablen die in een 'scope' bestaan
- Expression: Javascript-achtige snippets {{ expr }}
- Data-binding: Sync van data tussen controller en view
- Controller: De business logic
Code!
<html ng-app>
<body>
<h1>Databinding</h1>
<input ng-model="user.name" placeholder="naam">
<input ng-model="user.lastname" placeholder="achternaam">
<p ng-show="user.name || user.lastname">
Hoi {{user.name}} {{user.lastname}}
</p>
<script src="angular.min.js"></script>
</body>
</html>
2 weg databinding
MVC
<html ng-app="mvcExample">
<body ng-controller="UserCtrl as userCtrl">
<h1>Databinding MVC</h1>
<input ng-model="userCtrl.user.name" placeholder="naam">
<input ng-model="userCtrl.user.lastname" placeholder="achternaam">
<p ng-show="userCtrl.user.name || userCtrl.user.lastname">
Hoi {{userCtrl.user.name}} {{userCtrl.user.lastname}}
</p>
<button ng-click="userCtrl.shout()">roep</button>
<script src="angular.min.js"></script>
<script>
angular.module('mvcExample', [])
.controller('UserCtrl', UserCtrl);
function UserCtrl() {
this.user = {
name: 'John',
lastname: 'Doe'
};
this.shout = function() {
alert((this.user.name + ' ' + this.user.lastname).toUpperCase());
};
}
</script>
</body>
</html>
<html ng-app="mvcExample">
<body ng-controller="UserCtrl">
<h1>Databinding MVC</h1>
<input ng-model="user.name" placeholder="naam">
<input ng-model="user.lastname" placeholder="achternaam">
<p ng-show="user.name || user.lastname">
Hoi {{user.name}} {{user.lastname}}
</p>
<button ng-click="shout()">roep</button>
<script src="angular.min.js"></script>
<script>
angular.module('mvcExample', [])
.controller('UserCtrl', UserCtrl);
function UserCtrl($scope) {
$scope.user = {
name: 'John',
lastname: 'Doe'
};
$scope.shout = function() {
alert(($scope.user.name + ' ' + $scope.user.lastname).toUpperCase());
};
}
</script>
</body>
</html>
MVC - met scope
Resources
AngularJS docs: https://docs.angularjs.org
Populaire AngularJS modules: http://ngmodules.org/
Bite-size Tutorials: https://egghead.io/
Docs voor vanalles: http://devdocs.io/
In depth tutorial (frontend masters) : http://bit.ly/1FVGr0F
Codeschools Tutorials: http://bit.ly/1p3XWCj
@zimmen - simon@zimmen.com
Bedankt!
AngularJS, een introductie
By Simon de Turck
AngularJS, een introductie
Een introductie van het AngularJS Framework
