AI Convergence

// CSS

table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}

// SCSS (Sassy CSS)

table.hl {

  margin: 2em 0;

  td.ln {

    text-align: right;

  }

}

// SASS

table.hl

  margin: 2em 0

  td.ln

    text-align: right

// CSS

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

// SCSS

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color:

    darken($blue, 9%);

}

// SASS

$blue: #3bbfce

$margin: 16px

.content-navigation

  border-color: $blue

  color: darken($blue, 9%)

// CSS

#data {

  float: left;

  margin-left: 10px;

}

#data th {

  text-align: center;

  font-weight: bold;

}

#data td, #data th {

  padding: 2px;

}

// SCSS

@mixin table-base {

  th {

    text-align: center;

    font-weight: bold;

  }

  td, th {padding: 2px}

}

@mixin left($dist) {

  float: left;

  margin-left: $dist;

}

#data {

  @include left(10px);

  @include table-base;

}

// SASS

@mixin table-base

  th

    text-align: center

    font-weight: bold

  td, th

    padding: 2px

@mixin left($dist)

  float: left

  margin-left: $dist

#data

  @include left(10px)

  @include table-base

// CSS

.error, .badError {

  border: 1px #f00;

  background: #fdd;

}

.error.intrusion,

.badError.intrusion {

  font-size: 1.3em;

  font-weight: bold;

}

.badError {

  border-width: 3px;

}

// SCSS

.error {

  border: 1px #f00;

  background: #fdd;

}

.error.intrusion {

  font-size: 1.3em;

  font-weight: bold;

}

.badError {

  @extend .error;

  border-width: 3px;

}

// SASS

.error

  border: 1px #f00

  background: #fdd

.error.intrusion

  font-size: 1.3em

  font-weight: bold

.badError

  @extend .error

  border-width: 3px

#dowon {

  width : 20%;

  height : 120px;

}

yo - the scaffolding tool from Yeoman

bower - the package management tool  

  + component.json : 의존관계 설정

  + .bowerrc : 컴포넌트 설치 위치정보

grunt - the build tool 

  + Gruntfile.js : ant와 같은 수행 Task 정의

  + package.json : Node.js위에 구동되므로 package.json에 Grunt contributor 라이브러리 정의

karma - grunt test 시에 수행 

  + karma.conf.js : 로컬 테스트 환경

  + karma-e2e.conf.js : Real Browser 테스트 환경 즉, end-to-end (Client<->Server) 테스트 수행. 사용 port 8080

// 설치 : grunt-cli, bower가 같이 설치된다 

npm install -g yo

// Yeoman을 위한 generator 설치 for AngularJS & Karam

// 하기 에러 내역 참조하여 generator-angular의 script-base.js 파일 수정

// Generator는 Yeoman에서 생성하는 boilerplate 나 scaffolding 코드를 만들어주는

// Yeoman의 플러그인이라 생각하면 된다. 이미 만들어지 Generator 목록이 존재한다

// > https://github.com/yeoman (generator-* 목록들)

// > Generator 만들기 참조

npm install -g generator-webapp generator-angular generator-karma

// 명령어 (프로젝트 디렉토리에서 수행)

yo angular 또는 yo angular:app 애플리케이션 생성

yo angular:controller myControllerName 컨트롤러 생성

yo angular:directive myDirectiveName 디렉티브 생성

yo angular:filter myFilterName 필터 생성

yo angular:service myServiceName 서비스 생성

예) yo angular:controller Test 수행시 하기와 같은 에러 발생

~/angularjs/sd_01> yo angular:controller Test

path.js:360

        throw new TypeError('Arguments to path.join must be strings');

              ^

TypeError: Arguments to path.join must be strings

    at path.js:360:15

    at Array.filter (native)

    at Object.exports.join (path.js:358:36)

    at Generator (/usr/local/lib/node_modules/generator-angular/script-base.js:38:29)

    at new Generator (/usr/local/lib/node_modules/generator-angular/controller/index.js:10:14)

==> 해결하기 

1) /usr/local/lib/node_modules/generator-angular/script-base.js 의 38 번째 줄 내용을 하기와 같이 수정함

 37     if (!this.options.coffee &&

 38       //this.expandFiles(path.join(this.appPath, '/scripts/**/*.coffee'), {}).length > 0) {  // 주석처리 

 39       this.expandFiles(path.join(process.cwd(), '/scripts/**/*.coffee'), {}).length > 0) {  // process.cwd() 로 바꿈

 40       this.options.coffee = true;

 41     }

