Code Monkey home page Code Monkey logo

mse-iad-digitaler-kleiderschrank's Introduction

Get it to run:

Installation

Install Node: https://nodejs.org/en/download/

npm install
npm install -g jspm
jspm install
npm install -g live-server

Develop

cd app
live-server

Angular Material-Start (ES6 Tutorials)

This branch contains the same tutorial application created in master and the es5 branch... but this branch implements the application using JSPM and ES6.

material-starter-ux2

Above is a snaphot of the Starter-App with a Master-Detail layout: showing a list of users (left) and a user detail view (right).

There are no tutorial steps in this branch.
Rather the finished application is published here for comparison and learning purposes.

This sample application is purposed as both a learning tool and a skeleton application for a typical AngularJS Material ES6 web app: comprised of a Side navigation area and a content area. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.

Wirefame

The illustration below shows how we planned the layout and identified the primary components that will be used in the Starter ap:


![plancomponents2](https://cloud.githubusercontent.com/assets/210413/6444676/c247c8f8-c0c4-11e4-8206-208f55cbceee.png)

Note: that container #2 (above) is a simple <div> container and not an Angular Material component.


- - -

ES6 with JSPM

These application use jspm.io: package manager for SystemJS which is built on top of the dynamic ES6 module loader. This allows developers to load any module format (ES6, CommonJS, AMD, and globals).

After you have cloned the repository, you should execute the following commands:

  • npm install jspm -g
  • jspm install

Since web application uses jspm with Angular-Material:

  • In the HTML, we only load the System loader and the configuration module

Notice no stylesheets are loaded here... they are injected later upon demand

  • Configure the system loader to laod the app/boot module.
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <title>Angular Material - Starter App ES6</title>
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>

    <style type="text/css">
        /**
         * Hide when Angular is not yet loaded and initialized
         */
        [ng-cloak] {
            display: none;
        }
    </style>
  </head>

  <body ng-cloak layout="column">

    <div ng-include="'src/users/view/browseUsers.html'"
         layout="column" flex tabIndex="-1" role="main" >
    </div>

    <script src="./jspm_packages/system.js" type="text/javascript"></script>
    <script src="./config.js" type="text/javascript"></script>
    <script type="text/javascript">
        System
            .import('app/boot')
            .catch( console.error.bind(console) ); // make sure any errors print to console
    </script>

  </body>

mse-iad-digitaler-kleiderschrank's People

Contributors

thomasburleson avatar danielhoermann avatar marcysutton avatar

Watchers

James Cloos avatar  avatar Tim Keiner 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.