Mobile Convergence

$ sudo npm install -g typescript 

$ tsc  <fileName>.ts 

{

    "exclude": [

        "node_modules",

        "bower_components"

    ],

    "compilerOptions": {

        "target": "es5",

        "sourceMap": true,

        "module": "commonjs",

        "declaration": false,

        "noImplicitAny": false,

        "removeComments": true,

        "noLib": false

    }

}

$ npm install -g tsd

$ tsd init

// tsd.json 파일 

{

  "version": "v4",

  "repo": "borisyankov/DefinitelyTyped",

  "ref": "master",

  "path": "typings",

  "bundle": "typings/tsd.d.ts",

  "installed": {

    "jquery/jquery.d.ts": {

      "commit": "efd40e67ff323f7147651bdbef03c03ead7b1675"

    },

    "angularjs/angular.d.ts": {

      "commit": "efd40e67ff323f7147651bdbef03c03ead7b1675"

    }

  }

}

$ tsd install jquery

$ tsd install angular

$ npm init 

// package.json 첨부

"devDependencies": {

        "gulp": "^3.8.11",

        "gulp-debug": "^2.0.1",

        "gulp-inject": "^1.2.0",

        "gulp-sourcemaps": "^1.5.1",

        "gulp-tslint": "^1.4.4",

        "gulp-typescript": "^2.5.0",

        "gulp-rimraf": "^0.1.1",

        "del": *,

        "superstatic": *,

        "browser-sync": *

    }

// 의존 라이브러리 설치

$ npm install 

$ npm install -g tsd 

$ tsd init 

$ tsd install angular --save

 - angularjs / angular

   -> jquery > jquery

>> running install..

>> written 2 files:

    - angularjs/angular.d.ts

    - jquery/jquery.d.ts

$ tsd install jquery --save

 - jquery / jquery

>> running install..

>> written 1 file:

    - jquery/jquery.d.ts

{

    "rules": {

        "class-name": true,

        "curly": true,

        "eofline": false,

        "forin": true,

        "indent": [true, 4],

        "label-position": true,

        "label-undefined": true,

        "max-line-length": [true, 140],

        "no-arg": true,

        "no-bitwise": true,

        "no-console": [true,

            "debug",

            "info",

            "time",

            "timeEnd",

            "trace"

        ],

        "no-construct": true,

        "no-debugger": true,

        "no-duplicate-key": true,

        "no-duplicate-variable": true,

        "no-empty": true,

        "no-eval": true,

        "no-imports": true,

        "no-string-literal": false,

        "no-trailing-comma": true,

        "no-trailing-whitespace": true,

        "no-unused-variable": false,

        "no-unreachable": true,

        "no-use-before-declare": true,

        "one-line": [true,

            "check-open-brace",

            "check-catch",

            "check-else",

            "check-whitespace"

        ],

        "quotemark": [true, "single"],

        "radix": true,

        "semicolon": true,

        "triple-equals": [true, "allow-null-check"],

        "variable-name": false,

        "whitespace": [true,

            "check-branch",

            "check-decl",

            "check-operator",

            "check-separator"

        ]

    }

}

{

    "compilerOptions": {

        "target": "es5",

        "module": "commonjs",

        "declaration": false,

        "noImplicitAny": false,

        "removeComments": true,

        "noLib": false

    },

    "filesGlob": [

        "./**/*.ts",

        "!./node_modules/**/*.ts"

    ],

    "files": [

        "./globals.ts",

        "./linter.ts",

        "./main/atom/atomUtils.ts",

        "./main/atom/autoCompleteProvider.ts",

        "./worker/messages.ts",

        "./worker/parent.ts"

    ]

}

// survey-gorilla 설문조사 오픈소스를 위해 만들어 놓은 제너레이터로서 generator-angular-fullstack을 기반으로 수정한 것이다. 

$ npm install generator-sg --save

$ mkdir prototyping & cd prototyping

// 애플리케이션 생성 : mongodb는 선택안하고, ui-bootstrap과 sass를 선택함

$ yo sg SAProto 

// oclazyload를 설치함 

$ bower install oclazyload --save

bower install       oclazyload#0.6.3

// base.module.js 를 만들고, oc.lazyLoad 모듈에 대한 의존관계를 설정한다. 

$ cd client/components

$ mkdir base & cd base

$ vi base.module.js 

(function() {

  'use strict';

angular 

    .module('sa.base', ['oc.lazyLoad']);

})();

// pluginer 서비스를 만들어 보자 

$ mkdir pluginer & cd pluginer

$ vi pluginer.service.js 

(function() {

  'use strict';

  angular

    .module('sa.base')

    .service('pluginer', pluginer);

  /* @ngInject */

  function pluginer($q, $ocLazyLoad) {

    this.load = load;

    function load(moduleName, filePath) {

      var deferred = $q.defer();

      $ocLazyLoad

        .load({

          name: moduleName,

          files: [ filePath ]

        })

        .then(function() {

          console.log('loaded plugin: ' + moduleName + ' successfully.');

          deferred.resolve('ok');

        }, function() {

          console.log('failed plugin: ' + moduleName + ' successfully.');

          deferred.reject('fail');

        });

      return deferred.promise;

    }

  }

})();

// 최종 폴더 구조 

// client 밑에 plugins 폴더를 생성한다.

$ mkdir plugins & cd plugins

$ mkdir bizchart01 & cd bizchart01

$ vi bizchart01.js 

(function() {

  'use strict';

  angular

    .module('plugin.bizchart01', [])

    .service('bizchart01', bizchart01);

  function bizchart01() {

    this.draw = draw;

    function draw() {

      return 'drawing....';

    }

  }

})();

// plugins 폴더 

// /client/app/app.js 의 sa.base 모듈 의존 설정 

  angular

    .module('saprotoApp', [

 'ngCookies',

 'ngResource',

 'ngSanitize',

 'ui.router',

 'ui.bootstrap',

                  'sa.base'

])

    .config(config)

    .factory('authInterceptor', authInterceptor)

    .run(run);

// main.html 과 main.controller.js를 수정하여 테스트 코드 작성

// main.html 

 <li><a href="#" ng-click="lazyloading()">Load Module</a>: {{lazyloadingMsg}}</li>

// main.controller.js 

