Angular und IndexedDB

06.02.2018 - Lesezeit: ~1 Minute

Literatur

• Angular4 Crud Operation In IndexedDB using JsStore
• c't: Offline-Webanwendungen mit Application Cache und IndexedDB entwickeln

Tags: angular

wnfPortal mit angular

02.01.2018 - Lesezeit: 3 Minuten

Erzeuge Projekt wnfPortal

Web-Oberfläche für wnfKontakt und wnfKuB

$ ng new wnfportal
$ cd wnfportal
$ ng serve

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

Projekt in Github eintragen

Dazu auf Github ein leeres Repository anlegen (ohne .gitignore, ohné Readme und ohne Lizenz, sonst gibt es Ärger mit den folgenden Befehlen.)

$ cd wnfportal/
$ git init
$ git add .
$ git commit -m "First commit"
$ git remote add orign https://github.com/wnf58/wnfportal
$ git remote -v
$ git push orign master

Erzeugen der Komponente und des Service kubea

$ cd wnfportal
$ ng generate component kubea
$ ng generate component kubea-detail
$ ng generate component kubea-search
$ ng generate component dashboard
$ ng generate service kubea --module=app
$ ng generate service message --module=app
$ ng generate module app-routing --flat --module=app

angular httpclient

Der httpclient holt die anzuzeigenden Daten von meinem CherryPy-Server. Dabei kommt es zu dem beliebten Fehler No 'Access-Control-Allow-Origin' header is present. Wie in [Stackoverflow](https://stackoverflow.com/questions/27141122/no-access-control-allow-origin-header-is-present-error-with-cherrypy beschrieben muss der Cherrypy-Server folgendermaßen gestartet werden:)

def server_dict():
    '''Erstellung der Konfiguration für CherryPy'''
    g={}
    g['tools.staticdir.root']=os.path.dirname(os.path.abspath(__file__))
    g['server.socket_port']=8081
    g['server.socket_host']='0.0.0.0'
    g['tools.sessions.on']=True
    g['tools.sessions.timeout'] =1000
    g['tools.sessions.name']="wnfportal8081id"
    g['tools.CORS.on'] = True
    c={'global': g}
    c['/']={'tools.staticdir.on':True,'tools.staticdir.dir':"www",'tools.staticdir.index' : "index.html"}
    return c

def CORS():
    cherrypy.response.headers["Access-Control-Allow-Origin"] = "*"    

def main():
    cherrypy.tools.CORS = cherrypy.Tool('before_handler', CORS)
    cherrypy.quickstart(wnfPortal(),config=server_dict())

• Quellcode: https://github.com/wnf58/wnfportal
• Test mit http://localhost:4200
• Falls die Anwendung über ein anderen Rechner aufgerufen werden soll dann muss der Server so gestartet werden:

  $ ng serve --host 0.0.0.0 --disable-host-check

Eine Kopie für den Verkauf erstellen

• https://stackoverflow.com/questions/37631098/how-to-bundle-an-angular-app-for-production

  #!/bin/bash
  DIRECTORY="/home/wnf/Entwicklung/wnfportal"
  cd $DIRECTORY
  pwd
  ng build --prod
  if [ -d "$DIRECTORY/dist" ]; then
  # Control will enter here if $DIRECTORY exists.
  rsync -azve ssh --delete "$DIRECTORY/dist/" wnf@bone2013.fritz.box:/var/www/wnfportal
  fi

• Test mit http://bone2013.fritz.box:8081

Tags: angular