{"id":124,"date":"2014-09-03T07:28:33","date_gmt":"2014-09-02T22:28:33","guid":{"rendered":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2014\/09\/03\/angularjs-tips"},"modified":"2014-09-03T07:28:33","modified_gmt":"2014-09-02T22:28:33","slug":"angularjs-tips","status":"publish","type":"post","link":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2014\/09\/03\/angularjs-tips\/","title":{"rendered":"AngularJS \u3067 Google \u30de\u30c3\u30d7\u3068\u304b\u4f7f\u3063\u3066\u307f\u305f"},"content":{"rendered":"

4\u6708\u306b\u3053\u306e\u8a18\u4e8b<\/a>\u3092\u8aad\u3093\u3067\u30014\u6642\u534a\u8d77\u304d\u3092\u5b9f\u8df5\u3057\u3066\u307f\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u6700\u8fd1\u306f\u8d77\u304d\u308b\u3068\u307e\u3060\u3042\u305f\u308a\u304c\u6697\u3044\u3093\u3067\u3059\u3088\u306d\u3002
\u3082\u3046\u79cb\u3060\u306a\u3041\u2026\u3068\u5b9f\u611f\u3059\u308b\u65e5\u3005\u306e\u4f50\u3005\u6728\u3067\u3059\u3002 <\/p>\n

\u4eca\u56de\u306f\u3001AngularJS \u3092\u4f7f\u3063\u3066\u3044\u3066\u3001\u300c\u3053\u308c\u3001\u3069\u3046\u3084\u3063\u3066\u3084\u308b\u3093\u3060\u308d\u3046\u300d\u3063\u3066\u601d\u3063\u305f\u3053\u3068\u3084\u3001\u4f7f\u3063\u3066\u307f\u3066\u4fbf\u5229\u3060\u3063\u305f\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u7c21\u5358\u306b\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002
\u4eca\u5f8c\u307e\u305f\u4f7f\u3046\u53ef\u80fd\u6027\u3082\u3042\u308b\u306e\u3067\u3001\u81ea\u5206\u306e\u5099\u5fd8\u9332\u3082\u517c\u306d\u3066\u3002<\/p>\n

\u4e8b\u524d\u6e96\u5099\u3068\u3057\u3066\u30a2\u30d7\u30ea\u4f5c\u6210<\/h4>\n

Yeoman\u3092\u4f7f\u3044\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n

$ yo angular sample<\/code><\/pre>\n
\n
Google \u30de\u30c3\u30d7\u3092\u4f7f\u3046<\/h3>\n
AngularJS \u3067 Google \u30de\u30c3\u30d7\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u3067\u3059\u3002
\u4eca\u56de\u306f\u3001angular-google-maps<\/a> \u3092\u4f7f\u3044\u307e\u3059\u3002
Quickstart<\/a> \u3092\u53c2\u8003\u306b\u3002<\/p>\n
bower \u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n
bower \u3067 angular-google-maps \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n
$ bower install angular-google-maps --save<\/code><\/pre>\n
Google Maps API v3 \u3092 html \u306b\u5165\u308c\u308b<\/h4>\n
index.html \u3084 \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u306b Google Maps API \u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n
<script src='https:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false'><\/script>\n<script src='\/path\/to\/lodash.underscore[.min].js'><\/script>\n<script src='\/path\/to\/angular-google-maps[.min].js'><\/script><\/code><\/pre>\n
app.js \u306b google-maps \u3092\u5165\u308c\u308b<\/h4>\n
google-maps \u30e2\u30b8\u30e5\u30fc\u30eb\u3092 app.js \u306b\u5165\u308c\u307e\u3059\u3002<\/p>\n
$ vi app\/scripts\/app.js<\/code><\/pre>\n
'use strict';\n\n\/**\n * @ngdoc overview\n * @name sampleApp\n * @description\n * # sampleApp\n *\n * Main module of the application.\n *\/\nangular\n  .module('sampleApp', [\n    'ngAnimate',\n    'ngCookies',\n    'ngResource',\n    'ngRoute',\n    'ngSanitize',\n    'ngTouch',\n    'google-maps' \/\/\u3053\u3053\u306b\u8ffd\u52a0\n  ])\n  .config(function ($routeProvider) {\n    $routeProvider\n      .when('\/', {\n        templateUrl: 'views\/main.html',\n        controller: 'MainCtrl'\n      })\n      .when('\/about', {\n        templateUrl: 'views\/about.html',\n        controller: 'AboutCtrl'\n      })\n      .otherwise({\n        redirectTo: '\/'\n      });\n  });<\/code><\/pre>\n
\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e scope \u306b map \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u66f8\u304f<\/h4>\n
\u4e0b\u8a18\u306e\u3088\u3046\u306b\u3001\u7def\u5ea6\u7d4c\u5ea6\u306e\u60c5\u5831\u306a\u3069\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
$ vi app\/scripts\/controllers\/main.js<\/code><\/pre>\n
'use strict';\n\n\/**\n * @ngdoc function\n * @name sampleApp.controller:MainCtrl\n * @description\n * # MainCtrl\n * Controller of the sampleApp\n *\/\nangular.module('sampleApp')\n  .controller('MainCtrl', function ($scope) {\n    $scope.map = {\n        center: {\n            latitude: 35.681382,\n            longitude: 139.766084\n        },\n        zoom: 14\n    };\n  });<\/code><\/pre>\n
\u5fc5\u8981\u304c\u3042\u308c\u3070\u3001\u4ed6\u306b\u3082\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u6307\u5b9a\u3067\u304d\u308b\u306e\u3067\u3001\u3053\u3061\u3089\u306e API documentation<\/a> \u3092\u53c2\u8003\u306b\u8a2d\u5b9a\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002
\u4f8b\u3048\u3070\u5730\u56f3\u4e0a\u306b\u30d4\u30f3\u3092\u7acb\u3066\u305f\u3044\u3068\u304d\u306b\u306f\u3001marker \u306e\u8a2d\u5b9a\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n
html \u306b google-map \u306e\u8981\u7d20\u3092\u8a18\u8f09\u3059\u308b<\/h4>\n
$ vi app\/views\/main.html<\/code><\/pre>\n
<google-map center="map.center" zoom="map.zoom"><\/google-map><\/code><\/pre>\n
css \u306b\u8a2d\u5b9a\u3092\u8ffd\u8a18<\/h4>\n
css \u306b\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
$ vi app\/styles\/main.css<\/code><\/pre>\n
.angular-google-map-container { height: 400px; }<\/code><\/pre>\n
\u7d50\u679c\u3002\u3069\u30fc\u3093\u3002\u6771\u4eac\u99c5\u3067\u3059\u3002\u306a\u3093\u3068\u306a\u304f\u3002
\"gmap\"<\/p>\n
\n
\u30ab\u30b9\u30bf\u30e0\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u4f7f\u3063\u3066\u3001ng-repeat \u306e\u30eb\u30fc\u30d7\u5185\u3067\u6307\u5b9a\u3057\u305f\u6570\u3054\u3068\u306b div \u3067\u56f2\u307f\u305f\u3044<\/h3>\n
ng-repeat \u3092\u4f7f\u3063\u3066\u30eb\u30fc\u30d7\u3059\u308b\u3068\u3001<\/p>\n
<ul>\n  <li ng-repeat="item in ['\u3042\u3044\u3046\u3048\u304a', '\u304b\u304d\u304f\u3051\u3053', '\u3055\u3057\u3059\u305b\u305d', '\u305f\u3061\u3064\u3066\u3068']">\uff5b\uff5b item \uff5d\uff5d<\/li>\n<\/ul><\/code><\/pre>\n
{% raw %}<\/p>\n
* \u30d6\u30ed\u30b0\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u3001{{}} \u304c\u5909\u6570\u3068\u89e3\u91c8\u3055\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3001{{}} \u3092\u5168\u89d2\u3067\u8868\u8a18\u3057\u3066\u3044\u307e\u3059\u3002<\/em><\/h6>\n
{% endraw %}<\/p>\n
\u901a\u5e38\u306f\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
<ul>\n  <li>\u3042\u3044\u3046\u3048\u304a<\/li>\n  <li>\u304b\u304d\u304f\u3051\u3053<\/li>\n  <li>\u3055\u3057\u3059\u305b\u305d<\/li>\n  <li>\u305f\u3061\u3064\u3066\u3068<\/li>\n<ul><\/code><\/pre>\n
\u3053\u308c\u3092\u3001\u4f8b\u3048\u3070\u3053\u3046\u3044\u3046\u98a8\u306b\u3057\u305f\u3044\u5834\u5408\u3067\u3059\u3002<\/p>\n
<ul>\n  <li>\n    <div>\n      \u3042\u3044\u3046\u3048\u304a\n      \u304b\u304d\u304f\u3051\u3053\n    <\/div>\n  <\/li>\n  <li>\n    <div>\n      \u3055\u3057\u3059\u305b\u305d\n      \u305f\u3061\u3064\u3066\u3068\n    <\/div>\n  <\/li>\n<ul><\/code><\/pre>\n
\u3010\u53c2\u8003URL\u3011how to split the ng-repeat data with three columns using bootstrap<\/a><\/p>\n
\u4e0a\u8a18\u306eURL\u3092\u53c2\u8003\u306b\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
\u30d5\u30a3\u30eb\u30bf\u30fc\u4f5c\u6210<\/h4>\n
Yeoman\u3092\u4f7f\u3044\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u4f5c\u6210\u3002<\/p>\n
$ yo angular:filter partition<\/code><\/pre>\n
\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u7de8\u96c6<\/h4>\n
\u3010\u53c2\u8003URL\u3011\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u3092 partition.js \u306b\u66f8\u304d\u307e\u3059\u3002<\/p>\n
$ vi app\/scripts\/filters\/partition.js<\/code><\/pre>\n
'use strict';\n\n\/**\n * @ngdoc filter\n * @name sampleApp.filter:partition\n * @function\n * @description\n * # partition\n * Filter in the sampleApp.\n *\/\nangular.module('sampleApp')\n  .filter('partition', function() {\n    var cache = {};\n    var filter = function(arr, size) {\n      if (!arr) { return; }\n      var newArr = [];\n      for (var i=0; i<arr.length; i+=size) {\n        newArr.push(arr.slice(i, i+size));\n      }\n      var arrString = JSON.stringify(arr);\n      var fromCache = cache[arrString+size];\n      if (JSON.stringify(fromCache) === JSON.stringify(newArr)) {\n        return fromCache;\n      }\n      cache[arrString+size] = newArr;\n      return newArr;\n    };\n    return filter;\n  });<\/code><\/pre>\n
\u51e6\u7406\u306e\u5185\u5bb9\u3068\u3057\u3066\u306f\u3001\u6e21\u3057\u305f\u914d\u5217\u304b\u3089\u6307\u5b9a\u3057\u305f\u8981\u7d20\u6570\u3067\u914d\u5217\u306b\u307e\u3068\u3081\u306a\u304a\u3057\u3066\u4f5c\u6210\u3057\u3066\u304f\u308c\u308b\u3082\u306e\u3067\u3059\u3002<\/p>\n
html \u7de8\u96c6<\/h4>\n
\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f partition \u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u307e\u3068\u3081\u305f\u3044\u8981\u7d20\u6570\u3092\u5f15\u6570\u306b\u3057\u3066\u30d5\u30a3\u30eb\u30bf\u30fc\u306e\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
li \u306e\u4e2d\u306b\u30012\u3064\u305a\u3064\u5165\u308c\u305f\u3044\u306e\u3067\u3053\u3053\u3067\u306f\u30012 \u3092\u8a2d\u5b9a\u3002<\/p>\n
  <ul>\n    <li ng-repeat="rows in ['\u3042\u3044\u3046\u3048\u304a', '\u304b\u304d\u304f\u3051\u3053', '\u3055\u3057\u3059\u305b\u305d', '\u305f\u3061\u3064\u3066\u3068']| partition:2">\n      <div ng-repeat="item in rows">\uff5b\uff5b item \uff5d\uff5d<\/div>\n    <\/li>\n  <\/ul><\/code><\/pre>\n
{% raw %}<\/p>\n
* \u30d6\u30ed\u30b0\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u3001{{}} \u304c\u5909\u6570\u3068\u89e3\u91c8\u3055\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3001{{}} \u3092\u5168\u89d2\u3067\u8868\u8a18\u3057\u3066\u3044\u307e\u3059\u3002<\/em><\/h6>\n
{% endraw %}<\/p>\n
\u7d50\u679c\u3002<\/p>\n
\"li\"<\/p>\n
\n
\u30e2\u30fc\u30c0\u30eb\u3092\u4f7f\u3044\u305f\u3044<\/h3>\n
\u30e2\u30fc\u30c0\u30eb\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u3001ui.bootstrap \u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n
ui.bootstrap \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n
\u307e\u305a\u306f bower \u3092\u4f7f\u3063\u3066\u3001ui.bootstrap \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n
$ bower install angular-bootstrap --save<\/code><\/pre>\n
app.js \u306b\u3001ui.bootstrap \u8ffd\u52a0<\/h4>\n
app.js \u306b ui.bootstrap \u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
$ vi app\/scripts\/app.js<\/code><\/pre>\n
'use strict';\n\n\/**\n * @ngdoc overview\n * @name sampleApp\n * @description\n * # sampleApp\n *\n * Main module of the application.\n *\/\nangular\n  .module('sampleApp', [\n    'ngAnimate',\n    'ngCookies',\n    'ngResource',\n    'ngRoute',\n    'ngSanitize',\n    'ngTouch',\n    'ui.bootstrap' \/\/\u3053\u3053\u306b\u8ffd\u52a0\n  ])\n  .config(function ($routeProvider) {\n    $routeProvider\n      .when('\/', {\n        templateUrl: 'views\/main.html',\n        controller: 'MainCtrl'\n      })\n      .when('\/about', {\n        templateUrl: 'views\/about.html',\n        controller: 'AboutCtrl'\n      })\n      .otherwise({\n        redirectTo: '\/'\n      });\n  });<\/code><\/pre>\n
\u30e2\u30fc\u30c0\u30eb\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u7ba1\u7406\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u4f5c\u6210<\/h4>\n
\u30e2\u30fc\u30c0\u30eb\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
$ yo angular:controller my_modal<\/code><\/pre>\n
\u30e2\u30fc\u30c0\u30eb\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u7ba1\u7406\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc \u7de8\u96c6<\/h4>\n
\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u30e2\u30fc\u30c0\u30eb\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n
$ vi app\/scripts\/controllers\/my_modal.js<\/code><\/pre>\n
'use strict';\n\n\/**\n * @ngdoc function\n * @name sampleApp.controller:MyModalCtrl\n * @description\n * # MyModalCtrl\n * Controller of the sampleApp\n *\/\nangular.module('sampleApp')\n  .controller('MyModalCtrl', function ($scope, $modalInstance, items) {\n\n    $scope.items = items;\n    $scope.selected = {\n      item: $scope.items[0]\n    };\n\n    $scope.ok = function () {\n      $modalInstance.close($scope.selected.item);\n    };\n\n    $scope.cancel = function () {\n      $modalInstance.dismiss('cancel');\n    };\n\n  });<\/code><\/pre>\n
$modalInstance \u3068 \u547c\u3073\u51fa\u3057\u5143\u304b\u3089\u6e21\u3063\u3066\u304f\u308b items \u3092\u5f15\u6570\u306b\u6301\u3063\u3066\u3044\u308b\u306e\u306b\u6ce8\u610f\u3057\u3066\u4e0b\u3055\u3044\u3002
OK \u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3068\u304d\u306e\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u3068\u3001\u30ad\u30e3\u30f3\u30bb\u30eb\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3068\u304d\u306e\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002
OK \u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3068\u304d\u306b\u306f\u3001\u9078\u629e\u3055\u308c\u3066\u3044\u308b item \u3092\u547c\u3073\u51fa\u3057\u5143\u3078\u5f15\u304d\u6e21\u3057\u307e\u3059\u3002  <\/p>\n
\u30e2\u30fc\u30c0\u30eb\u7528\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u4f5c\u6210<\/h4>\n
\u30e2\u30fc\u30c0\u30eb\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u3092\u4f5c\u6210\u3002<\/p>\n
$ yo angular:view my_modal<\/code><\/pre>\n
\u30e2\u30fc\u30c0\u30eb\u7528\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u7de8\u96c6<\/h4>\n
\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u3092\u7de8\u96c6\u3002<\/p>\n
$ vi app\/views\/my_modal.html<\/code><\/pre>\n
<div class="modal-header">\n    <h3 class="modal-title">\u30e2\u30fc\u30c0\u30eb\u30bf\u30a4\u30c8\u30eb<\/h3>\n<\/div>\n<div class="modal-body">\n    <ul>\n        <li ng-repeat="item in items">\n            <a ng-click="selected.item = item">\uff5b\uff5b item \uff5d\uff5d<\/a>\n        <\/li>\n    <\/ul>\n    \u9078\u629e\u4e2d: <b>\uff5b\uff5b selected.item \uff5d\uff5d<\/b>\n<\/div>\n<div class="modal-footer">\n    <button class="btn btn-primary" ng-click="ok()">OK<\/button>\n    <button class="btn btn-warning" ng-click="cancel()">Cancel<\/button>\n<\/div><\/code><\/pre>\n
{% raw %}<\/p>\n
* \u30d6\u30ed\u30b0\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u3001{{}} \u304c\u5909\u6570\u3068\u89e3\u91c8\u3055\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3001{{}} \u3092\u5168\u89d2\u3067\u8868\u8a18\u3057\u3066\u3044\u307e\u3059\u3002<\/em><\/h6>\n
{% endraw %}<\/p>\n
\u30e2\u30fc\u30c0\u30eb\u306e\u547c\u3073\u51fa\u3057\u5143\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u7de8\u96c6<\/h4>\n
$ vi app\/scripts\/controllers\/main.js<\/code><\/pre>\n
'use strict';\n\n\/**\n * @ngdoc function\n * @name sampleApp.controller:MainCtrl\n * @description\n * # MainCtrl\n * Controller of the sampleApp\n *\/\nangular.module('sampleApp')\n  .controller('MainCtrl', function ($scope, $modal, $log) {\n    $scope.items = ['111111', '222222', '333333'];\n\n    $scope.open = function (size) {\n\n      var modalInstance = $modal.open({\n        templateUrl: 'views\/my_modal.html',\n        controller: 'MyModalCtrl',\n        size: size,\n        resolve: {\n          items: function () {\n            return $scope.items;\n          }\n        }\n      });\n\n      modalInstance.result.then(function (selectedItem) {\n        $scope.selected = selectedItem;\n      }, function () {\n        $log.info('Modal dismissed at: ' + new Date());\n      });\n    };\n  });<\/code><\/pre>\n
$modal \u3092\u5f15\u6570\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u306b\u6ce8\u610f\u3067\u3059\u3002
\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u3001\u30e2\u30fc\u30c0\u30eb\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u7ba1\u7406\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc (MyModalCtrl) \u3068\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html (views\/my_modal.html) \u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\u3053\u3053\u3067\u3001\u6ce8\u610f\u3002
UI Bootstrap \u306e\u516c\u5f0f\u30da\u30fc\u30b8\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a> \u3067\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u540d\u306b\u3001\u30b7\u30f3\u30b0\u30eb\u30af\u30a9\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u304c\u5165\u3063\u3066\u3044\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u305d\u308c\u306b\u306a\u3089\u3063\u3066\u540c\u3058\u3088\u3046\u306b\u66f8\u3044\u3066\u3057\u307e\u3046\u3068\u3001\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\u3002
ui bootstrap modal's controller 'is not defined'<\/a>
\u3053\u306e\u89e3\u6c7a\u7b56\u3092\u53c2\u8003\u306b\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u540d\u306f\u30b7\u30f3\u30b0\u30eb\u30af\u30a9\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3067\u56f2\u3093\u3060\u3089\u884c\u3051\u307e\u3057\u305f\u3002  <\/p>\n
\u30e2\u30fc\u30c0\u30eb\u306e\u547c\u3073\u51fa\u3057\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u7de8\u96c6<\/h4>\n
\u30e2\u30fc\u30c0\u30eb\u306e\u547c\u3073\u51fa\u3057\u5143\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 html \u3092\u7de8\u96c6\u3057\u307e\u3059\u3002
\u5148\u307b\u3069\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u5b9a\u7fa9\u3057\u305f\u3001open() \u306b\u3001\u5f15\u6570\u3067\u30b5\u30a4\u30ba\uff08lg \u3068 sm\uff09\u3092\u6e21\u3059\u3053\u3068\u3067\u63cf\u753b\u3059\u308b\u30e2\u30fc\u30c0\u30eb\u306e\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002  <\/p>\n
$ vi app\/views\/main.html<\/code><\/pre>\n
<button class="btn btn-default" ng-click="open()">\u901a\u5e38<\/button>\n<button class="btn btn-default" ng-click="open('lg')">\u5927\u304d\u3081<\/button>\n<button class="btn btn-default" ng-click="open('sm')">\u5c0f\u3055\u3081<\/button>\n<div ng-show="selected">\u30e2\u30fc\u30c0\u30eb\u3067\u9078\u629e\u3055\u308c\u305f\u9078\u629e\u80a2: \uff5b\uff5b selected \uff5d\uff5d<\/div><\/code><\/pre>\n
{% raw %}<\/p>\n
* \u30d6\u30ed\u30b0\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u3001{{}} \u304c\u5909\u6570\u3068\u89e3\u91c8\u3055\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3001{{}} \u3092\u5168\u89d2\u3067\u8868\u8a18\u3057\u3066\u3044\u307e\u3059\u3002<\/em><\/h6>\n
{% endraw %}<\/p>\n
\u7d50\u679c\u3002  <\/p>\n