(function () {

  'use strict';

  angular

    .module('saprotoApp')

    .controller('MainCtrl', MainCtrl);

  /* @ngInject */

  function MainCtrl($scope, $injector, pluginer) {

    $scope.lazyloading = lazyloading;

    function lazyloading() {

      pluginer

        .load('plugin.bizchart01', 'plugins/bizchart01/bizchart01.js')

        .then(function() {

          var bizchart01 = $injector.get('bizchart01');

          $scope.lazyloadingMsg = 'lazyloading message: ' + bizchart01.draw();

          console.log($scope.lazyloadingMsg);

        });

    }    

  }

})();

$ cd web_client/client/

$ mkdir components && cd components

$ mkdir app

$ mkdir base

// app.framework.js 내역 

(function() {

  'use strict';

  angular

    .module('app.framework', ['base.framework']);

})();

// base.framework.js 내역 

(function() {

  'use strict';

  angular

    .module('base.framework', []);

})();

// index.html 일부 내역 

<!-- build:js({.tmp,client}) app/app.js -->

<script src="components/base/base.framework.js"></script>

<script src="components/app/app.framework.js"></script>

<script src="app/app.js"></script>

<!-- injector:js -->

<script src="assets/javascripts/angulartics-ga-custom.js"></script>

// Gruntfile.js 일부 내역

 watch: {

            injectJS: {

                files: [

                    '<%= yeoman.client %>/{app,components}/**/*.js',

                    '!<%= yeoman.client %>/{app,components}/**/*.spec.js',

                    '!<%= yeoman.client %>/{app,components}/**/*.mock.js',

                    '!<%= yeoman.client %>/components/base/base.framework.js',

                    '!<%= yeoman.client %>/components/app/app.framework.js',

                    '!<%= yeoman.client %>/app/app.js'],

                tasks: ['injector:scripts']

            }, 

... 중략 ....

injector: {

            options: {},

            // Inject application script files into index.html (doesn't include bower)

            scripts: {

                options: {

                    transform: function(filePath) {

                        filePath = filePath.replace('/client/', '');

                        filePath = filePath.replace('/.tmp/', '');

                        return '<script src="' + filePath + '"></script>';

                    },

                    starttag: '<!-- injector:js -->',

                    endtag: '<!-- endinjector -->'

                },

                files: {

                    '<%= yeoman.client %>/index.html': [

                        [

                            '{.tmp,<%= yeoman.client %>}/assets/javascripts/*.js',

                            '{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',

                            '!{.tmp,<%= yeoman.client %>}/components/base/base.framework.js',

                            '!{.tmp,<%= yeoman.client %>}/components/app/app.framework.js',

                            '!{.tmp,<%= yeoman.client %>}/app/app.js',

                            '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js',

                            '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js']

                    ]

                }

            },

// app.js 의존관계 설정 

angular.module('jandiApp', [

    'base.framework',

    'app.framework',

    ... 중략 ...]);

// config, run의 수행 순서 로그 

=========> Base framework Module config

=========> App framework Module config

=========> jandiApp Module config

=========> Base framework Module run

=========> App framework Module run

=========> jandiApp Module run

$ cd web_client/components/app

$ mkdir config && cd config

// app.js 일부내역 

app.run(function() {

$rootScope.server_address   = configuration.api_address + "inner-api/";

      $rootScope.server_uploaded  = configuration.api_address;

$rootScope.api_version      = configuration.api_version;

$rootScope.configuration    = configuration;  

});

// components/app/config/config.js 내역 

(function() {

  'use strict';

  angular

    .module('app.config', [])

    .constant('configuration', {

      name                : 'local',

      api_address         : 'http://www.jandi.com/',

      api_version         : '2',

      ga_token            : 'UA-222222-1',

      ga_token_global     : 'UA-1111111-1',

      mp_token            : 'abcdefghijklmn',

      base_url            : '.jandi.io',

      base_protocol       : 'http://',

      main_address        : 'http://www.jandi.com/main/#/',

      app_store_address   : 'xxxx',

      play_store_address  : 'yyyy'

    })

    .run(run);

  /* @ngInject */

  function run($rootScope, config) {

    // server address, server api version 

    config.init($rootScope);

  }

})();

// components/app/config/config.service.js 내역 

(function() {

  'use strict';

  angular

    .module('app.config')

    .service('config', config);

  /* @ngInject */

  function config(configuration) {

    var self = this;

    this.init = init; 

    function init($rootScope) {

      // TODO : maybe remove next factoring

      // compatibility for current version

      $rootScope.server_address   = configuration.api_address + "api/";

      $rootScope.server_uploaded  = configuration.api_address;

      $rootScope.api_version      = configuration.api_version;

      // configuration constant service       

      configuration.server_address  = configuration.api_address + "api/";

      configuration.server_uploaded = configuration.api_address;

      configuration.api_version     = configuration.api_version;

      // config service

      self.server_address  = configuration.api_address + "inner-api/";

      self.server_uploaded = configuration.api_address;

      self.api_version     = configuration.api_version; 

    }

  }

})();

// app.js 의존관계 

angular

  .module('jandiApp', [

    'app.framework'

  ]);

// app.framework.js 의존관계

 angular

    .module('app.framework', [

        'base.framework',

        'app.config'

      ])

    .run(run)

    .config(config);

// base.framework.js 의존관계

  angular

    .module('base.framework', [

      'ui.router',

      'ui.bootstrap',

      'gettext'

      'ngCookies',

      'ngResource',

      'ngSanitize',

      'ngAnimate'

    ])

$ git clone https://github.com/DaftMonk/generator-angular-fullstack.git

$ git clone https://github.com/DaftMonk/generator-ng-component.git

$ mv generator-angular-fullstack generator-jdi

$ mv generator-ng-component generator-jdi-component

$ cd generator-jdi && rm -rf .git

$ cd generator-jdi-component && rm -rf .git

(function() { 

  'use strict';

  angular

    .module('<%= scriptAppName %>')

    .controller('<%= classedName %>Ctrl', <%= classedName %>Ctrl);

  /* @ngInject */

  function <%= classedName %>Ctrl($scope) {

  }

})();

$ mkdir test && cd test

$ mkdir node_modules && cd node_modules 

$ ln -s <fullPath>/generator-jdi  generator-jdi

$ ln -s <fullPath>/generator-jdi-component generator-jdi-component

// 둘은 같은 디렉토리에 있어야 함 

$ cd <fullPath>/generator-jdi-component && npm install

$ cd <fullPath>/generator-jdi && npm install 

$ cd test 

$ yo jdi Jandi

$ cd generator-jdi-component 

$ npm publish

+ generator-jdi-component@0.0.1

$ cd generator-jdi

$ npm publish

+ generator-jdi@0.0.1

$ npm install -g generator-jdi

$ mkdir web_tiger && cd web_tiger

$ yo jdi Jandi

// home.html 일부 내역

<head th:include="/layout/partials/head (pageTitle='Broadleaf Demo - Heat Clinic')"></head>

<body>

    <div id="notification_bar"></div>

    <header th:substituteby="layout/partials/header" />

    <div id="content" class="width_setter group" role="main">

        <nav th:substituteby="layout/partials/nav" />

        <blc:content contentType="Homepage Banner Ad" />       

        <div id="banners" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}">

            <a th:href="@{${contentItem['targetUrl']}}"><img blc:src="@{${contentItem['imageUrl']}}" /></a>       

        </div>

  ... 중략 ...

</body>

// HeadProcessor.java 일부 내역

import org.thymeleaf.processor.element.AbstractFragmentHandlingElementProcessor;

public class HeadProcessor extends AbstractFragmentHandlingElementProcessor {

    @Resource(name = "blHeadProcessorExtensionManager")

    protected HeadProcessorExtensionListener extensionManager;

    public static final String FRAGMENT_ATTR_NAME = StandardFragmentAttrProcessor.ATTR_NAME;

    protected String HEAD_PARTIAL_PATH = "layout/partials/head";

    public HeadProcessor() {

        super("head");

    }

    @Override

    public int getPrecedence() {

        return 10000;

    }

    @Override

    protected boolean getRemoveHostNode(final Arguments arguments, final Element element) {

        return true;

    }

    @Override

    @SuppressWarnings("unchecked")

    protected List<Node> computeFragment(final Arguments arguments, final Element element) {

        String pageTitle = element.getAttributeValue("pageTitle");

        try {

            Expression expression = (Expression) StandardExpressions.getExpressionParser(arguments.getConfiguration())

                    .parseExpression(arguments.getConfiguration(), arguments, pageTitle);

            pageTitle = (String) expression.execute(arguments.getConfiguration(), arguments);

        } catch (TemplateProcessingException e) {}

        ((Map<String, Object>) arguments.getExpressionEvaluationRoot()).put("pageTitle", pageTitle);

      ((Map<String, Object>) arguments.getExpressionEvaluationRoot()).put("additionalCss", element.getAttributeValue("additionalCss"));

        extensionManager.processAttributeValues(arguments, element);

        return new ArrayList<Node>();

    }

}

1) admin 프로젝트에서 ant task중 jetty-demo 실행

