My Angular learnings this far...
================================
* Angular Fontselect Directive
* [Github](https://github.com/Jimdo/angular-fontselect)
* [Modularity in Angular](#/4)
* [My Setup for angular Projects](#/5)
I am
----
Hannes / Xiphe
JS-Dev @ [Jimdo](http://jimdo.com)
Story
=====
As a user, i want fonts!
------------------------
* Lots!
* Simple interface
* No technical details _(dafuck is webfonts?)_
* Complete fonts for my Language (Cyrillic, Japanese)
* Live preview
Another Story
=============
As a developer, i want cool stuff!
----------------------------------
* Independent modules
* Expandability
* A motivating environment
* Testing
* Building
* Sandboxing
$Scope Basics
-------------
__app.js__
```js
angular.module('myApp', []).directive('greeter', function() {
return {
controller: ['$scope', function($scope) {
$scope.greetings = 'Hello';
}]
}
});
```
__view.html__
```html
<div greeter>{{greetings}} World!</div>
```
[Fiddle](http://jsfiddle.net/k7JGw/)
$Scope and his Parent
---------------------
__app.js__
```js
angular.module('myApp', []).directive('scoper', function() {
return {
controller: ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.isSame = function() {
return $scope === $rootScope;
}
}]
}
});
```
__view.html__
```html
<div scoper>$scope is{{!isSame() ? ' not' : ''}} $rootScope</div>
```
[Fiddle](http://jsfiddle.net/k7JGw/1/)
$Scope and his Parent - part two
--------------------------------
__app.js__
```js
angular.module('myApp', []).directive('scoper', function() {
return {
scope: {},
controller: ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.isSame = function() {
return $scope === $rootScope;
}
}]
}
});
```
__view.html__
```html
<div scoper>$scope is{{!isSame() ? ' not' : ''}} $rootScope</div>
```
[Fiddle](http://jsfiddle.net/k7JGw/2/)
Independence
------------
__app.js__
```js
angular.module('myApp', []).directive('child', function () {
return {
scope: {},
template: 'I have {{attr}} parents.'
}
}).run(['$rootScope', function($rootScope) {
$rootScope.attr = 'the best';
}]);
angular.bootstrap(document, ['myApp']);
```
__view.html__
```html
<div child></div>
```
[Fiddle](http://jsfiddle.net/k7JGw/4/)
Dynamic inheritance
-------------------
__app.js__
```js
angular.module('myApp', []).directive('child', function () {
return {
scope: {
attr: "=tellMeSomeThing"
},
template: 'I have {{attr}} parents.'
}
}).run(['$rootScope', function($rootScope) {
$rootScope.attr = 'the best';
}]);
```
__view.html__
```html
<div child tell-me-some-thing="attr"></div>
```
[Fiddle](http://jsfiddle.net/k7JGw/5/)
All the great things
--------------------
* [node](http://nodejs.org/)
* [Grunt](http://gruntjs.com/)
* [Bower](http://bower.io/)
* [Karma](http://karma-runner.github.io/)
* [Protractor](https://github.com/angular/protractor)
* [Lots of Plugins](https://github.com/Jimdo/angular-fontselect/blob/master/package.json#L23)
Take your time for Grunt
------------------------
#### It's fun, will make you fast and dry up your workflows!
[jQuery](https://github.com/jquery/jquery/blob/master/Gruntfile.js) |
[angular](https://github.com/angular/angular.js/blob/master/Gruntfile.js) |
[CssStats](https://github.com/mrmrs/cssstats/blob/master/Gruntfile.coffee)
Build a Playground
------------------
For you, future contributors and tests.
_...demo incomming_
Karma, digger!
--------------
Unit-Tests - fast, flexible and fun!
_another demo now_
Protract the World
------------------
from broken apps.
_hey, we all love demos *yay_
Tank you!
=========
* Talk to me: [App.net](https://alpha.app.net/xiphe),
[Github](https://github.com/Xiphe),
[Twitter](https://twitter.com/HannesDiem)
* Listen to me: [House on a Hill](http://houseonahill.de),
[Kaleidos Chaos](http://kaleidos-chaos.de)
* Props to my team at: [Jimdo](http://jimdo.com)