README.md

angualr material Sample

• 20160927 기준 사용할 front-end 프로젝트 만듬.
• angualr1.x, es6, babel, systemjs+jspm, gulp 사용.

참고프로젝트

• https://github.com/angular/material-start
• https://github.com/martinmicunda/employee-scheduling-ui
  • http://martinmicunda.com/2015/02/09/how-to-start-writing-apps-with-es6-angular-1x-and-jspm/
• http://fountainjs.io/download/

목표

1. 참고 프로젝트의 하나로 섞음.
2. https://material.angularjs.org 의 데모 및 기능을 모두 가져온다.
3. 인증/권한에 따른 화면 접근제한.

설명

• 조건별로 모듈로딩 처리설명
  • http://martinmicunda.com/2015/10/26/conditional-module-loading-with-systemjs/

프로젝트 생성

• jspm init

$ jspm init

warn Running jspm globally, it is advisable to locally install jspm via npm install jspm --save-dev.

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:jspm.conf.js
Configuration file jspm.conf.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:
{생략}

• jspm 라이브러리 추가

$ jspm install npm:core-js
$ jspm install npm:angular-mocks
$ jspm install npm:URIjs
$ jspm install angular=github:angular/bower-angular
$ jspm install angular-animate=github:angular/bower-angular-animate
$ jspm install angular-aria=github:angular/bower-angular-aria
$ jspm install angular-material=github:angular/bower-material
$ jspm install angular-messages=github:angular/bower-angular-messages
$ jspm install css=github:systemjs/plugin-css
$ jspm install json=github:systemjs/plugin-json
$ jspm install text=github:systemjs/plugin-text
$ jspm install npm:angular-messages
--$ jspm install roboto-fontface
--$ jspm install npm:angular-sanitize
--$ jspm install npm:angular-local-storage
--$ jspm install npm:angular-ui-router

• employee-scheduling-ui 파일복사

  • package.json 수정
  • gulp 파일복사
  • gulpfile.js
  • jspm.conf.js
  • karma.conf.js
  • package.json
  • protractor.conf.js
  • .jshintrc
  • .htmlhintrc

• npm install

• package.json baseURL: "./" 수정

• npm build

• highlightjs 디랙티브 추가

$ jspm install highlightjs=github:components/highlightjs