Von Knockout zu

AngularJS

Navigation mit Esc, → und ↓

 ### [johanneshoppe.de](http://johanneshoppe.de)

##  != 

### Bindings

## Demo

[Demo](examples/01_bindings/jQuery.html)

## jQuery ```html contenteditable data-show-source="examples/01_bindings/jQuery.html" loading source... ```
[Demo](examples/01_bindings/jQuery.html)


## Knockout ```html contenteditable data-show-source="examples/01_bindings/knockout.html" loading source... ```
[Demo](examples/01_bindings/knockout.html)

## Angular quick & dirty ```html contenteditable data-show-source="examples/01_bindings/angular.html" loading source... ```
[Demo](examples/01_bindings/angular.html)

## Angular mit Module + Controller ```js contenteditable data-show-source="examples/01_bindings/angular2.js" loading source... ``` ```html contenteditable small data-show-source="examples/01_bindings/angular2.html" loading source... ```
[Demo2](examples/01_bindings/angular2.html)

 ### Wechseln?

• Views bei beiden
  direkt der DOM
• NG-Directives weniger Code,
  mehr Eleganz
• Dirty checking vs. Observables

### Templating

## Knockout template-Binding ```html contenteditable data-show-source="examples/02_templating/knockout.html" loading source... ```
[Demo](examples/02_templating/knockout.html)

## Angular Custom Directives ```html contenteditable data-show-source="examples/02_templating/angular.html" loading source... ``` ```html contenteditable data-show-source="examples/02_templating/angular_short.js" loading source... ```
[Demo](examples/02_templating/angular.html)

 ### Wechseln?

• KO-Templates
  → NG-Directives gleiches Prinzip
  weniger Code
• KO-Bindings
  → NG-Directives ggf. viel Aufwand

### Modularer Code

## AMD `define('require')`

## Knockout + require.js ```js contenteditable data-show-source="examples/03_modules/knockout.viewModel.js" loading source... ```
[Demo](examples/03_modules/knockout.html)

## AMD ist nur ein klein wenig Dependency Injection

## Angular `angular.module()`
[Demo](examples/03_modules/angular_provider.html)

## Angular 100% Dependency Injection ```js contenteditable data-show-source="examples/03_modules/angular_provider_short.js" loading source... ```
[Demo](examples/03_modules/angular_provider_short.js)

## Angular mit AMD ```js contenteditable data-show-source="examples/03_modules/angular.exampleApp.js" loading source... ```
[Demo](examples/03_modules/angular.html)

 ### Wechseln?

• AMD-kompatibel * Wiederverwendung von AMD-Code
• AMD-Module
  + NG-Module beide Konzepte ergänzen sich

* mit Shim!

### Routing

### Docs [bit.ly/Ko2NgDocs](http://bit.ly/Ko2NgDocs)

## Download #### [github.com/JohannesHoppe](https://github.com/JohannesHoppe/FromKnockout2Angular)

## Danke!