This document discusses using TypeScript with Angular to prepare code for migration to Angular 2. It recommends using TypeScript for its static typing and compile-time type checking. It provides steps for modifying an existing Angular project to use TypeScript and approximate Angular 2 components to ease the migration. Key aspects include refactoring data flows, replacing ng-include and ng-controller with component directives, and wrapping markup in component directives.

1. ANGULARTS(TYPESCRIPT)
Ivan Stepic, Senior software engineer at Comtrade

2. WHY NOT ANGULARJS
Many OO developers hates JavaScript (I got you ).
Why?
• No static typing's
• Hard to refactor
• No reliable code completition (you can rely on IDE’s completation,
but in most cases it will not work properly)
• No structuring mechanisms like Interfaces, Classes, Modules
• AngularJS 2.0 is written in Typescript
• Future migration to Angular 2.0 will be extremely hard

3. HOW DIFFICULT IS TO ADOPT AND USE IT?
• Superset of JavaScript
• All JavaScript is valid TypeScript
• Provides static type checking at compile time
• Created by Microsoft and used for building Angular 2.
Any FE developer that came from Java or .net wouldn't need more then
couple days
TYPESCRIPT TO THE RESCUE

4. • All major FE IDEs (Visual Studio, WebStorm, Eclipse, Sublime, Atom,
Visual Studio Code) have support for TypeScript
• Regardless of IDE, use gulp task for compiling TypeScript, for code
completition use IDE’s plugins
• npm install typescript --save
• In package.json file
"dependencies": {
"typescript": "^1.7.3“ – recommendation is to use latest stable version
}
• https://github.com/DefinitelyTyped/DefinitelyTyped
HOW TO USE TYPESCRIPT WITH ANGULAR

5. • Have future migration to Angular 2.0 in mind
• Angular 2.0 uses Component based architecture
• Use TypeScript
• Component is DOM element that has its own view, model, and behavior (if
it’s easier read it controller ), in angular 1.x this can be achieved with
directive with it’s own controller and isolated scope(controllerAs)
• Make Directives, not Controllers
• Remove dependencies on $scope (controllerAs)
• Make directives with Controller using controllerAs syntax
• Approximate components using the existing directive system
HOW TO START NEW PROJECT IN ANGULARTS

6. Template
1
Template
2
Directive 1
Controller 1
Controller
2
Angular 1
PREPARE CODE FOR MIGRATION PROCESS
Component
2
Component
5
Component
4
Component 1
Component
3
Angular 2
Directive
2
Directive
5
Directive 4
Directive 1
Directive
3
Angular 1
Prepared for migration

7. BRIEF ARCHITECTURE
https://github.com/johnpapa/angular-styleguide
Use folders to separate functionalities (those functionalities can
become components in Angular 2.0)
Try to follow John Papa’s style guide

8. app.ts is the main app
bootloader.
BRIEF ARCHITECTURE

9. _all.ts is a single aggregate definitions file that has all
the references to the .ts files in the application and its
always included. This means we don’t need to pollute
each file with definitions. The _all.ts is also auto
generated using a dependency builder.
BRIEF ARCHITECTURE

10. BRIEF ARCHITECTURE
Controllers, Directives, Services
can be written as typescript
classes

11. EXAMPLE HOW TO APROXIMATE COMPONENTS IN ANGULAR 1.X
HTML template – dialog.html
Angular 2 Angular 1
• Usage in HTML

12. Angular 2 Angular 1
DirectiveComponent
Controller

13. MODIFY EXITING PROJECT TO ANGULARTS AND PREPARE
IT FOR MIGRATION TO ANGULAR 2.O
• First migrate templates and already isolated parts of code
• Second Refactor Data Flows
The most important refactoring is about finding references to external data or functions from
inside components, and getting rid of them by replacing them with explicit, bound inputs.
Not all external references inside components are logical inputs. Some of them are logical
outputs, this is most often the case with event handlers(ng-click, ng-change)
• Components should not refer to external scope data. All data that they use from the
surrounding context should be explicitly passed in as scope bindings.
• Introduce a binding (=binding or &binding) for external reference or effect, and put it in
the bindToController section of the component directive.
• Find a template expression, a $watch expression, or a $scope access that is referencing
data inherited from a parent scope , or in case of outputs replace the external function call
or reassignment with an invocation of the new binding.

14. REPLACE NG-INCLUDE WITH COMPONENT DIRECTIVE

15. REPLACE NG-CONTROLLER WITH COMPONENT DIRECTIVE

16. WRAP MARKUP IN COMPONENT DIRECTIVE

17. $WATCH
Original Controller with watch
Goal – remove all external references – directive with controllerAs

18. REPLACE EXTERNAL EFFECT WITH BOUND OUTPUT
Example with Event Handler

19. REPLACE EXTERNAL EFFECT WITH BOUND OUTPUT
Replace Two-way Binding with One-way Binding
If you want to make sure that data flows only in one direction through these
bindings, you can replace them with one-way bindings. The expression binding
syntax '&' can be used here. We've only used it for outputs so far, but it can
also be used for one-way inputs.

20. UPGRADING FROM ANGULAR 1
ngUpgrade
Write Angular 2 code in that app, without changing your working/tested angular 1 code
lets you mix Angular 2 into your existing Angular 1 application. You'll get to take advantage of
Angular 2's improved speed and APIs immediately as you replace components a bit at a time over
the course of your releases.
ngForward
lets you write Angular 1 applications in the syntax of Angular 2. This lets your team get used Angular
2 conventions and styles in your apps today and shorten the distance to doing the full upgrade to
Angular 2 when you're ready.

22. http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
http://www.syntaxsuccess.com/viewarticle/upgrading-angular-1.x-to-2.0
http://angularjs.blogspot.si/
https://angular.io/docs/ts/latest/guide/architecture.html
INSPIRED BY