Text
@team4talent
http://www.team4talent.be
Joris Brauns
5+ Year web development
Team4Talent
.Net Consultant
Microsoft Certified Solutions Developer
@jorisbrauns
http://blog.jorisbrauns.be
Tim Sommer
6+ Year web development
Team4Talent
.Net Consultant
Competence Manager
@sommertim
http://blog.timsommer.be
- Controllers
- Directives
- Filters & sorting
- Input Validation
- Routing & Views
- Scopes
- Enterprise
- Demo!
Topics
- SPA
- Angular
- jQuery
Introduction
Angular
#T4TRocks
Single Page application
Advantages
DisAdvantages
- Performance
- Cross platform development
- Better user experience
- Native look & feel
- Scaling
- Search engine optimization
- Client/Server code duplication
- Huge JavaScript Repos
- Code complexity
Single page applications
forget jQuery exists
SERIOUSLY !!!
FORGET ....
AngularJS
Superheroic
JavaScript
Framework
MODEL-VIEW-WHATEVER
Where Whatever stands for
"whatever works for you"
Igor Minar
Overview
- Get started
- Scopes
- Controllers
- Lifecycle
- Built-in directives
- Filters & sorting
- Routing & Views
- Input Validation
- Service - Factory - Provider
- Promises
- Building Directives
- Testing
- Enterprise Structure
Lets get started!
Digest Cycle
Controllers
Scopes
Built-in Directives
http://www.cheatography.com/proloser/cheat-sheets/angularjs/
Core
- ng-app
- ng-controller
- ng-include
- ng-repeat
- ng-switch
- ng-view
Display
- ng-class
- ng-cloak
- ng-hide
- ng-if
- ng-show
- ng-* ...
Event
- ng-change
- ng-checked
- ng-click
- ng-selected
- ng-submit
- ng-* ...
COMMUNITY DIRECTIVES
- angular-ui
- ui-utils
- ui-modules
- ui-bootstrap
- ng-grid
- ui-router
- angular-leaflet
- Restangular
- angular-Translate
Filters & Sorting
- currency
- date
- filter
- json
- limitTo
- lowercase
- number
- orderBy
- uppercase
Routing & Views
Validation
//css classes
.ng-valid {}
.ng-invalid {}
.ng-pristine {}
.ng-dirty {}
.ng-touched {}
.ng-untouched {}
Note that 'novalidate' is used to disable browser's native form validation.
ngModel.NgModelController
$error
$pending
$untouched
$touched
$pristine
$dirty
$valid
$invalid
Pauze !
Services
Services
Built-in Services
- $exceptionHandler
- $filter
- $http
- $interval
- $locale
- $get
- $animate
- $compile
- $q
- $location
- $log
start with '$'
Create your own
-
service
-
factory
-
provider
Promises
custom Directives
Get ready to feel lost
DIRECTIVES
A Directive is a marker on a HTML tag that tells Angular to run or reference some Javascript code
4 four methods for invoking a directive
//As an attribute:
<span my-directive></span>
//As a class:
<span class="my-directive: expression;"></span>
//As an element:
<my-directive></my-directive>
//As a comment:
<!-- directive: my-directive expression -->
Let's build our own!
Restrict option
'A' - <span ng-shizzle></span>
'E' - <ng-shizzle></ng-shizzle>
'C' - <span class="ng-shizzle"></span>
'M' - <!-- directive: ng-shizzle -->
Note: You can specify multiple
restrict: 'EA'
REQUIRE option
^ -- Look for the controller on parent elements, not just on the local scope
? -- Don't raise an error if the controller isn't found
scope
@ -- Used to pass a string value into the directive
= -- Used to create a two-way binding to an object that is passed into the directive
& -- Allows an external function to be passed into the directive and invoked
Transclusion
Inclusion of a document or part of a document into another document by reference
Transclusion
Unit tests
describe('PhoneCat controllers', function() {
describe('PhoneListCtrl', function(){
var scope, ctrl;
beforeEach(module('phonecatApp'));
beforeEach(inject(function($controller) {
scope = {};
ctrl = $controller('PhoneListCtrl', {$scope:scope});
}));
it('should create "phones" model with 3 phones', function() {
expect(scope.phones.length).toBe(3);
});
it('should set the default value of orderProp model', function() {
expect(scope.orderProp).toBe('age');
});
});
});
DEMO
Enterprise structure
Extra Info
Alternatives
https://angularjs.org
Useful links
https://builtwith.angularjs.org
http://www.youtube.com/user/angularjs
http://andyshora.com/promises-angularjs-explained-as-cartoon.html
- Controllers
- Scopes
- Directives
- Filters & sorting
- Input Validation
- Routing & Views
- Services
- Promises
- Enterprise
- Demo!
Topics
- SPA
- Angular
- jQuery
Introduction
Angular
Questions?
@jorisbrauns https://www.linkedin.com/in/brauns http://blog.jorisbrauns.be
@sommertim https://www.linkedin.com/in/timsommer http://blog.timsommer.be
https://github.com/timsommer/CvoAntwerpenZuidAngularDemo
https://slides.com/jorisbrauns/angularjs
T4T - SPA Architecture using AngularJS
By Joris Brauns
T4T - SPA Architecture using AngularJS
- 883