2) http://localhost:8081/admin (id:admin, password: admin)

3) Content 메뉴의 content items 목록이 나온다. 여기서 "Content Type"으로 찾으면 됨 

// layout/partials/head.html 

    <blc:bundle name="style.css" 

                mapping-prefix="/css/"

                files="bootstrap.css,

                       style.css,

                       jquery.rating.css" />

// layout/partials/footer.html

    <blc:bundle name="lib.js" 

                mapping-prefix="/js/"

                files="plugins.js,

                       libs/jquery.MetaData.js,

                       libs/jquery.rating.pack.js,

                       libs/jquery.dotdotdot-1.5.1.js,

                       bootstrap.js" />

/************************************/

/* Header Customizing               */

/************************************/

.navbar .navbar-top {

height: 30px;

padding-top: 5px;

background-color: #F5F5F5;

transition: all 0.1s ease-out 0s;

-webkit-transition: all 0.1s ease-out 0s;

-moz-transition: all 0.1s ease-out 0s;

-ms-transition: all 0.1s ease-out 0s;

-o-transition: all 0.1s ease-out 0s;

font-size: 11px;

line-height: 11px;

text-transform: uppercase;

}

.navbar .container-fluid {

background-color:#525252;

}

.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-brand {

color: #FEFEFE;

}

html, body {

height: 100%;

}

<head th:include="/layout/partials/head (pageTitle='Broadleaf And Twitter Bootstrap')"></head>

<body>

    <div id="notification_bar"></div>

    <nav th:substituteby="layout/partials/nav" />

    <footer th:substituteby="layout/partials/footer" />

</body>

</html>

<nav>   

    <div th:remove="all">

        <!--

             This template displays the navigation of the site by looking up the category named "Nav"

             and building a list of the categories sub-categories.                          

        -->

    </div>

    <blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

      <!-- TOP Header  -->

      <div class="navbar-top">

      <div class="container">

      <div class="pull-right">

    <div th:if="${customer.anonymous}"  th:remove="tag">

            <a th:href="@{/login}">

                <span th:text="#{home.login}">Login</span>

            </a>

            &nbsp;|&nbsp; 

            <a th:href="@{/register}">

                <span th:text="#{home.register}">Register</span>

            </a>

            &nbsp;|&nbsp; 

        </div>

        <div th:unless="${customer.anonymous}" th:remove="tag">

            <span><span th:text="#{home.welcome}">Welcome</span>, <a th:href="@{/account}" th:text="${customer.firstName}"></a></span>

            &nbsp;|&nbsp; 

            <a th:href="@{/logout}">

                <span th:text="#{home.logout}">Logout</span>

            </a>

            &nbsp;|&nbsp; 

        </div>

        <img blc:src="@{/img/icon-cart.jpg}" alt="Shopping Cart Icon" />&nbsp; 

        <a id="cartLink" th:href="@{/cart}">

            <span id="headerCartItemWordSingular_i18n" style="display: none;" th:text="#{home.item}" />

            <span id="headerCartItemWordPlural_i18n" style="display: none;" th:text="#{home.items}" />

            <span class="headerCartItemsCount" th:text="${cart.itemCount}" />

            <span class="headerCartItemsCountWord" th:text="${cart.itemCount == 1} ? #{home.item} :  #{home.items}" />

        </a>

    </div>   

    </div>

      </div>

      <!-- Responsible Menu -->

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="/">eCommerce</a>

        </div>

        <div id="navbar" class="navbar-collapse collapse">

          <!-- Categories -->

          <ul class="nav navbar-nav navbar-right">

        <blc:form class="navbar-form navbar-right" style="margin-left:5px; margin-right:5px" th:action="@{/search}" method="GET">

            <input type="search" class="form-control" placeholder="SEARCH PROD" name="q" th:value="${originalQuery}" />

            <input type="submit" class="btn btn-default" value="go" />

    </blc:form>

            <li th:each="category : ${navCategories}" th:unless="${#strings.isEmpty(category.url)}">

            <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>

        </li>

          </ul>

        </div>

      </div>

    </nav>