2) 재수행 : 친절하게도 TestCase까지 자동 생성해 준다 

   ~/angularjs/sd_01> yo angular:controller Test

   create app/scripts/controllers/Test.js

   create test/spec/controllers/Test.js

// 명령어

bower search <dep> - search for a dependency in the Bower registry

bower install <dep>..<depN> - install one or more dependencies

bower list - list out the dependencies you have installed for a project

bower update <dep> - update a dependency to the latest version available

// 설치하기 

// .bowerrc 에 설정된 디렉토리로 다운로드된 라이브러리가 설치된다

$ bower install angular-ui

bower cloning git://github.com/angular-ui/angular-ui.git

bower cached git://github.com/angular-ui/angular-ui.git

bower fetching angular-ui

bower checking out angular-ui#v0.4.0

bower copying /Users/nulpulum/.bower/cache/angular-ui/bd4cf7fc7bfe2a2118a7705a22201834

bower installing angular-ui#0.4.0

$ cd app/components/

$ ls

angular angular-scenario es5-shim json3

angular-mocks angular-ui jquery

$ cd ../..

$ cat .bowerrc

{

    "directory": "app/components"

}

// 명령어

grunt test  - 테스트하기. run the unit tests for an app  

grunt server - 브라우져에서 보기. 변경사항 실시간 반영됨. preview an app you have generated (with Livereload)

grunt - 배포본 빌드하기.  build an optimized, production-ready version of your app  (warning 무시 옵션 --force 사용가능)

// 브라우져 미리보기 in app root folder

grunt server

// warning -jslint 같은- 무시하고 계속 build하기

grunt  --force 

/ Karma configuration
 
// base path, that will be used to resolve files and exclude
basePath = '';
 
// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'app/components/angular/angular.js',
  'app/components/angular-mocks/angular-mocks.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
];
 
// list of files to exclude
exclude = [];
 
// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];
 
// web server port
port = 8080;
 
// cli runner port
runnerPort = 9100;
 
// enable / disable colors in the output (reporters and logs)
colors = true;
 
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
 
// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;
 
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];
 
// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;
 
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

//////////////

// 업무 코드 

'use strict';
 
var app = angular.module('eggheadioApp');
 
app.controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
    ];
}) ;
 
app.factory('Data', function() {
   return {message: 'shared data'}
});
 
app.filter('reverse', function(Data) {
   return function(text) {
       return text.split("").reverse().join("");
   }
});

//////////////////////////

// 필터에 대한 테스트 코드 

describe('filter', function() {
    beforeEach(module('eggheadioApp'));
 
    describe('reverse', function() {
        it('should reverse a string', inject(function(reverseFilter){ //reverse라는 Filte 파라미터
            expect(reverseFilter('ABCD')).toEqual('DCBA');
        }))
    })
})

index.html

1. <!doctype html>
2. <html ng-app="xmpl">
3. <head>
4. <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
5. <script src="script.js"></script>
6. </head>
7. <body>
8. <div ng-controller="XmplController">
9. {{ greeting }}!
10. </div>
11. </body>
12. </html>

script.js : service, directive, filter module => use xmpl application module

1. angular.module('xmpl.service', []).
2. value('greeter', {
3. salutation: 'Hello',
4. localize: function(localization) {
5. this.salutation = localization.salutation;
6. },
7. greet: function(name) {
8. return this.salutation + ' ' + name + '!';
9. }
10. }).
11. value('user', {
12. load: function(name) {
13. this.name = name;
14. }
15. });
16.  
17. angular.module('xmpl.directive', []);
18.  
19. angular.module('xmpl.filter', []);
20.  
21. <!-- ng-app="xmpl" 모듈이 다른 부가적인 모듈에 의존관계를 가지고 있다 -->
22. angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).
23. run(function(greeter, user) {
24. // This is effectively part of the main method initialization code
25. greeter.localize({
26. salutation: 'Bonjour'
27. });
28. user.load('World');
29. })
30.  
31. // A Controller for your app
32. var XmplController = function($scope, greeter, user) {
33. $scope.greeting = greeter.greet(user.name);
34. }

1. angular.module('myModule', []).
2. value('a', 123).
3. factory('a', function() { return 123; }).
4. directive('directiveName', ...).
5. filter('filterName', ...);
6.  
7. // is same as
8. // config 펑션에 provider를 통하여 설정한다  
9. angular.module('myModule', []).
10. config(function($provide, $compileProvider, $filterProvider) {
11. $provide.value('a', 123);
12. $provide.factory('a', function() { return 123; });
13. $compileProvider.directive('directiveName', ...);
14. $filterProvider.register('filterName', ...);
15. });