Git Product home page Git Product logo

ramazanulucay / angular-connect-2016 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from thinktecture/angular-connect-2016

0.0 2.0 0.0 2.53 MB

Sample code and presentation for the session 'One code to rule them all: Cross-platform development with Angular 2, Cordova & Electron' at Angular Connect 2016.

JavaScript 42.11% CSS 34.67% HTML 8.57% TypeScript 9.73% C# 4.65% Scilab 0.05% GCC Machine Description 0.22%

angular-connect-2016's Introduction

AngularConnect 2016 - Sample Application

Notes

The sample application uses a Microsoft Azure hosted API https://boardzapi.azurewebsites.net/swagger.

For login, please use same value for username and password ;-)

General Setup


The steps mentioned in the Setup for native applications section are optional, those steps are only required if you want to run the app either on any mobile or desktop operating system as native applications.

If you're just interested in running the SPA within the browser, go ahead and follow the Building section and focus on the web related tasks.


Setup for Native Applications

  • Download and install the platform SDKs and/or emulators for the platform you want to develop for (this might take quite a while… so do this first!)
  • Install and install ImageMagick (base toolkit for image processing, here used for splash screen and icon generation)
  • Install Cordova: npm install -g cordova
  • Install gulp: npm install -g gulp
  • MacOSX and Linux users need to install Wine (for executing the Electron Windows build task)

Building

The npm scripts will build iOS, Windows UWP, Android apps as well as desktop applications for Mac OSX, Windows and Linux. To get it working, please do the following:

  • After cloning the repo: npm i --no-progress within the root folder of this repository
  • Run npm run watch-web to start a live server, which is best when developing the app
  • Run npm run watch-all to orchestrate the cordova ios app, the electron app and the webapp with live reloading.
  • Run npm run start-web to start the webapp without injecting upcoming changes
  • Release Mode: Use the following npm scripts to build the apps in release mode
    • Run npm run dist-web to build the web app
    • Run npm run dist-mobile-all to build all phone related apps
    • Run npm run dist-desktop-all to build all desktop related apps

Running

Web

Use npm run start-web as mentioned above to start the browser version of BoardZ.

Cordova

To run the cordova project, open a terminal and point it to dist/mobile. Use one of the following commands to start:

  • npm run start-mobile-ios: Runs the iOS version of BoardZ. Requires a Mac
  • npm run start-mobile-android: Runs the Android version of BoardZ. Requires Android SDK to be installed and at least a simulator

Electron

To start the electron packaged app, go to build/desktop/build and open one of the directories suiting your current operating system. Then open the executable as used to.

Supported platforms

  • Any modern web browser (Chrome, Firefox, Edge, Safari) by simply hosting it
  • Mobile platforms (iOS, Android, Windows) by packaging the app using Cordova
  • Desktop platforms (Windows, Mac OS X, Linux) by packaging the app using Electron

Android Settings

SDK version

If you want to change Android's SDK version, open cordova/config.xml and search for android-minSdkVersion or android-targetSdkVersion:

  • android-minSdkVersion: An integer designating the minimum API Level required for the application to run.
  • android-targetSdkVersion: An integer designating the API Level that the application targets. If not set, the default value equals that given to minSdkVersion.

Third-Party Libraries

JavaScript, CSS

Native Wrappers

Additional Resources

angular-connect-2016's People

Contributors

christianweyer avatar konstantindenerz avatar thorstenhans avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.