</nav>

$ cd DemoSite

$ mvn clean install

Site

http://localhost:8080

Admin (id: admin, password: admin)

http://localhost:8081/admin/

-- %> mysql --user=root -p mysql

-- Enter password: ******

-- mysql> grant all on broadleaf.* to broadleaf@localhost identified by 'abc1234' with grant option;

-- mysql> create database broadleaf;

-- mysql> flush privileges;

-- %> mysql -u broadleaf -p broadleaf

-- Enter password: ******

-- mysql> show grants for broadleaf@localhost;

-- mysql> select current_user;

// DemoSite/pom.xml  안에 설정 

<dependency>

    <groupId>mysql</groupId>

    <artifactId>mysql-connector-java</artifactId>

    <version>5.1.34</version>

    <type>jar</type>

    <scope>compile</scope>

</dependency> 

// admin, site/pom.xml 안에 설정 

<dependency>

    <groupId>mysql</groupId>

    <artifactId>mysql-connector-java</artifactId>

</dependency> 

<New id="webDS" class="org.eclipse.jetty.plus.jndi.Resource">

    <Arg>jdbc/web</Arg>

    <Arg>

        <New class="org.apache.commons.dbcp.BasicDataSource">

            <Set name="driverClassName">com.mysql.jdbc.Driver</Set>

            <Set name="url">jdbc:mysql://localhost:3306/broadleaf?useUnicode=true&amp;characterEncoding=utf8</Set>

            <Set name="username">broadleaf</Set>

            <Set name="password">abc1234</Set>

        </New>

    </Arg>

</New>

<New id="webSecureDS" class="org.eclipse.jetty.plus.jndi.Resource">

    <Arg>jdbc/secure</Arg>

    <Arg>

        <New class="org.apache.commons.dbcp.BasicDataSource">

            <Set name="driverClassName">com.mysql.jdbc.Driver</Set>

            <Set name="url">jdbc:mysql://localhost:3306/broadleaf?useUnicode=true&amp;characterEncoding=utf8</Set>

            <Set name="username">broadleaf</Set>

            <Set name="password">abc1234</Set>

        </New>

    </Arg>

</New>

<New id="webStorageDS" class="org.eclipse.jetty.plus.jndi.Resource">

    <Arg>jdbc/storage</Arg>

    <Arg>

        <New class="org.apache.commons.dbcp.BasicDataSource">

            <Set name="driverClassName">com.mysql.jdbc.Driver</Set>

            <Set name="url">jdbc:mysql://localhost:3306/broadleaf?useUnicode=true&amp;characterEncoding=utf8</Set>

            <Set name="username">broadleaf</Set>

            <Set name="password">abc1234</Set>

        </New>

    </Arg>

</New>

# overriding dialect 

blPU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blSecurePU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blCMSStorage.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

# new overriding 

ant.hibernate.sql.ddl.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

ant.blPU.url=jdbc:mysql://localhost:3306/broadleaf

ant.blPU.userName=broadleaf

ant.blPU.password=abc1234

ant.blPU.driverClassName=com.mysql.jdbc.Driver

ant.blSecurePU.url=jdbc:mysql://localhost:3306/broadleaf

ant.blSecurePU.userName=broadleaf

ant.blSecurePU.password=abc1234

ant.blSecurePU.driverClassName=com.mysql.jdbc.Driver

ant.blCMSStorage.url=jdbc:mysql://localhost:3306/broadleaf

ant.blCMSStorage.userName=broadleaf

ant.blCMSStorage.password=abc1234

# overriding dialect 

blPU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blSecurePU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blCMSStorage.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

$ git clone https://github.com/elasticsearch-kr/es-data-visualization-hackerton 

$ cd es-data-visualization-hackerton 

$ yo angular-fullstack esvisualization

// main.html 안에 angular-nvd3.directives html 태그 및 속성 설정 

    <div class="row">

      <div class="col-xs-12 col-md-12">

        <div class="panel panel-default">

          <div class="panel-heading">

            <button type="button" ng-click="getImpression()" class="btn btn-default">Impression Histogram</button>

          </div>

          <div class="panel-body">

            <!-- angular-nvd3-directives : multi-bar chart -->

            <div class="col-xs-12 col-md-12">

              <nvd3-multi-bar-chart

                  data="impressionData"

                  id="dataId"

                  xAxisTickFormat="xAxisTickFormatFunction()"

                  width="550"

                  height="350"

                  showXAxis="true"

                  showYAxis="true">

                    <svg></svg>

              </nvd3-multi-bar-chart>

            </div>

          </div>

        </div>

      </div>

    </div>

// main.js 안에서 elasticsearch.js를 직접 호출하여 사용함 

angular.module('esvisualizationApp')

  .controller('MainCtrl', function ($scope, $http) {

    // x축의 값을 date으로 변환하여 찍어준다 

    $scope.xAxisTickFormatFunction = function(){

      return function(d){

        return d3.time.format('%x')(new Date(d));

      }

    }

    // 화면에서 클릭을 하면 impression index 값을 ES에서 호출하여 

    // ES aggregation json 결과값을 파싱하여 차트 데이터에 맵핑한다

    $scope.getImpression = function() {

      // ES 접속을 위한 클라이언트를 생성한다 

      var client = new elasticsearch.Client({

                                              host: '54.178.125.74:9200',

                                              sniffOnStart: true,

                                              sniffInterval: 60000,

                                            });

// search 조회를 수행한다. POST 방식으로 body에 실 search query를 넣어준다 

      client.search({

          index: 'impression',

          size: 5,

          body: {

            "filter": {

                "and": [

                    {

                      "range": {

                        "time": {

                            "from": "2013-7-1", 

                            "to": "2014-6-30"

                        }

                      }

                    }

                ]

            },

            "aggs": {

              "events": {

                "terms": {

                  "field": "event"   

                },

                "aggs" : {   

                  "time_histogram" : {

                      "date_histogram" : {

                          "field" : "time",

                          "interval" : "1d",   

                          "format" : "yyyy-MM-dd" 

                      }

                  }

                }

              }

            }

            // End query.

          }

      }).then(function (resp) {

         var impressions = resp.aggregations.events.buckets[0].time_histogram.buckets;

         console.log(impressions);

         var fixData = [];

         angular.forEach(impressions, function(impression, idx) {

          fixData[idx] = [impression.key, impression.doc_count];

         });

   // 결과에 대해서 promise 패턴으로 받아서 angular-nvd3-directives의 데이터 구조를 만들어 준다

   // {key, values}가 하나의 series가 되고 배열을 가지면 다중 series가 된다. 

         $scope.impressionData = [

            {

              "key": "Series 1",

              "values": fixData

            }

          ];

  // apply 적용을 해주어야 차트에 데이터가 바로 반영된다.

        $scope.$apply();

      });

    }

  });

