如何在Angular1.x项目中引入Angular 2代码？附实施步骤咨询

Absolutely! You can mix Angular 1.x (often called AngularJS) and Angular 2+ code in the same project—this is actually an officially supported approach for gradual migration. The Angular team built the Upgrade Module (formerly ngUpgrade) to let you run both frameworks side by side, share components/services, and migrate piecemeal instead of doing a risky full rewrite. Let me break down how to pull this off, step by step, plus how to write Angular 2-flavored code within your existing AngularJS codebase.

Is integrating Angular 2 into Angular 1.x possible? #

Short answer: Yes! The Upgrade Module acts as a bridge between the two frameworks. It lets you:

• Run AngularJS and Angular 2 components in the same app
• Share services between both frameworks
• Migrate parts of your app to Angular 2 one piece at a time, without breaking existing functionality

Step-by-step implementation for integrating Angular 2 into Angular 1.x #

Step 1: Update your build pipeline #

First, you'll need to adjust your build setup to handle both AngularJS and Angular 2 code. Angular 2 relies heavily on TypeScript, so you'll need to add that to your stack if you aren't using it already.

• Install core dependencies via npm:

  npm install @angular/core @angular/common @angular/upgrade rxjs zone.js typescript
  

• Configure your tsconfig.json to target ES5, use CommonJS modules, and enable decorators (required for Angular 2 syntax).

Step 2: Bootstrap both frameworks #

Instead of just bootstrapping your AngularJS app, you'll use the Upgrade Module to launch both frameworks together. Here's a basic example in TypeScript:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/angular2-app.module'; // Your new Angular 2 module
import { angularjsApp } from './app/angularjs-app.module'; // Your existing AngularJS module

// Bootstrap Angular 2 first, then AngularJS via the Upgrade Module
platformBrowserDynamic().bootstrapModule(AppModule)
  .then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, [angularjsApp.name]);
  });

Step 3: Share components between frameworks #

The Upgrade Module lets you wrap components from one framework to use in the other:

• Use AngularJS components in Angular 2: Wrap AngularJS components with UpgradeComponent to use them in Angular 2 templates:

  import { UpgradeComponent } from '@angular/upgrade/static';
  import { Component, Directive, ElementRef, Injector } from '@angular/core';
  
  @Directive({
    selector: 'my-angularjs-component'
  })
  export class AngularJSComponentWrapper extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
      // 'myAngularjsComponent' is the name of your AngularJS component
      super('myAngularjsComponent', elementRef, injector);
    }
  }
  

• Use Angular 2 components in AngularJS: Use downgradeComponent to expose Angular 2 components as AngularJS directives:

  import { downgradeComponent } from '@angular/upgrade/static';
  import { MyAngular2Component } from './my-angular2.component';
  
  angular.module('angularjsApp')
    .directive('myAngular2Component', downgradeComponent({ component: MyAngular2Component }) as angular.IDirectiveFactory);
  

Step 4: Share services between frameworks #

You can also share business logic between the two frameworks:

• Use Angular 2 services in AngularJS: Use downgradeInjectable to make Angular 2 services available in AngularJS's DI system.
• Use AngularJS services in Angular 2: Use UpgradeInjectable to wrap AngularJS services so they can be injected into Angular 2 components.

Step 5: Migrate incrementally #

Start small—migrate isolated components or services first (like a utility service or a simple UI component). Once a piece is fully migrated to Angular 2, you can remove the corresponding AngularJS code. Over time, you'll replace more and more of the app until it's fully on Angular 2+.

How to write Angular 2-style code in Angular 1.x #

Even before integrating Angular 2, you can adopt Angular 2 patterns in your AngularJS code to make future migration way easier:

• Use Components over Controllers
  AngularJS 1.5+ introduced components, which are almost identical to Angular 2 components. Use them instead of standalone controllers and scopes:

  angular.module('myApp').component('userProfile', {
    bindings: {
      user: '<' // One-way binding, just like Angular 2's @Input()
    },
    template: `
      <h2>{{ $ctrl.user.fullName }}</h2>
      <button ng-click="$ctrl.openEditModal()">Edit Profile</button>
    `,
    controller: function() {
      this.openEditModal = () => {
        // Your logic here
      };
    }
  });
  

• Switch to TypeScript
  Start writing new AngularJS code in TypeScript. This will get you comfortable with the type system, class syntax, and decorators that Angular 2 uses, making the transition seamless.

• Stick to One-Way Data Binding
  Avoid two-way binding (=) wherever possible, and use one-way bindings (<) instead. This aligns with Angular 2's unidirectional data flow, making your app's data flow more predictable.

• Ditch $scope entirely
  Use the controllerAs syntax (like $ctrl in the example above) for all your components. Angular 2 doesn't have $scope, so getting rid of it now will eliminate a big migration pain point.

• Class-Based Services
  Write your AngularJS services as classes with constructor injection (especially if using TypeScript):

  class UserService {
    constructor(private $http: angular.IHttpService) {}
  
    fetchUser(userId: number) {
      return this.$http.get(`/api/users/${userId}`);
    }
  }
  
  angular.module('myApp').service('userService', UserService);
  

内容的提问来源于stack exchange，提问作者Kiran