<commit_before>---
layout: post
title: "Migrating an Angular 1 App to Angular 2 - Part 1"
description: "Learn how to migrate popular, real-world features of an Angular 1 application to Angular 2"
date: 2016-11-07 8:30
category: Technical guide, Angular, Angular2
banner:
  text: "Auth0 makes it easy to add authentication to your AngularJS application."
author:
  name: "<NAME>"
  url: "https://twitter.com/KimMaida"
  mail: "<EMAIL>"
  avatar: "https://en.gravatar.com/userimage/20807150/4c9e5bd34750ec1dcedd71cb40b4a9ba.png"
design:
  image: https://cdn.auth0.com/blog/angular/logo.png
  image_size: "75%"
  image_bg_color: "rgb(1, 70, 166)"
  bg_color: "rgb(1, 70, 166)"
  bg_merge: true
tags:
- angular2
- angular
- migrate
related:
- 2016-09-29-angular-2-authentication
- 2016-09-15-angular-2-ngmodules
---

**TL;DR:** Many AngularJS 1.x developers are interested in Angular 2, but the major differences between versions 1 and 2 are daunting when we have so many Angular 1 apps already in production or maintenance. Learn how to migrate a real-world Angular 1 app to Angular 2: what's the same, what's similar, and what's completely different. After this tutorial, you should be prepared to tackle your own migrations as well as new Angular 2 projects.

---

## Angular 1 and Angular 2

[AngularJS 1.x](https://angularjs.org/) has been a frontrunner among JavaScript frameworks over the past few years. There are thousands of production sites and apps [built with Google's "superheroic MVW framework"](https://www.madewithangular.com) and many more still in development. In mid-September 2016, [Angular 2 was released](http://angularjs.blogspot.com/2016/09/angular2-final.html) after a lengthy period of betas and release candidates. Angular developers knew this was coming and that [Angular 2](https://angular.io/) was a full rewrite and platform implementation, not an incremental update. 

While Angular developers were and _are_ eager to try Angular 2, adoption can be challenging. Many of us have Angular 1 apps in development or maintenance and aren't in a position to migrate them to Angular 2 due to tight deadlines, budget constraints, client or management reluctance, etc. Angular 1 is still being maintained and Angular 1 apps are not about to go away.

> **NOTE:** [Angular 2 uses SemVer (Semantic Versioning)](http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html?view=classic). This means that unlike Angular 1, there will no longer be breaking changes in point releases.

## Migrate vs. Upgrade

Angular 2 is a powerful and attractive platform. Many developers will have their first opportunity to dig in when they tackle migrating an existing Angular 1 app to Angular 2. At this time, **_upgrading_** the original codebase is extremely difficult: Angular 2 is not an iteration of Angular 1. Moving between them is more straightforward when **_migrating_** to a fresh build that implements the same features on a new platform.

We'll walk through the process of migrating an Angular 1 app to Angular 2. Our Angular 1 project is relatively small but it represents a scalable, real-world Single Page Application. After following this tutorial, you should have a better understanding of how to get started with Angular 2 and how features from Angular 1 translate to Angular 2.

**This tutorial assumes you are comfortable developing apps with AngularJS version 1.x.** If you're just looking to learn Angular 2, check out resources like [Angular 2 Authentication](https://auth0.com/blog/angular-2-authentication/) and [Getting Started with Angular 2](https://school.scotch.io/getting-started-with-angular-2).
I
## Angular 1 "ng1-dinos"<commit_msg>Add github repo link to tl;dr<commit_after>---
layout: post
title: "Migrating an Angular 1 App to Angular 2 - Part 1"
description: "Learn how to migrate popular, real-world features of an Angular 1 application to Angular 2"
date: 2016-11-07 8:30
category: Technical guide, Angular, Angular2
banner:
  text: "Auth0 makes it easy to add authentication to your AngularJS application."
author:
  name: "<NAME>"
  url: "https://twitter.com/KimMaida"
  mail: "<EMAIL>"
  avatar: "https://en.gravatar.com/userimage/20807150/4c9e5bd34750ec1dcedd71cb40b4a9ba.png"
design:
  image: https://cdn.auth0.com/blog/angular/logo.png
  image_size: "75%"
  image_bg_color: "rgb(1, 70, 166)"
  bg_color: "rgb(1, 70, 166)"
  bg_merge: true
tags:
- angular2
- angular
- migrate
related:
- 2016-09-29-angular-2-authentication
- 2016-09-15-angular-2-ngmodules
---

**TL;DR:** Many AngularJS 1.x developers are interested in Angular 2, but the major differences between versions 1 and 2 are daunting when we have so many Angular 1 apps already in production or maintenance. Learn how to migrate a real-world Angular 1 app to Angular 2: what's the same, what's similar, and what's completely different. After this tutorial, you should be prepared to tackle your own migrations as well as new Angular 2 projects. Clone the code for our Angular 2 app from the [ng2-dinos GitHub repo](https://github.com/auth0-blog/ng2-dinos).

---

## Angular 1 and Angular 2

[AngularJS 1.x](https://angularjs.org/) has been a frontrunner among JavaScript frameworks over the past few years. There are thousands of production sites and apps [built with Google's "superheroic MVW framework"](https://www.madewithangular.com) and many more still in development. In mid-September 2016, [Angular 2 was released](http://angularjs.blogspot.com/2016/09/angular2-final.html) after a lengthy period of betas and release candidates. Angular developers knew this was coming and that [Angular 2](https://angular.io/) was a full rewrite and platform implementation, not an incremental update. 

While Angular developers were and _are_ eager to try Angular 2, adoption can be challenging. Many of us have Angular 1 apps in development or maintenance and aren't in a position to migrate them to Angular 2 due to tight deadlines, budget constraints, client or management reluctance, etc. Angular 1 is still being maintained and Angular 1 apps are not about to go away.

> **NOTE:** [Angular 2 uses SemVer (Semantic Versioning)](http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html?view=classic). This means that unlike Angular 1, there will no longer be breaking changes in point releases.

## Migrate vs. Upgrade

Angular 2 is a powerful and attractive platform. Many developers will have their first opportunity to dig in when they tackle migrating an existing Angular 1 app to Angular 2. At this time, **_upgrading_** the original codebase is extremely difficult: Angular 2 is not an iteration of Angular 1. Moving between them is more straightforward when **_migrating_** to a fresh build that implements the same features on a new platform.

We'll walk through the process of migrating an Angular 1 app to Angular 2. Our Angular 1 project is relatively small but it represents a scalable, real-world Single Page Application. After following this tutorial, you should have a better understanding of how to get started with Angular 2 and how features from Angular 1 translate to Angular 2.

**This tutorial assumes you are comfortable developing apps with AngularJS version 1.x.** If you're just looking to learn Angular 2, check out resources like [Angular 2 Authentication](https://auth0.com/blog/angular-2-authentication/) and [Getting Started with Angular 2](https://school.scotch.io/getting-started-with-angular-2).
I
## Angular 1 "ng1-dinos"
{'fraction_non_alphanumeric': 0.07855428114163777, 'fraction_numerical': 0.03574286476393705, 'mean_word_length': 4.5962686567164175, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 17, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3402372', 'n_tokens_mistral': 2300, 'n_tokens_neox': 1953, 'n_words': 991}