vruslan / angular-hybrid

Angular Hybrid CRUD operations

Angular Hybrid

Simple UI-Router example using route to both AngularJS components and Angular components.
Consideration about hybid mode:

• @angular/upgrade/static, which is what the Angular team actively supports for hybrid mode
• @uirouter/angular-hybrid version 3.0.0 because will support only UpgradeModule(More documentation here)

Framework versions :

• @angular: 4.0.0
• angular: 1.6.5
• types/angular: 1.6.31 (Needed for uirouter/angular-hybrid)
• typescript: 2.4.2
• webpack: 3.5.5

The hybrid application is bootstrap inside app.main.ts and at bootstrap time the default state will be ContactsList Component, is defined inside app.contacts.ts. Structure Files:

AngularJS Module is declared inside app.contacts.ts. Feature is broken by module, trying to follow the Sacrificial Architecture (described here). So there are module for:

• List Contact (Folder listContact, module myApp.listContacts)
• Edit Contact (Folder: addContact, module myApp.editContact)
• Add Contact (Folder: addContact, module myApp.addContact)
• Header (Folder: heder, module myApp.header)
• Services (Folder: serviceContacts, module myApp.serviceContacts)

Angular Module is declared under ng4App folder in ng4Module.ts file, there some default angular imports and some uirouter dependecies.

Here are declared three simple components:

• BookList
• BookListItem
• BookDetail (where is present a trivial new resolve ui router declaration).

There is a interesting thing, it possible to inject Angularjs Service inside Angular. Inside providers tag,is injected the ContactService a Angularjs Service. The same singleton instance of each service is shared between the frameworks. In Angular these services will always be in the root injector and available to all components.

Utils Link

Upgrading from AngularJS (Official Guide)

UI-Router support Example for Hybrid Angular/AngularJS apps