// 설치 

$ sudo npm install -g cordova 

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

cordova@3.5.0-0.2.4 /usr/local/lib/node_modules/cordova

$ sudo npm install -g ionic

/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic

ionic@1.0.14 /usr/local/lib/node_modules/ionic

// 프로젝트 생성

$ ionic start myAppSideMenu sidemenu

Running start task...

Creating Ionic app in folder /Users/prototyping/myAppSideMenu based on sidemenu project

DOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zip

DOWNLOADING: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.zip

Initializing cordova project.

Fetching plugin "org.apache.cordova.device" via plugin registry

Fetching plugin "org.apache.cordova.console" via plugin registry

Fetching plugin "https://github.com/driftyco/ionic-plugins-keyboard" via git clone

$ cd myAppSlideMenu

$ ionic platform add android

Running platform task...

Adding platform android

.. 생략 ..

Project successfully created.

Installing "com.ionic.keyboard" for android

Installing "org.apache.cordova.console" for android

Installing "org.apache.cordova.device" for android

$ ionic build android

Running build task...

Building platform android

Running command: /Users/prototyping/myAppSideMenu/platforms/android/cordova/build

Buildfile: /Users/prototyping/myAppSideMenu/platforms/android/build.xml

... 중략 ...

-post-build:

     [move] Moving 1 file to /Usersprototyping/myAppSideMenu/platforms/android/ant-build

     [move] Moving 1 file to /Users/prototyping/myAppSideMenu/platforms/android/CordovaLib/ant-build

debug:

BUILD SUCCESSFUL

Total time: 48 seconds

// Android의 AVD를 먼저 실행해야 한다 

$ ionic emulate android

Running emulate task...

Emulating app on platform android

Running command: /Users/nulpulum/development/studygps_company/prototyping/myAppSideMenu/platforms/android/cordova/run --emulator

... 중략 ...

BUILD SUCCESSFUL

Total time: 9 seconds

Installing app on emulator...

Using apk: /Users/prototyping/myAppSideMenu/platforms/android/ant-build/HelloCordova-debug-unaligned.apk

Launching application...

LAUNCH SUCCESS

-- AVD 통해 본 모습

* 안드로이드 AVD 관리하기 (참조)

// 완벽하게 angular.js 기반으로 운영된다 (angular.js v1.2.12 버전 번들링)

// www/lib/ionic/js/ionic.bundle.js 

// index.html 

// PhoneGap

$ npm install -g cordova

$ cordova create MyAppOnsenui && cd MyAppOnsenui

Creating a new cordova project with name "HelloCordova" and id "io.cordova.hellocordova" at location "/Users/prototyping/MyAppOnsenui"

Downloading cordova library for www...

Download complete

$ cordova platform add android

Creating android project...

Creating Cordova project for the Android platform:

Path: platforms/android

Package: io.cordova.hellocordova

Name: HelloCordova

Android target: android-19

Copying template files...

Running: android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"

Resolved location of library project to: /Users/prototyping/MyAppOnsenui/platforms/android/CordovaLib

Updated and renamed default.properties to project.properties

..중략..

Project successfully created.

-- build와 emulate 전에 하기의 Onsen ui 설치와 설정을 먼저 한 후에 수행한다 

$ cordova build android

.. 중략 ..

BUILD SUCCESSFUL

Total time: 32 seconds

-- android의 AVD를 먼저 실행해야 한다 

$ cordova emulate android

// Onsen ui

$ cd MyAppOnsenui

$ bower init  명령으로 bower.json 파일을 만들거나 기존의 generator-angular-fullstack의 것을 사용한다

$ bower install onsenui --save

-- http://onsenui.io/OnsenUI/project_templates/sliding_menu_navigator.zip 에서 샘플 파일을 다운로드 받아서 app 폴더에 있는 것을 www 폴더로 복사한다. 그리고 index.html안에 cordova.js를 넣는다. (개발시에는 404 NOT Found 발생함)

$ cordova build android

$ cordova emulate android

-- AVD로 띄워본 결과

google.load('visualization', '1.0', {'packages':[<<list-of-google-chart-libraries>>]})

$scope.chartObject = {};

$scope.onions = [

    {v: "Onions"},

    {v: 3},

];

// 데이터 시각화를 위하여 가장 큰 값은 첫번째에, 그 다음 큰값은 맨 마지막에 오게 한다 

$scope.chartObject.data = {"cols": [

    {id: "t", label: "Topping", type: "string"},

    {id: "s", label: "Slices", type: "number"}

], "rows": [

    {c: [

        {v: "Olives"},

        {v: 31}

    ]},

    {c: $scope.onions},

    {c: [

        {v: "Zucchini"},

        {v: 1},

    ]},

    {c: [

        {v: "Pepperoni"},

        {v: 2},

    ]},

    {c: [

        {v: "머쉬롬"},

        {v: 10},

    ]},

]};

$scope.chartObject.options = {

    'title'  : 'How Much Pizza I Ate Last Night',

    'height' : 500,

    'colors' : ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']

}

var options = {

  'legend':'left',

  'title':'My Big Pie Chart',

  'is3D':true,

  'width':400,

  'height':300

}

var wrapper = new google.visualization.ChartWrapper({

  chartType: 'ColumnChart',

  dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],

              ['', 700, 300, 400, 500, 600, 800]],

  options: {'title': 'Countries'},

  containerId: 'vis_div'

});

wrapper.draw();

function selectHandler() {

  var selectedItem = chart.getSelection()[0];

  if (selectedItem) {

    var topping = data.getValue(selectedItem.row, 0);

    alert('The user selected ' + topping);

  }

}

google.visualization.events.addListener(chart, 'select', selectHandler);  

/**

 * @description Google Chart Api Directive Module for AngularJS

 * @version 0.0.9

 * @author Nicolas Bouillon <nicolas@bouil.org>

 * @author GitHub contributors

 * @moidifier Peter Yun <nulpulum@gmail.com>

 * @license MIT

 * @year 2013

 */

