ao-angular

```` $ npm i --save ts-md5@1.2.7 $ npm i --save ngx-pipes@2.7.3 $ npm i --save ngx-webstorage@4.0.2 $ npm i --save faunadb@2.13.0 $ npm i --save firebase@7.10.0 $ npm i --save @angular/fire@5.4.2 $ npm i --save chart.js@2.9.3 $ npm i --save ng2-ch

Usage no npm install needed!

<script type="module">
  import aoAngular from 'https://cdn.skypack.dev/ao-angular';
</script>

README

AO-ANGULAR

Pre-Requirements

$ npm i --save ts-md5@1.2.7
$ npm i --save ngx-pipes@2.7.3
$ npm i --save ngx-webstorage@4.0.2
$ npm i --save faunadb@2.13.0
$ npm i --save firebase@7.10.0
$ npm i --save @angular/fire@5.4.2
$ npm i --save chart.js@2.9.3
$ npm i --save ng2-charts@2.3.0

$ ng add @angular/material

Installation

$ npm i --save ao-angular

Edit tsconfig.js

...
"paths": {
  "@environment": [
    "src/environments/environment.ts"
  ]
}
...

Edit "AppModule"

...
import pt from '@angular/common/locales/pt';
pt[17]['USD'] = pt[17]['BRL'] = ['R

, 'R

];
import { registerLocaleData } from '@angular/common';
registerLocaleData(pt, 'pt');
import { LOCALE_ID } from '@angular/core';
...

imports: [
    ...
    NgxWebstorageModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebase.configs, environment.firebase.name),
    AOModule.forRoot(environment),
    ...
],

providers: [
    ...
    {provide: LOCALE_ID, useValue: 'pt'},
]

Edit "AppComponent"

...
constructor(
  ...
  private _auth: AOAuthFirebaseService
) {
}
...

Copy files

cp ~ao-angular/assets/images ------------> /myapp/src/assets/images

Edit "global.scss"

...
/* Ao-Angular styles */
@import '~ao-angular/assets/styles/overrides/material/material.theming';
$palette-primary: $mat-black;
$palette-accent: $mat-deep-purple;
$palette-warn: $mat-red;
@import '~ao-angular/assets/styles/app';

Edit "index.html"

<html lang="pt-BR">
...

...
<body>
    ...
    <noscript>Habilite o JavaScript para continuar usando esta aplicação.</noscript>
    <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
...

{ "peerDependencies": { "@angular/fire": "5.4.2", "faunadb": "2.13.0", "firebase": "7.10.0", "ngx-pipes": "2.7.3", "ngx-webstorage": "4.0.2", "ts-md5": "1.2.7", "@angular/animations": "8.2.14", "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/core": "8.2.14", "@angular/forms": "8.2.14", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "@angular/router": "8.2.14", "rxjs": "6.4.0", "zone.js": "0.9.1", "@angular/cdk": "8.2.3", "@angular/material": "8.2.3", "@angular/pwa": "0.803.20", "@angular/service-worker": "8.2.14", "ajv": "6.10.2", "chart.js": "2.9.3", "hammerjs": "2.0.8", "luxon": "1.21.1", "ng2-charts": "2.3.0" }, "dependencies": { "tslib": "1.10.0" }, "devDependencies": { "@angular-devkit/build-angular": "0.803.19", "@angular/cli": "8.3.19", "@angular/compiler-cli": "8.2.14", "@angular/language-service": "8.2.14", "@types/node": "8.9.5", "@types/jasmine": "3.3.16", "@types/jasminewd2": "2.0.8", "codelyzer": "5.2.0", "jasmine-core": "3.4.0", "jasmine-spec-reporter": "4.2.1", "karma": "4.1.0", "karma-chrome-launcher": "2.2.0", "karma-coverage-istanbul-reporter": "2.0.6", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "protractor": "5.4.2", "ts-node": "7.0.1", "tslint": "5.15.0", "typescript": "3.5.3", "@angular-devkit/build-ng-packagr": "0.803.19", "ng-packagr": "5.7.1", "tsickle": "0.37.1" } }

Copy files

cp ~ao-angular/ngsw-config.json ---------> /myapp
cp ~ao-angular/manifest.webmanifest -----> /myapp/src
cp ~ao-angular/assets/icons -------------> /myapp/src/assets/icons
cp ~ao-angular/assets/images ------------> /myapp/src/assets/images

Edit "main.ts"

import 'hammerjs';
...

Edit "index.html"

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <base href="/">
  
    <title>YOUR_APP_NAME</title>
    <meta name="description" content="The Angular Template!" />
    <link rel="icon" type="image/x-icon" href="assets/icons/icon-72x72.png" />
  
    <meta name="theme-color" content="#1976d2" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="manifest" href="manifest.webmanifest" />
  
    <meta name="msapplication-square70x70logo" content="assets/icons/icon-70x70.png" />
    <meta name="msapplication-square150x150logo" content="assets/icons/icon-150x150.png" />
    <meta name="msapplication-wide310x150logo" content="assets/icons/icon-310x150.png" />
  
    <meta name="apple-mobile-web-app-title" content="AoAngular" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-startup-image" href="assets/icons/icon-72x72.png" />
    <link rel="apple-touch-icon" href="assets/icons/icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="assets/icons/icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="assets/icons/icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152x152.png" />
  
    <link rel="preload" as="style" media="all" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" />
    <link rel="preload" as="style" media="all" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
    <app-root role="main"></app-root>
    <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

