Cet article présente principalement la mise à niveau de angularjs, d'angularjs vers angulairejs2+. Lisons maintenant cet article ensemble
Résumons les derniers mois Nous avons travaillé des heures supplémentaires pour mettre à niveau deux projets. Le projet utilise UpgradeModule et l'autre utilise DowngradeModule. Créez un enregistrement comme suit : (ng1->AngularJS; ng2+->Angular2+). Pour plus de détails, veuillez consulter la documentation officielle : https://angular.io/guide/upgrade<.>
Les avantages, les inconvénients et les méthodes d'utilisation du dactylographié qui doivent être utilisés ne seront pas décrits ici.
import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['carepilot'], { strictDi: true });
});import { NgModule, forwardRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
bootstrap: []
})
export class AppModule {
ngDoBootstrap() {}
}{
"compileOnSave": false,
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2015",
"dom"
]
},
"exclude": [
"node_modules"
]
}/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs'
},
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js',
format: 'cjs'
}
}
});
})(this);<script></script> <script></script> <script></script> <script></script> <!-- inject:js --> <!-- endinject --> <script> System.import('main.js') .then(null, console.error.bind(console)); </script>
Pour faire simple, lors de la mise à niveau, le contrôleur-> ; ;component, directive -> composant/directive, service -> service, pipe/filter -> pipe;
* Exemple : Mettre à niveau un contrôleur vers un composant (si vous voulez en voir plus, allez sur le site Web PHP chinois
import {
Component,
Inject
} from '@angular/core';
import { Broadcaster } from '../../services/broadcaster';
@Component({
selector: 'about',
templateUrl: './about.component.html'
})
export class AboutComponent {
constructor(private broadcaster: Broadcaster) {
}
print(): void {
this.broadcaster.broadcast('printContents', 'printable');
}
}angular.module('interestApp')
.directive('pinControls',
upgradeAdapter.downgradeNg2Component(PinControlsComponent));.state('add', {
template: "<add-pin></add-pin>",
url: '/add'* Utilisez ng2+ Router pour définir des itinéraires : Bien sûr, vous pouvez également continuer à utiliser la version améliorée de ui-route @ui-route
* Après des luttes douloureuses (l'utilisation de nouvelles méthodes, changements d'habitudes, il s'avère que certaines bibliothèques ng1 ne sont pas maintenues ou mises à niveau vers ng2+, nous devons donc trouver des alternatives ou les écrire nous-mêmes (), enfin toutes les choses ng1 ont été mises à niveau. pour supprimer les programmes hérités et pris en charge de ng1 et le transformer en un programme ng2+ complet.
const AppRouting: Routes = [
{ path: 'app', component: DashboardComponent, canLoad: [AuthGuard], canActivate: [AuthGuard], data: { pageTitle: 'Dashboard' }];** Supprimer le module de mise à niveau :
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);* Cela a réussi immédiatement et a finalement utilisé angulaire -cli Pour gérer le processus de compilation et le chargement des modules, cette chose est une bonne chose (même s'il y a quelques aspects insatisfaisants, comme le fait que la version ne prend pas en charge JIT, etc.
)
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
template: `
<p>
<router-outlet></router-outlet>
</p>
`
})
export class AppComponent {
constructor(private route: Router) {
let loc = window.location.pathname.toString();
if (loc == '/login' || loc == '/') {
this.route.navigate(['login']);
}
}
}
Maintenant, vous n'avez besoin que de npm (certaines personnes utilisent du fil), et Bower peut être licencié.
Systemjs peut également s'incliner ;
Gulp ou grognement doit être analysé en détail à ce stade. Si le serveur est plus complexe, il est recommandé de le conserver pour démarrer le serveur. En utilisant concurrent, vous pouvez gérer le code client. avec angulaire-cli lorsque npm exécute dev, gulp /grunt gère le serveur ;
Maintenant, toutes les mises à niveau sont terminées. Bien sûr, le processus lui-même rencontrera certainement diverses insatisfactions. la situation spécifique. Si le projet est petit de cette manière, il peut être adopté, il est relativement facile à comprendre, il existe de nombreux exemples sur Internet et il sera mis à niveau rapidement. Si le projet est relativement important et que sa mise à niveau prend plusieurs mois, la méthode de rétrogradation suivante doit être utilisée.
原理：downgrade是不改变原来的ng1程序，新建一个ng2+程序，然后把这个程序做成一个模块，直接注入到ng1里头，这样会避免一些额外的change事件，从而避免了不必要的消息循环，这样来提升性能。
用下面的5步升级到ng2+:
第一步：写一个新的ng2+程序，然后注入到ng1里头：
main.ts: (XXXXXX替换成你的ng1的app的名字就行了）
import { NgModule, forwardRef, StaticProvider } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { downgradeModule, downgradeComponent, setAngularLib } from '@angular/upgrade/static';
declare const angular: any;
declare const window: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
const platformRef = platformBrowserDynamic(extraProviders);
return platformRef.bootstrapModule(AppModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.module('XXXXXX.ng2', [
downgradedModule
]);
angular.module('XXXXXX.ng2').directive('template', downgradeComponent({ component: template}));* app.js (就这里麻烦，试了一天才试出来，这么注入，然后加载）
(function() {
angular.module('XXXXXXX', [
// all the old modules
'XXXXXXX.ng2'
]);
// eslint-disable-next-line
if (window.ignoreNg2ForTest) {
// temporary not load ng2 module in karma test
fetchData().then(bootstrapApplication);
} else {
// normal hybrid entrance
loadMain().then(fetchData).then(bootstrapApplication);
}
function loadMain() {
return System.import('main'); // load main.ts
}
function fetchData() {
// old logic
}
function bootstrapApplication() {
angular.element(document).ready(function() {
angular.bootstrap(document, ['XXXXXXXX'], { strictDi: true }); // bootstrap app with ng1
});
}
}());* 同样，在index.html里加入一些依赖（升级完都可以删）
<script></script> <script></script> <script></script> <script></script>
* 手动拷一些依赖到dest 文件夹：（我们用的gulp）
pipes.builtAngularVendorScriptsDev = function() {
return gulp.src([
'./node_modules/core-js/client/shim.min.js',
............
], {base: './node_modules'})
.pipe(gulp.dest('dist.dev/node_modules'));
};* JSPM: 不用这东西的话release 里头的客户端有近百M，会疯的，虽然这个东西也bug重重，临时用用还是可以的。用它以后release的客户端代码只有十几M，可以接受了。
gulp.task('build-jspm-prod', ['hybrid-tsbuild'], function() {
return jspm({
config: './client/systemjs.config.js',
bundleOptions: {
minify: true,
mangle: false
},
bundleSfx: true,
bundles: [
{ src: paths.tsOutput + '/*', dst: 'main.js' }
]
}).pipe(gulp.dest('dist.prod'));
});第二步：升级一个个的controller/service/pipe/directive等等，这个过程相当痛苦，原来代码的耦合，莫名其妙的event emit和不知道在哪儿的event handler。全局的rootscope遍地都是，牵一发动全身。自己解耦吧，没什么好办法。
第三步：升级路由，这个虽然没有上一步那么煎熬，也很头疼，很多地方都要改，
* 如果用route的话参见上面upgrademodule里的例子就好了；
* 如果使用@ui-route的话，state现在需要这么定义：（abstract我还没有研究出来有什么用）
export const registerState = {
parent: 'app',
name: 'register',
url: '/register/{activationCode}',
component: RegisterComponent,
data: { pageTitle: 'Register' }
};第四步：删除ng1的东西；
第五步：使用angular-cli管理依赖：
* 参照上面upgrademodule对应的步骤就好；
* 这时候可以删除JSPM了，这东西和SystemJS都是定时炸弹，bug重重啊，目前angular-cli比较稳定；
到这里，应该你的程序已经升级到了ng2+，目前是ng5，建议升级过程中把anglar相应的版本写死，这东西更新太快，你随着它升随时出现已有的包不兼容，很头疼，我们暂时定格在5.0。
我是升级完了站着说话不腰疼，上面的东西只能帮有需要的朋友节约一点点时间，最大的时间消耗在升级controller和解耦的过程中。那里如果有什么问题可以在下面留言，能帮上的话尽量帮大家省省时间。
备注一：替换规则。
ng-bind-html [innerHTML]
ng-model [(ngModel)] // 这个和ng1的双向绑定基本一个意思
ng-class [ngClass]
ng-disabled [disabled]
ng-click (click)
ng-if *ngIf
ng-repeat *ngFor // E.g. *ngFor="let task of currentChecklist.open; let i = index;"
ng-show *ngIf
ng-src [src]
ng-hide *ngIf
ng-submit (ngSubmit)
ng-style [ngStyle]
备注二：可能遇到的问题
JS:
消息处理：ng2+里没有了scope继承，所以自己定义全局的消息处理是必要的;
HTML模板:
Conflit de directives : il est préférable de séparer les noms définis. S'il s'appelle
Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel de l'utilisateur AngularJS pour apprendre). Si vous avez des questions, vous pouvez les poser ci-dessous. Laissez un message avec une question.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre Fahrenheit et Celsius
Comment supprimer des pages vierges dans Word sans affecter les autres formats
Que signifie le HD du téléphone portable ?
Comment résoudre l'erreur 0xc000409
Commandes communes OGG
Puis-je récupérer une courte vidéo Douyin supprimée ?
Utilisation du contacteur AC
La différence entre le câble de console et le câble réseau
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