(function (document, window, angular) {

    'use strict';

    angular.module('googlechart', [])

        .constant('googleChartApiConfig', {

            version: '1.0',

            optionalSettings: {

                packages: ['corechart']

            }

        })

        /**

         * 인코딩 주의)

         * index.html 안에 UTF-8 설정

         * <meta http-equiv="content-type" content="text/html; charset=UTF-8">

         *

         * 사용예)

         * <script type="text/javascript" src="https://www.google.com/jsapi"></script>

         * <script type="text/javascript">

         *   google.load('visualization', '1.0', {'packages':['corechart']});

         *   google.setOnLoadCallback(drawChart);

         *   function drawChart() { ... }

         * </script>

         *

         * @변경 : jsapi.js 파일을 로컬에서 읽어오도록 수정할 수 있다

         * googleJsapiUrlProvider.setProtocol(undiefined);

         * googleJsapiUrlProvider.setUrl('jsapi.js');

         *

         * @참조 : https://google-developers.appspot.com/chart/interactive/docs/quick_start

         */

        .provider('googleJsapiUrl', function () {

            var protocol = 'https:';

            var url = '//www.google.com/jsapi';

            this.setProtocol = function(newProtocol) {

                protocol = newProtocol;

            };

            this.setUrl = function(newUrl) {

                url = newUrl;

            };

            this.$get = function() {

                return (protocol ? protocol : '') + url;

            };

        })

        /**

         * google.load('visualization', '1.0', {'packages':['corechart']}); 수행하는 팩토리

         *

         * @param  {[type]} $rootScope     [description]

         * @param  {[type]} $q             [description]

         * @param  {[type]} apiConfig      [description]

         * @param  {[type]} googleJsapiUrl [description]

         * @return {[type]}                [description]

         */

        .factory('googleChartApiPromise', ['$rootScope', '$q', 'googleChartApiConfig', 'googleJsapiUrl', function ($rootScope, $q, apiConfig, googleJsapiUrl) {

            var apiReady = $q.defer();

            var onLoad = function () {

                // override callback function

                var settings = {

                    callback: function () {

                        var oldCb = apiConfig.optionalSettings.callback;

                        $rootScope.$apply(function () {

                            apiReady.resolve();

                        });

                        if (angular.isFunction(oldCb)) {

                            oldCb.call(this);

                        }

                    }

                };

                settings = angular.extend({}, apiConfig.optionalSettings, settings);

                window.google.load('visualization', apiConfig.version, settings);

            };

            var head = document.getElementsByTagName('head')[0];

            var script = document.createElement('script');

            script.setAttribute('type', 'text/javascript');

            script.src = googleJsapiUrl;

            if (script.addEventListener) { // Standard browsers (including IE9+)

                //console.log('>>> 1. load jsapi...');

                script.addEventListener('load', onLoad, false);

            } else { // IE8 and below

                //console.log('>>> 2. load jsapi...');

                script.onreadystatechange = function () {

                    if (script.readyState === 'loaded' || script.readyState === 'complete') {

                        script.onreadystatechange = null;

                        onLoad();

                    }

                };

            }

            head.appendChild(script);

            return apiReady.promise;

        }])

        /**

         * Element 또는 Attribute로 사용할 수 있다. Element 사용시에는 IE8+에 대한 고려가 있어야 함

         *

         * 사용예)

         * <div google-chart chart="chartObject" style="height:300px; width:100%;"></div>

         *

         * @param  {[type]} $timeout              [description]

         * @param  {[type]} $window               [description]

         * @param  {[type]} $rootScope            [description]

         * @param  {[type]} googleChartApiPromise [description]

         * @return {[type]}                       [description]

         */

        .directive('googleChart', ['$timeout', '$window', '$rootScope', 'googleChartApiPromise', function ($timeout, $window, $rootScope, googleChartApiPromise) {

            return {

                restrict: 'EA',

                scope: {

                    chartOrig: '=chart',

                    onReady: '&',

                    select: '&'

                },

                link: function ($scope, $elm, attrs) {

                    // Watches, to refresh the chart when its data, title or dimensions change

                    $scope.$watch('chartOrig', function () {

$scope.chart = angular.copy($scope.chartOrig);

                        drawAsync();

                    }, true); // true is for deep object equality checking

                    // Redraw the chart if the window is resized

                    $rootScope.$on('resizeMsg', function () {

                        $timeout(function () {

                            // Not always defined yet in IE so check

                            if($scope.chartWrapper) {

                                drawAsync();

                            }

                        });

                    });

                    // Keeps old formatter configuration to compare against

                    $scope.oldChartFormatters = {};

                    function applyFormat(formatType, formatClass, dataTable) {

                        var i, cIdx;

                        if (typeof($scope.chart.formatters[formatType]) != 'undefined') {

                            if (!angular.equals($scope.chart.formatters[formatType], $scope.oldChartFormatters[formatType])) {

                                $scope.oldChartFormatters[formatType] = $scope.chart.formatters[formatType];

                                $scope.formatters[formatType] = [];

                                if (formatType === 'color') {

                                    for (cIdx = 0; cIdx < $scope.chart.formatters[formatType].length; cIdx++) {

                                        var colorFormat = new formatClass();

                                        for (i = 0; i < $scope.chart.formatters[formatType][cIdx].formats.length; i++) {

                                            var data = $scope.chart.formatters[formatType][cIdx].formats[i];

                                            if (typeof(data.fromBgColor) != 'undefined' && typeof(data.toBgColor) != 'undefined')

                                                colorFormat.addGradientRange(data.from, data.to, data.color, data.fromBgColor, data.toBgColor);

                                            else

                                                colorFormat.addRange(data.from, data.to, data.color, data.bgcolor);

                                        }

                                        $scope.formatters[formatType].push(colorFormat)

                                    }

                                } else {

                                    for (i = 0; i < $scope.chart.formatters[formatType].length; i++) {

                                        $scope.formatters[formatType].push(new formatClass(

                                            $scope.chart.formatters[formatType][i])

                                        );

                                    }

                                }

                            }

                            //apply formats to dataTable

                            for (i = 0; i < $scope.formatters[formatType].length; i++) {

                                if ($scope.chart.formatters[formatType][i].columnNum < dataTable.getNumberOfColumns())

                                    $scope.formatters[formatType][i].format(dataTable, $scope.chart.formatters[formatType][i].columnNum);

                            }

                            //Many formatters require HTML tags to display special formatting

                            if (formatType === 'arrow' || formatType === 'bar' || formatType === 'color')

                                $scope.chart.options.allowHtml = true;

                        }

                    }

                    function draw() {

                        // 그리고 있는중에는 다시 그리기 안함

                        if (!draw.triggered && ($scope.chart != undefined)) {

                            draw.triggered = true;

                            // ref: https://docs.angularjs.org/api/ng/service/$timeout

                            $timeout(function () {

                                if (typeof($scope.formatters) === 'undefined')

                                    $scope.formatters = {};

                                var dataTable;

                                if ($scope.chart.data instanceof google.visualization.DataTable)

                                    dataTable = $scope.chart.data;

                                else if (angular.isArray($scope.chart.data))

                                    dataTable = google.visualization.arrayToDataTable($scope.chart.data);

                                else

                                    dataTable = new google.visualization.DataTable($scope.chart.data, 0.5);

                                if (typeof($scope.chart.formatters) != 'undefined') {

                                    applyFormat("number", google.visualization.NumberFormat, dataTable);

                                    applyFormat("arrow", google.visualization.ArrowFormat, dataTable);

                                    applyFormat("date", google.visualization.DateFormat, dataTable);

                                    applyFormat("bar", google.visualization.BarFormat, dataTable);

                                    applyFormat("color", google.visualization.ColorFormat, dataTable);

                                }

                                var customFormatters = $scope.chart.customFormatters;

                                if (typeof(customFormatters) != 'undefined') {

                                    for (var name in customFormatters) {

                                        applyFormat(name, customFormatters[name], dataTable);

                                    }

                                }

// resize > 0 이상이면 적용됨  

// by peter yun

 // <div style="height:100%" id="gc"> 

 // <div google-chart chart="chartObject" resize="#gc" style="width:100%;"></div>

 // </div>

 var height = angular.element(attrs.resize).height();

       if(height) {

$scope.chart.options.height = height;

       }

                                var chartWrapperArgs = {

                                    chartType: $scope.chart.type,

                                    dataTable: dataTable,

                                    view: $scope.chart.view,

                                    options: $scope.chart.options,

                                    containerId: $elm[0]

                                };

                                $scope.chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);

                                google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {

                                    $scope.chart.displayed = true;

                                    $scope.$apply(function (scope) {

                                        scope.onReady({chartWrapper: scope.chartWrapper});

                                    });

                                });

                                google.visualization.events.addListener($scope.chartWrapper, 'error', function (err) {

                                    console.log("Chart not displayed due to error: " + err.message + ". Full error object follows.");

                                    console.log(err);

                                });

                                google.visualization.events.addListener($scope.chartWrapper, 'select', function () {

                                    var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];

                                    $scope.$apply(function () {

                                        $scope.select({selectedItem: selectedItem});

                                    });

                                });

                                $timeout(function () {

                                    $elm.empty();

                                    $scope.chartWrapper.draw();

draw.triggered = false;

                                });

                            }, 0, true);

                        }

                    }

                    /**

                     * jsapi의 load가 끝나면 draw하도록 promise를 걸어 놓은 것

                     *

                     * @return {[type]} [description]

                     */

                    function drawAsync() {

                        googleChartApiPromise.then(function () {

                            draw();

                        })

                    }

                }

            };

        }])

        /**

         * window즉 브라우져의 사이즈가 변경되면 google chart의 size를 변경토록 한다. 단 html설정에서 다음과 같이 되어야 한다

         * <div google-chart chart="chartObject" style="height:300px; width:100%;"></div>

         * height는 %가 아니라 자신이 속한 parent dive의 height를 따르도록 해주어야 한다

         *

         * @param  {[type]} $rootScope [description]

         * @param  {[type]} $window    [description]

         * @return {[type]}            [description]

         */

        .run(['$rootScope', '$window', function ($rootScope, $window) {

            angular.element($window).bind('resize', function () {

                $rootScope.$emit('resizeMsg');

            });

        }]);

})(document, window, window.angular);