Edit "app.component.html"

<ao-ui>

  <ao-menu class="ao-ui-menu">

    <!----------------------------------------------------------------------------------------------------------------->
    <!-- PUBLIC -->
    <!----------------------------------------------------------------------------------------------------------------->
    <div class="ao-menu-top-icons">
      <mat-nav-list>
        <a mat-list-item routerLink="/" title="Buscar...">
          <mat-icon matListIcon>search</mat-icon>
        </a>
      </mat-nav-list>
    </div>

    <div class="ao-menu-top-list">
      <mat-nav-list>
        <a mat-list-item routerLink="/">
          <mat-icon matListIcon>apps</mat-icon>
          <span matLine>Menu 1</span>
        </a>
      </mat-nav-list>
    </div>

    <!----------------------------------------------------------------------------------------------------------------->
    <!-- USER -->
    <!----------------------------------------------------------------------------------------------------------------->
    <div *aoIsUser class="ao-menu-down-icons">
      <mat-nav-list>
        <a mat-list-item title="Minha Conta" routerLink="/my-account">
          <mat-icon matListIcon>account_circle</mat-icon>
        </a>
      </mat-nav-list>
    </div>

    <div *aoIsUser class="ao-menu-down-list">
      <mat-nav-list>
        <a mat-list-item routerLink="/login">
          <mat-icon matListIcon class="tc-red">power_settings_new</mat-icon>
          <span matLine>Sair</span>
        </a>
      </mat-nav-list>
    </div>

    <!----------------------------------------------------------------------------------------------------------------->
    <!-- GUEST -->
    <!----------------------------------------------------------------------------------------------------------------->

    <div *aoIsGuest class="ao-menu-down-list">
      <mat-nav-list>
        <a mat-list-item routerLink="/login">
          <mat-icon matListIcon>input</mat-icon>
          <span matLine>Entrar</span>
        </a>
      </mat-nav-list>
    </div>

  </ao-menu>

  <router-outlet class="ao-ui-page"></router-outlet>

</ao-ui>

Edit "styles.scss"

@import '~ao-angular/assets/styles/theming';
$palette-primary: $mat-black;
$palette-accent: $mat-green;
$palette-warn: $mat-red;
@import '~ao-angular/assets/styles/app';

html, #AO-MENU-LOGO {
  background-image: url("/assets/images/logo.png");
}

Capability

"dependencies": {
  //
  // DEFAULT
  //
  "@angular/animations": "8.2.14",
  "@angular/common": "8.2.14",
  "@angular/compiler": "8.2.14",
  "@angular/core": "8.2.14",
  "@angular/forms": "8.2.14",
  "@angular/platform-browser": "8.2.14",
  "@angular/platform-browser-dynamic": "8.2.14",
  "@angular/router": "8.2.14",
  "rxjs": "6.4.0",
  "tslib": "1.10.0",
  "zone.js": "0.9.1",
  //
  // EXTRA
  //
  "@angular/cdk": "8.2.3",
  "@angular/fire": "5.2.3",
  "@angular/material": "8.2.3",
  "@angular/pwa": "0.803.20",
  "@angular/service-worker": "8.2.14",
  "ajv": "6.10.2",
  "chart.js": "2.9.3",
  "faunadb": "2.8.0",
  "firebase": "7.4.0",
  "hammerjs": "2.0.8",
  "luxon": "1.21.1",
  "ng2-charts": "2.3.0",
  "ngx-pipes": "2.6.0",
  "ngx-webstorage": "4.0.1",
  "ts-md5": "1.2.7"
},
"devDependencies": {
  //
  // DEFAULT
  //
  "@angular-devkit/build-angular": "0.803.19",
  "@angular/cli": "8.3.19",
  "@angular/compiler-cli": "8.2.14",
  "@angular/language-service": "8.2.14",
  "@types/node": "8.9.5",
  "@types/jasmine": "3.3.16",
  "@types/jasminewd2": "2.0.8",
  "codelyzer": "5.2.0",
  "jasmine-core": "3.4.0",
  "jasmine-spec-reporter": "4.2.1",
  "karma": "4.1.0",
  "karma-chrome-launcher": "2.2.0",
  "karma-coverage-istanbul-reporter": "2.0.6",
  "karma-jasmine": "2.0.1",
  "karma-jasmine-html-reporter": "1.4.2",
  "protractor": "5.4.2",
  "ts-node": "7.0.1",
  "tslint": "5.15.0",
  "typescript": "3.5.3",
  //
  // EXTRA
  //
  "@angular-devkit/build-ng-packagr": "0.803.19",
  "ng-packagr": "5.7.1",
  "tsickle": "0.37.1"
}