2

I am preparing a talk about "Be ready for Angular 2.0 today" and I intend to talk about application structure changes needed in order to make the migration path easier (I know, Angular 2.0 is not ready, but the basic concepts are ready).

I started a demo project in order to demonstrate a "before" app, written the plain "old" Angular 1.x way. I then intend to change this app's structure to be written as component tree and communicate between components (directives) via attributes (similar to property binding and event binding in Angular 2. The event binding will be via attribute event-methods). The next step will be changing the code to use Typescript and then last part will be to write the same app using actual Angular 2.0.

My question is - I have html inputs written in Angular 1.x, using ng-model, and two way databinding. I want to change it to be as much "Angular 2 way" as I can - meaning communicate with their parent component via attributes and events. This is my demo project (component breakdown is marked using dashes)

enter image description here

The only way I can think about doing it is not using ng-model, something like:

<input ng-keyup="ctrl.event()" value={{ctrl.value}} />

Any comment will be highly appreciated!!

Yaniv Efraim
  • 6,633
  • 7
  • 53
  • 96
  • Can you share the slides and the code? – Adrian Mitev Aug 18 '15 at 12:22
  • Sure, I will love to! It is currently in development so it will take some time (: – Yaniv Efraim Aug 18 '15 at 12:24
  • BTW - this is a link to a blog post I wrote on this subject. The talk should be more detailed and hopefully more advanced (: http://yanivefraim.github.io/2015/05/27/be-ready-for-angular2-today-part1.html – Yaniv Efraim Aug 18 '15 at 12:33
  • 1
    I think this could help you somehow. It's their strategy to upgrade from ng1 to ng2 : [Angular 1 to Angular 2 Upgrade Strategy](https://docs.google.com/document/d/1xvBZoFuNq9hsgRhPPZOJC-Z48AHEbIBPlOCBTSD8m0Y/edit#) – Eric Martinez Aug 18 '15 at 22:05

1 Answers1

1

To make it the most Angular 1 way, the simplest would be to use template driven forms in Angular 2 ng-model (see here), and compare that with a ng-model Angular 1 form. Apart from some template syntax changes, they should look very similar. check here for a running example.

If you prefer not to use the form builder API, ng-model can be used without it as it only synchronizes the model with the view and vice-versa. This would be the Angular 2 version for the input:

<input [(ng-model)]="value" (keyup)="event()">
Angular University
  • 42,341
  • 15
  • 74
  • 81
  • This is cool stuff, thanks. I'm not sure that I understand your suggestion about using the template driven forms with Angular 1.x. I was thinking about implementing a uni-directional flow directive that will act similar to Angular 2's ng-model and will work on Angular 1.x (something like ng2-model directive that will have attributes for incoming data and events for outgoing data). This directive will replace ng-model's two way databinding – Yaniv Efraim Aug 19 '15 at 09:14
  • What's the purpose of (keyup)="event()"? – Adrian Mitev Aug 19 '15 at 13:00
  • Its like ng-keyup in angular 1, binds an event handler to the keyup event – Angular University Aug 19 '15 at 13:12
  • So event() is an angular2 function that is required for the [(ng-model)] to work properly? – Adrian Mitev Aug 19 '15 at 13:35
  • Its the name of the controller function ctrl.event() (see question the ng-1 template snippet – Angular University Aug 19 '15 at 14:20
  • I did this waym but I'm having some issues. Can you please take a look here? http://stackoverflow.com/q/32294361/916450 – Yaniv Efraim Aug 30 '15 at 08:50