$ npm install -g protractor

$ webdriver-manager update 

$ webdriver-manager start

seleniumProcess.pid: 55938

6월 02, 2014 5:08:16 오후 org.openqa.grid.selenium.GridLauncher main

정보: Launching a standalone server

Setting system property webdriver.chrome.driver to /usr/local/lib/node_modules/protractor/selenium/chromedriver

17:08:16.913 INFO - Java: Oracle Corporation 24.51-b03

17:08:16.915 INFO - OS: Mac OS X 10.9.3 x86_64

17:08:16.935 INFO - v2.41.0, with Core v2.41.0. Built from revision 3192d8a

17:08:17.079 INFO - Default driver org.openqa.selenium.ie.InternetExplorerDriver registration is skipped: registration capabilities Capabilities [{platform=WINDOWS, ensureCleanSession=true, browserName=internet explorer, version=}] does not match with current platform: MAC

17:08:17.145 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub

17:08:17.146 INFO - Version Jetty/5.1.x

17:08:17.148 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]

17:08:17.149 INFO - Started HttpContext[/selenium-server,/selenium-server]

17:08:17.149 INFO - Started HttpContext[/,/]

17:08:17.510 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@4b8e282c

17:08:17.510 INFO - Started HttpContext[/wd,/wd]

17:08:17.517 INFO - Started SocketListener on 0.0.0.0:4444

17:08:17.517 INFO - Started org.openqa.jetty.jetty.Server@3e578b06

exports.config = {

  seleniumAddress: 'http://localhost:4444/wd/hub',

  capabilities: {'browserName': 'chrome'},

  specs: ['test/client/e2e/**/*.js'],

  baseUrl: 'http://localhost:9000',

  jasmineNodeOpts: {

    onComplete: null,

    isVerbose: true,

    showColors: true,

    includeStackTrace: true,

    defaultTimeoutInterval: 10000

  },

  framework: 'jasmine'

};

$ webdriver-manager start 

$ protractor protractor-e2e.conf.js

Using the selenium server at http://localhost:4444/wd/hub

[launcher] Running 1 instances of WebDriver

Finished in 0.001 seconds

0 tests, 0 assertions, 0 failures

[launcher] chrome passed

$ npm install grunt-protractor-runner --save-dev

// grunt.initConfig 안에 설정

  protractor: {

      options: {

        keepAlive: true

      },

      run: {

        options: {

          configFile: "protractor-e2e.conf.js", // Target-specific config file

          args: {} // Target-specific arguments

        }

      }

  },

