web-dev-qa-db-ja.com

Angular 4ドキュメントオフラインコンピューター

Angular 4ドキュメント（- https://angular.io/docs ）のローカル/オフラインバージョンを探したいのですが、オフラインで使用できます。環境（インターネットへのアクセスがまったくない、熱意とその代替）は、残念ながら使用できませんでした。

何時間にもわたる検索の後、このタスクの簡単な解決策を見つけることができなかったようです。これは、angularJS 1.0バージョンのみです。

angular documentation project のクローンを作成しようとしましたが、インターネットなしでローカルで実行すると成功しませんでした。

angularoffline-caching
9
octo-developer
  1. 最初に DevDocs.io このWebサイトに移動します
  2. 次に、メニューから Preference に移動します
  3. リストから取得したい項目をチェックし、適用をクリックします enter image description here
  4. 次に、メニューから Offline に移動し、オフラインで表示するすべてのドキュメントをインストールします。
  5. それで全部です ！！！今では、オフラインでもそれを見ることができます。
12
Rowf Abd

熱意がわからない人のために？以下のリンクからデスクトップアプリケーションをダウンロードできますzeal言語およびフレームワークドキュメントのオフラインデスクトップアプリケーション：

https://zealdocs.org/download.html

オフラインで動作します！そしてオフラインモードでアクセスしたいものは何でもダウンロードできます

enter image description here

1
nadir hamidou

目的のページに移動し、ツールセクションで印刷するか、ctrl + pを押してpdf To print as PDF

1
Keerthi Reddy Yeruva

angular-cli を使用すると、ng buildを使用してangular 4プロジェクトをビルドできます。 "必要なすべてのファイルがあるディレクトリ。

ナビゲータで「index.html」を開くと、プロジェクトを実行できます。 IIEサーバーがある場合は、空のWebサイトを作成できます

重要：サーバーを使用しない場合は、ng build --prodを実行した後、index.htmlを編集し、「base」を変更してタグスクリプトを閉じる必要があります（.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 { }

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';
}

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() {
  }
}

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() {
  }
}

build --prodを実行した後、index.htmlをdocument.write（ ""）に置き換えて編集する必要があります

Index.htmlは次のようになります

<!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

この方法は少し複雑ですが、機能します。 google chrome browser angular.io websiteのオフラインバージョンをダウンロードするために必要です。手順は次のとおりです。

  • Angle.ioをchromeブラウザで開きます。
  • オフラインで閲覧できるようにしたいすべてのページを少なくとも1回開きます。ページはブラウザにキャッシュされます。
  • [その他のツール]> [デスクトップに追加]に移動し、[追加]をクリックします。

Add To Desktop

angular.io のオフラインバージョンがデスクトップにあります。インターネットから切断してからお試しください。

注：ステップ3の前にすべてのページを開いていない場合は、問題はありません。インターネットに再接続し、デスクトップに追加されたショートカットのすべてのリンクを開きます。

0
mia