web-dev-qa-db-fra.com

Angular 4 documentation ordinateur hors ligne

Je souhaite trouver une version locale/hors ligne de la documentation de Angular 4 ( https://angular.io/docs ), Que je pourrais utiliser dans un environnement hors connexion (pas d'accès Internet). du tout, le zèle et ses alternatives) ne pouvaient pas être utilisés malheureusement.

Après de nombreuses heures de recherches, il semble que personne n’ait pu trouver une solution simple à cette tâche, uniquement pour la version angularJS 1.0.

J'ai également essayé de cloner le projet de documentation angular sans succès pour le lancer localement sans accès Internet.

angularoffline-caching
6
octo-developer
  1. Allez à DevDocs.io ce site en premier
  2. Ensuite, allez dans Préférences depuis le menu
  3. Cochez l'élément que vous souhaitez inclure dans la liste et cliquez sur Appliquer  enter image description here
  4. Ensuite, allez dans Hors ligne à partir du menu et installez tous les documents que vous voulez voir hors ligne.
  5. C'est tout !!! Maintenant, vous pouvez voir cela même en mode hors connexion. 
10
Rowf Abd

pour les personnes qui ne savent pas ce qu'est le zèle? application de bureau hors ligne pour la documentation sur les langues et les cadres vous pouvez télécharger l’application de bureau zeal à partir du lien ci-dessous: 

https://zealdocs.org/download.html

cela fonctionne hors ligne! et vous pouvez télécharger ce que vous voulez y accéder en mode hors connexion 

 enter image description here

3
nadir hamidou

Accédez à la page souhaitée et imprimez-la dans les sections Outils .__ ou appuyez sur ctrl + p et enregistrez-la au format pdf To print as PDF

1
Keerthi Reddy Yeruva

si vous utilisez angular-cli , vous pouvez construire un projet 4 angulaire en utilisant ng build. Dans votre répertoire "dist", vous avez tous les fichiers dont vous avez besoin.

Si vous ouvrez le fichier "index.html" dans un navigateur, vous pouvez exécuter le projet. Si vous avez un serveur IIE, vous pouvez créer un site Web vide.

IMPORTANT: si vous n’utilisez pas de serveur, après avoir exécuté ng build --prod, vous devez éditer index.html, modifier "base" et fermer le script de balise (vous pouvez également modifier le nom de .js)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
        <title>AppNew</title>
        <base href="/Users/Usuario/Documents/app-new/dist/">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
          <link href="styles.css" rel="stylesheet"/>
    </head>
    <body>
        <app-root/>
        <script type="text/javascript" src="inline.js"></script>
        <script type="text/javascript" src="polyfills.js"></script>
        <script type="text/javascript" src="vendor.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>
0
Eliseo
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HashLocationStrategy,LocationStrategy,CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { WellcomeComponent } from './wellcome/wellcome.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'wellcome', component: WellcomeComponent },
  {path: '**', redirectTo: '', pathMatch: 'full' }
]
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    WellcomeComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

le app.component.ts

//app.component.ts
import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  template:`
  <div style="text-align:center">
  <p>
  <a [routerLink]="['/']">Home</a>
  </p>
  <p>
  <a [routerLink]="['/wellcome']">Wellcome</a>
  </p>
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<h2>Here are router-outlet: </h2>
<router-outlet></router-outlet>`,
})
export class AppComponent {
  title = 'app';
}

le wellcome.component.ts

//wellcome.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-wellcome',
  template:`
  <p>
  wellcome works!
</p>
  `
})
export class WellcomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

le home.component.ts

//home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  template:`
  <p>
  home works!
</p>
  `
})
export class HomeComponent implements OnInit {

    constructor() { }

  ngOnInit() {
  }
}

après avoir créé --prod, vous devez éditer le fichier index.html en le remplaçant par document.write (""). 

Index.html sera comme

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AppNew</title>
        <script>document.write("<base href='"+window.location.href+"'/>") </script>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
    </head>
        <body>
            <app-root/>
            <script type="text/javascript" src="inline.2833f8af5a9f1ba869e4.bundle.js"/>
            <script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"/>
            <script type="text/javascript" src="vendor.aeea1adcdc349547d6f1.bundle.js"/>
            <script type="text/javascript" src="main.c39d8a271dce22bb4c5c.bundle.js"/>
    </body>
</html>
0
Eliseo

Cette méthode est un peu délicate mais cela fonctionne. Vous avez seulement besoin du navigateur Google Chrome pour télécharger la version hors ligne de angular.io website. Les étapes sont les suivantes:

  • Ouvrez angular.io dans le navigateur chrome.
  • Ouvrez toutes les pages au moins une fois que vous vouliez être disponible pour une lecture hors connexion. Les pages seront mises en cache dans le navigateur.
  • Maintenant, allez à Autres outils> Ajouter au bureau et cliquez sur Ajouter.

 Add To Desktop

Votre version hors ligne de angular.io est sur le bureau. Essayez-le après vous être déconnecté d'Internet.

Remarque: Si vous n'avez pas ouvert toutes les pages avant l'étape 3. Il n'y a pas de problème. Reconnectez-vous à Internet et ouvrez tous ces liens dans le raccourci ajouté sur le bureau.

0
mia