// task 설정

  grunt.registerTask('test', function(target) {

    if (target === 'server') {

      return grunt.task.run([

        'env:test',

        'mochaTest'

      ]);

    }

    else if (target === 'client') {

      return grunt.task.run([

        'concurrent:test',

        'autoprefixer',

        'karma',

        'protractor'

      ]);

    }

    else grunt.task.run([

      'test:server',

      'test:client'

    ]);

  });

// grunt test 에 첨부 

$ grunt test 또는 grunt test:client 수행 (단, 수행전에 webdriver-manager start 수행해 놓은 상태이어야함)

Running "protractor:run" (protractor) task

Using the selenium server at http://localhost:4444/wd/hub

[launcher] Running 1 instances of WebDriver

Finished in 0 seconds

0 tests, 0 assertions, 0 failures

[launcher] chrome passed

Done, without errors.

Execution Time (2014-06-02 15:43:51 UTC)

protractor:run  2.2s  ▇▇ 100%

Total 2.3s

$ webdriver-manager start

$ protractor protractor-e2e.conf.js

> browser : webdriver를 감싼 객체. navigation 과 page information 을 갖음

> element : html element를 찾고 상호작용을 위한 helper method 

> by : element locator collection

> protractor : webdriver namespace를 wrapping한 protractor namespace

• by.binding searches for elements by matching binding names, either from ng-bind or {{}} notation in the template.
• by.model searches for elements by input ng-model.
• by.repeater searches for ng-repeat elements. For example, by.repeater('phone in phones').row(11).column('price')returns the element in the 12th row (0-based) of the ng-repeat = "phone in phones" repeater with the binding matching{{phone.price}}.

'use strict';

var LoginPage = function() {

this.email = element(by.model('user.email'));

this.password = element(by.model('user.password'));

this.setEmail = function(email) {

this.email.sendKeys(email);

};

this.setPassword=  function(password) {

this.password.sendKeys(password);

};

this.url = function() {

browser.get('/#/signin');

};

this.login = function() {

return element(by.buttonText('button')).click();

};

};

describe('Login Page', function() {

it('should successfully login', function(){

var loginPage = new LoginPage();

loginPage.url();

loginPage.setEmail('test@test.com');

loginPage.setPassword('test');

loginPage.login().then(function(response){

console.log(response);

}, function(error){

})

});

});

// index.html 기존 설정

<body ng-app="meanstackApp">

    <!-- Add your site or application content here -->

    <div class="container" ng-view=""></div>

</body>

<!-- Add your site or application content here -->

<!-- menu -->

<div ng-include="' /views/menu.html '"></div>

// index.html

<div class="navbar navbar-inverse navbar-fixed-top" ng-include="' /views/menu.html '"></div>

// menu.html 

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>

    <div class="collapse navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#about">About</a></li>

        <li><a href="#contact">Contact</a></li>

      </ul>

    </div><!--/.nav-collapse -->

  </div>

참조: http://getbootstrap.com/components/#navbar

// menu.html 변경 내용

<div class="container">

  <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand" href="#"> MEANStack.net</a>

  </div>

  <div class="collapse navbar-collapse">

    <ul class="nav navbar-nav">

      <li class="dropdown">

        <a href="" class="dropdown-toggle" data-toggle="dropdown"> My Area <b class="caret"></b></a>

        <ul class="dropdown-menu">

          <li class="dropdown-header">Status</li>

          <li>

            <a href="#"> My Level: 평민</a> 

          </li>

          <li>

            <a href="#"> 질문: 3, 답변: 1</a>

          </li>

          <li class="divider"></li>

          <li class="dropdown-header">Following</li>

          <li>

            <a href="#"> 윤영식</a>

          </li>

        </ul>

      </li>

      <li class="dropdown">

        <a href="" class="dropdown-toggle" data-toggle="dropdown"> Tech Area <b class="caret"></b></a>

        <ul class="dropdown-menu">

          <li class="dropdown-header">SPA</li>

          <li>

            <a href="#"> Angular.js</a>

          </li>

          <li class="divider"></li>

          <li class="dropdown-header">Middleware</li>

          <li>

            <a href="#"> Node.js</a>

          </li>

          <li>

            <a href="#"> Express.js</a>

          </li>

          <li class="divider"></li>

          <li class="dropdown-header">NoSQL</li>

          <li>

            <a href="#"> MongoDB</a>

          </li>

          <li class="divider"></li>

          <li class="dropdown-header">Eco Tools</li>

          <li>

            <a href="#"> Yeoman</a>

          </li>

        </ul>

      </li>

      <li class="dropdown">

        <a href="" class="dropdown-toggle" data-toggle="dropdown"> GuruGuru <b class="caret"></b></a>

        <ul class="dropdown-menu">

          <li class="dropdown-header">Ranking</li>

          <li>

            <a href="#"> 명예의 전당</a>

          </li>

          <li class="divider"></li>

          <li class="dropdown-header">Members</li>

          <li>

            <a href="#"> 멤버소개</a>

          </li>

        </ul>

      </li>

    </ul>

  </div><!--/.nav-collapse -->

</div>

<div class="row">

  <div class="col-md-12">

    <h1>mylevel.html</h1>

  </div>

</div>

// 기존 설정

<li>

    <a href="#"> My Level: 평민</a> 

</li>

// 변경 설정 

<li data-ng-class="{ active: $state.includes('mylevel') }">

   <a ui-sref="mylevel"> My Level: 평민</a> 

</li>

'use strict';

angular.module('meanstackApp', [

  'ngCookies',

  'ngResource',

  'ngSanitize',

  'ngRoute',

  'ui.bootstrap',

  'ui.router'

])

.config(['$stateProvider', '$urlRouterProvider',  function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/");

    $stateProvider

      .state('main', {

        url: '/',

        templateUrl: 'views/main.html',

        controller: ''

      })

      .state('mylevel', {

        url: '/mylevel',

        templateUrl: 'views/mylevel.html',

        controller: ''

      });

  }])

// app/index.html 기존 

<div class="navbar navbar-inverse navbar-fixed-top" ng-include="' /views/menu.html '"></div>

// app/index.html 수정

<div class="navbar navbar-default navbar-static" ng-include="' /views/menu.html '"></div>

// app/views/main.html 수정 

<div class="row">

  <div class="col-md-12">

    <h1>main.html</h1>

    <h2> Welcome to MEANStack.net</h2>

  </div>

</div>

// app/sytles/main.css 의 모든 내역을 삭제함