{"id":39503,"date":"2022-11-27T00:29:22","date_gmt":"2023-07-14T20:29:44","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/angularjs%e4%bd%bf%e7%94%a8%e7%ac%94%e8%ae%b0\/"},"modified":"2024-04-29T02:37:39","modified_gmt":"2024-04-28T18:37:39","slug":"angularjs%e4%bd%bf%e7%94%a8%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/angularjs%e4%bd%bf%e7%94%a8%e7%ac%94%e8%ae%b0\/","title":{"rendered":"AngularJS\u4f7f\u7528\u7b14\u8bb0"},"content":{"rendered":"

\u5728\u9605\u8bfb\u300aAngularJS\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u6307\u5357\u300b\u65f6\u6240\u505a\u7684\u7b14\u8bb0\u3002<\/p>\n

\u4f60\u597d\u4e16\u754c<\/h1>\n

\u83b7\u53d6AngularJS<\/h2>\n

\u4ece\u5b98\u65b9\u7f51\u7ad9\u4e0b\u8f7d angular.min.js\u3002<\/p>\n

\u5199 HTML<\/h2>\n
<html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"helloWorld.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <h1<\/span> ng-controller=<\/span>\"HelloWorldController\"<\/span>><\/span>{{message}}<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
angular.min.js \u3092\u8aad\u307f\u8fbc\u3080\u3002<\/p>\n
ng-app \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4ed8\u3051\u305f\u30bf\u30b0\u306e\u4e2d\u304c\u3001 AngularJS \u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u3057\u3066\u51e6\u7406\u3055\u308c\u308b\u3002<\/p>\n
ng-controller \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4ed8\u3051\u305f\u30bf\u30b0\u306e\u4e2d\u304c\u3001\u6307\u5b9a\u3057\u305f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3068\u7d10\u4ed8\u3051\u3089\u308c\u308b\u3002<\/p>\n
{{}} \u3068\u3044\u3046\u8a18\u6cd5\u3067\u6587\u5b57\u5217\u3092\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n
\u5199JavaScript<\/h2>\n
function<\/span> HelloWorldController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>Hello World!!<\/span>'<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
ng-controller \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3067\u6307\u5b9a\u3057\u305f\u306e\u3068\u540c\u3058\u540d\u524d\u306e\u95a2\u6570\u3092\u5b9a\u7fa9\u3059\u308b\u3002
\n\u5f15\u6570\u306e $scope \u3092\u4ecb\u3057\u3066\u3001\u753b\u9762\u306b\u30c7\u30fc\u30bf\uff08\u30e2\u30c7\u30eb\uff09\u3092\u516c\u958b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n
\u7528\u6d4f\u89c8\u5668\u67e5\u770b<\/h2>\n
\"anglarjs_helloworld.jpg\"<\/div>\n
\u663e\u793a\u6587\u672c<\/h1>\n
<html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <div<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n            <p><\/span>{{simple}}<\/p><\/span>\r\n            <p<\/span> ng-bind=<\/span>\"directive\"<\/span>><\/p><\/span>\r\n        <\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>simple<\/span> =<\/span> '<\/span>\u7c21\u6613\u8a18\u6cd5\u3092\u4f7f\u3063\u305f\u65b9\u6cd5<\/span>'<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>directive<\/span> =<\/span> '<\/span>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4f7f\u3063\u305f\u65b9\u6cd5<\/span>'<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8868\u793a\u7ed3\u679c – .
\n\u8bf4\u660e\u7ed3\u679c – .
\n\u9610\u660e\u7ed3\u679c – .
\n\u5c55\u793a\u7ed3\u679c – .
\n\u8868\u793a\u6210\u679c – .<\/p>\n
\"1.JPG\"<\/div>\n
\u4f7f\u7528\u4e24\u79cd\u8868\u793a\u65b9\u6cd5\u7684\u533a\u522b\u3002<\/h2>\n
\u6216<\/p>\n
\u533a\u5206\u4f7f\u7528\u4e24\u79cd\u8868\u793a\u65b9\u6cd5\u3002<\/p>\n
\u5728\u4f7f\u7528{{}}\u8fd9\u79cd\u8bed\u6cd5\u65f6\uff0c\u6709\u53ef\u80fd\u5728\u5c4f\u5e55\u521d\u59cb\u663e\u793a\u65f6\u77ac\u95f4\u663e\u793a\u51fa{{}}\u7684\u72b6\u6001\u3002\u7136\u800c\uff0c\u5982\u679c\u4f7f\u7528ng-bind\uff0c\u5219\u4e0d\u4f1a\u53d1\u751f\u8fd9\u6837\u7684\u60c5\u51b5\u3002<\/p>\n
\u6240\u4ee5\uff0c\u5728\u521d\u59cb\u9875\u9762\u6a21\u677f\u4e2d\u4f7f\u7528 ng-bind\uff0c\u800c\u5728\u540e\u7eed\u7684\u6a21\u677f\u4e2d\u4f7f\u7528 {{}} \u53ef\u4e3a\u4f73\u3002<\/p>\n
\u586b\u5199\u8868\u683c<\/h1>\n
<html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <form<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n            <input<\/span> type=<\/span>\"text\"<\/span> ng-model=<\/span>\"text\"<\/span> \/><\/span>\r\n\r\n            <input<\/span> type=<\/span>\"checkbox\"<\/span> ng-model=<\/span>\"checkbox\"<\/span> \/><\/span>\r\n\r\n            <input<\/span> type=<\/span>\"radio\"<\/span> name=<\/span>\"hoge\"<\/span> value=<\/span>\"HOGE\"<\/span> ng-model=<\/span>\"radio\"<\/span> \/><\/span>HOGE\r\n            <input<\/span> type=<\/span>\"radio\"<\/span> name=<\/span>\"hoge\"<\/span> value=<\/span>\"FUGA\"<\/span> ng-model=<\/span>\"radio\"<\/span> \/><\/span>FUGA\r\n\r\n            <select<\/span> ng-model=<\/span>\"select\"<\/span>><\/span>\r\n                <option<\/span> value=<\/span>\"foo\"<\/span>><\/span>Foo<\/option><\/span>\r\n                <option<\/span> value=<\/span>\"bar\"<\/span>><\/span>Bar<\/option><\/span>\r\n            <\/select><\/span>\r\n        <\/form><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>text<\/span> =<\/span> '<\/span>TextBox<\/span>'<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>checkbox<\/span> =<\/span> true<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>radio<\/span> =<\/span> '<\/span>FUGA<\/span>'<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>select<\/span> =<\/span> '<\/span>foo<\/span>'<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6267\u884c\u7ed3\u679c (sh\u00ed ji\u00e9 gu\u01d2)<\/p>\n
\"2.JPG\"<\/div>\n
ng-model \u3067\u5165\u529b\u9805\u76ee\u3068\u30e2\u30c7\u30eb\uff08$scope\uff09\u3092\u7d10\u4ed8\u3051\u3067\u304d\u308b\u3002<\/p>\n
\u4e8b\u4ef6\u5904\u7406<\/h1>\n
<html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <div<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n            <button<\/span> ng-click=<\/span>\"click()\"<\/span>><\/span>Button<\/button><\/span>\r\n            <p><\/span>{{message}}<\/p><\/span>\r\n        <\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>click<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n        $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>click button!<\/span>'<\/span>;<\/span>\r\n    };<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6267\u884c\u7ed3\u679c<\/p>\n
\"3.JPG\"<\/div>\n
\u70b9\u51fb\u4e0b\u65b9\u7684\u6309\u94ae<\/p>\n
\"4.JPG\"<\/div>\n
\u5173\u4e8e\u7f16\u5199\u8c03\u7528HTML\u51fd\u6570\u7684\u65b9\u9762<\/h2>\n
\u8fd9\u662f\u5bf9\u300aAngularJS\u5e94\u7528\u5f00\u53d1\u6307\u5357\u300b\u4e2d\u6240\u8ff0\u63cf\u8ff0\u7684\u6982\u62ec?<\/p>\n
\u5728\u8fd9\u672c\u4e66\u4e2d\uff0c\u5927\u6982\u662f\u4e3b\u5f20\u5982\u679c\u4f7f\u7528AngularJS\uff0c\u5199\u4e00\u4e2a\u5c06\u51fd\u6570\u8c03\u7528\u5230HTML\u7684\u98ce\u683c\uff08\u58f0\u660e\u6027\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff09\u66f4\u597d\uff01<\/p>\n
\u8fc4\u4eca\u4e3a\u6b62\u7684\u5e38\u8bc6\u662f\u201c\u4e0d\u5f15\u4eba\u6ce8\u610f\u7684JavaScript\u201d\u3002<\/h3>\n
\u8c26\u548c\u7684 JavaScript\u3002<\/p>\n
\u603b\u4e4b\uff0c\u5c31\u662f\u8981\u5c06\u201c\u6587\u6863\u7ed3\u6784\u653e\u5728HTML\u4e2d\uff0c\u5c06\u5904\u7406\u903b\u8f91\u653e\u5728JavaScript\u4e2d\u4e25\u683c\u5206\u79bb\u8d77\u6765\u3002\u4e0d\u8981\u5728HTML\u4e2d\u5199\u5165onclick\u4e4b\u7c7b\u7684\u5185\u5bb9\u201d\u8fd9\u79cd\u89c2\u5ff5\u3002<\/p>\n
JavaScript\u4e0d\u662f\u8c26\u865a\u7684\u3002<\/h4>\n
<html><\/span>\r\n    <head><\/span>\r\n        <title><\/span>\u63a7\u3048\u3081\u3058\u3083\u306a\u3044JavaScript<\/title><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <button<\/span> onclick=<\/span>\"hoge()\"<\/span>><\/span>Button<\/button><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
function<\/span> hoge<\/span>()<\/span> {<\/span>\r\n    alert<\/span>(<\/span>'<\/span>click!!<\/span>'<\/span>);<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8c26\u865a\u7684 JavaScript<\/h4>\n
<html><\/span>\r\n    <head><\/span>\r\n        <title><\/span>\u63a7\u3048\u3081\u306a JavaScript<\/title><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <button<\/span> id=<\/span>\"button\"<\/span>><\/span>Button<\/button><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
window<\/span>.<\/span>onload<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n    document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>button<\/span>'<\/span>).<\/span>onclick<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n        alert<\/span>(<\/span>'<\/span>aaa!!<\/span>'<\/span>);<\/span>\r\n    };<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
\u9996\u5148\uff0c\u4e3a\u4ec0\u4e48\u201c\u4e0d\u663e\u773c\u7684JavaScript\u201d\u662f\u597d\u7684\u5462\uff1f<\/h3>\n
\u89e3\u91ca\u6709\u5f88\u591a\u79cd\uff0c\u4f46\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u4ee5\u4e0b\u89c2\u70b9\u662f\u5171\u901a\u7684\u3002<\/p>\n
    \n
  1. \n
      \u65e2\u7136\u6709\u4e9b\u6d4f\u89c8\u5668\u4e0d\u652f\u6301JavaScript\uff0c\u90a3\u4e48\u5728HTML\u4e2d\u5199JavaScript\u4ee3\u7801\u662f\u4e0d\u597d\u7684\uff01\u4e00\u4e9b\u7528\u6237\u4f9d\u8d56JavaScript\u7684\u9875\u9762\u53ef\u80fd\u5b58\u5728\u95ee\u9898\uff01\uff08\u89c6\u969c\u4eba\u58eb\u4f7f\u7528\u5c4f\u5e55\u9605\u8bfb\u5668\uff0c\u8fd8\u6709\u4f7f\u7528\u4e0d\u652f\u6301JavaScript\u7684\u624b\u673a\u8bbf\u95ee\u7f51\u9875\u7684\u4eba\uff09<\/ol>\n<\/li>\n<\/ol>\n
       <\/p>\n
        \n
      1. \n
          \u8c03\u7528\u4e8b\u4ef6\u5904\u7406\u7684\u65b9\u6cd5\u56e0\u6d4f\u89c8\u5668\u800c\u5f02\uff0c\u56e0\u6b64\u5b58\u5728\u98ce\u9669\uff01<\/ol>\n<\/li>\n<\/ol>\n
           <\/p>\n
            \n
          1. \n
              \u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5fc5\u987b\u5728\u5168\u5c40\u8303\u56f4\u5185\u58f0\u660e\uff0c\u8fd9\u6837\u4e0d\u597d\uff01<\/ol>\n<\/li>\n<\/ol>\n
               <\/p>\n
                \u5982\u679c\u6df7\u5408\u6587\u6863\u7ed3\u6784\u548c\u884c\u4e3a\uff0c\u5c06\u4f1a\u4ea7\u751f\u96be\u4ee5\u9605\u8bfb\u548c\u7ef4\u62a4\u7684\u4ee3\u7801\uff01<\/ol>\n
                \u5206\u79bb\u4e8b\u4ef6\u5904\u7406\u5668\u7684\u58f0\u660e\u771f\u7684\u662f\u4e00\u4ef6\u597d\u4e8b\u5417\uff1f<\/h3>\n
                  \n
                • \n
                    \u524d\u8ff0\u306e\u8003\u3048\u65b9\u3092\u8e0f\u307e\u3048\u305f\u4e0a\u3067 JavaScript \u3092\u5b9f\u88c5\u3059\u308c\u3070\u3001\u307b\u3068\u3093\u3069\u306e\u5834\u5408\u306f\u826f\u3044\u7d50\u679c\u306b\u3064\u306a\u304c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                     <\/p>\n
                      \n
                    • \n
                        \u3057\u304b\u3057\u3001\u5b9f\u969b\u306f\u30b3\u30fc\u30c9\u306e\u8907\u96d1\u3055\u3092\u60aa\u5316\u3055\u305b\u308b\u8981\u56e0\u306b\u3082\u306a\u3063\u3066\u3044\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                         <\/p>\n
                          \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306e\u767b\u9332\u51e6\u7406\u304c\u30b3\u30fc\u30c9\u306e\u3042\u3061\u3053\u3061\u306b\u6563\u5728\u3057\u3066\u3057\u307e\u3046\u3053\u3068\u3067\u3001\u30b3\u30fc\u30c9\u304c\u8907\u96d1\u306b\u306a\u3063\u3066\u3044\u308b\u3002<\/ul>\n
                          \u4ece\u73b0\u5728\u8d77\uff0c\u52302021\u5e74\uff0c\u8fd9\u4e2a\u201c\u7406\u7531\u201d\u4f9d\u7136\u9002\u7528\u5417\uff1f<\/h3>\n
                          \u65e2\u7136\u6709\u4e9b\u6d4f\u89c8\u5668\u4e0d\u652f\u6301JavaScript\uff0c\u90a3\u4e48\u5728HTML\u4e2d\u5199JavaScript\u4ee3\u7801\u662f\u4e0d\u5141\u8bb8\u7684\uff01<\/h4>\n
                            \n
                          • \n
                              \u300c\u3048\u30fc\u30de\u30b8 JavaScript \u975e\u30b5\u30dd\u30fc\u30c8\uff01\uff1f\u300d<\/ul>\n<\/li>\n<\/ul>\n
                               <\/p>\n
                                \n
                              • \n
                                  \u300c\u30ad\u30e2\u30fc\u30a4\u300d<\/ul>\n<\/li>\n<\/ul>\n
                                   <\/p>\n
                                    \n
                                  • \n
                                      \u300cJavaScript \u975e\u30b5\u30dd\u30fc\u30c8\u304c\u8a31\u3055\u308c\u308b\u306e\u306f\u6c5f\u6238\u6642\u4ee3\u307e\u3067\u3060\u3088\u306d\u30fc\u300d<\/ul>\n<\/li>\n<\/ul>\n
                                       <\/p>\n
                                        \u300c\u30ad\u30e3\u30cf\u30cf\u30cf\u300d<\/ul>\n
                                        \u5728\u5f53\u4eca\u65f6\u4ee3\uff0c\u7531\u4e8e\u51e0\u4e4e\u5df2\u7ecf\u8fc7\u65f6\u4e86\uff0cJavaScript\u4e0d\u518d\u53d7\u652f\u6301\u7684\u8bf4\u6cd5\u51e0\u4e4e\u6210\u4e3a\u4e86\u8fc7\u53bb\u7684\u6545\u4e8b\uff0c\u56e0\u6b64\u4e0d\u518d\u9002\u7528\u3002<\/p>\n
                                        \u6709\u4e9b\u7528\u6237\u53ef\u80fd\u4f1a\u5bf9\u4f9d\u8d56JavaScript\u7684\u9875\u9762\u6709\u4e0d\u597d\u7684\u611f\u89c9\uff01<\/h4>\n
                                          \n
                                        • \n
                                            \u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306e\u9032\u6b69\u306b\u3088\u3063\u3066\u3001\u3053\u306e\u8a71\u3082\u904e\u53bb\u306e\u3082\u306e\u306b\u306a\u3063\u3066\u3044\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                             <\/p>\n
                                              \u643a\u5e2f\u96fb\u8a71\u3082\u9032\u5316\u3057\u305f\u3082\u306e\u3067\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30de\u30b7\u30f3\u3068\u540c\u69d8\u306b JavaScript \u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306a\u3063\u3066\u3044\u308b\u3002<\/ul>\n
                                              \u6362\u53e5\u8bdd\u8bf4\uff0c\u8fd9\u4e5f\u662f\u5728\u8bf4\u8fd9\u4e2a\u6545\u4e8b\u5df2\u7ecf\u6210\u4e3a\u4e86\u8fc7\u53bb\u7684\u4e8b\u60c5\u3002<\/p>\n
                                              \u6bcf\u4e2a\u6d4f\u89c8\u5668\u7684\u4e8b\u4ef6\u5904\u7406\u8c03\u7528\u65b9\u6cd5\u90fd\u4e0d\u540c\uff0c\u6240\u4ee5\u5f88\u5371\u9669\uff01<\/h4>\n
                                                \n
                                              • \n
                                                  AngularJS \u3092\u4f7f\u3063\u3066\u3044\u308b\u306a\u3089\u3001\u3053\u308c\u306f\u5f53\u3066\u306f\u307e\u3089\u306a\u3044\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                   <\/p>\n
                                                    \n
                                                  • \n
                                                      \u306a\u305c\u306a\u3089\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u5dee\u306f AngularJS \u304c\u5438\u53ce\u3057\u3066\u304f\u308c\u308b\u304b\u3089\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                       <\/p>\n
                                                        \u30a4\u30d9\u30f3\u30c8\u306e\u8868\u8a18\u306f ng-<\u30a4\u30d9\u30f3\u30c8\u540d> \u3067\u30d6\u30e9\u30a6\u30b6\u306b\u95a2\u4fc2\u306a\u304f\u5171\u901a\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u554f\u984c\u306f\u767a\u751f\u3057\u306a\u3044\u3002<\/ul>\n
                                                        \u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5fc5\u987b\u5728\u5168\u5c40\u8303\u56f4\u5185\u58f0\u660e\uff0c\u8fd9\u6837\u4e0d\u592a\u597d\uff01<\/h4>\n
                                                          \n
                                                        • \n
                                                            \u3053\u308c\u3082\u3001 AngularJS \u3092\u4f7f\u3063\u3066\u3044\u308b\u9650\u308a\u95a2\u4fc2\u7121\u3044\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                             <\/p>\n
                                                              \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306f\u3001\u5fc5\u305a\u4f55\u304b\u3057\u3089\u306e\u30b9\u30b3\u30fc\u30d7\u5909\u6570\u306e\u4e2d\u3067\u5ba3\u8a00\u3055\u308c\u308b\u304b\u3089\u3002<\/ul>\n
                                                              \u6df7\u5408\u6587\u6863\u7ed3\u6784\u548c\u884c\u4e3a\u4f1a\u5bfc\u81f4\u4ee3\u7801\u96be\u4ee5\u9605\u8bfb\u548c\u7ef4\u62a4\uff01<\/h4>\n
                                                                \n
                                                              • \n
                                                                  \u69cb\u9020\u3068\u632f\u308b\u821e\u3044\u304c\u6df7\u5728\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u306f\u3001\u300c\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u3092\u3001 DOM \u3092\u4e00\u5207\u4f7f\u308f\u305a\u306b\u66f8\u3051\u308b\u304b\uff1f\u300d\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u3067\u78ba\u304b\u3081\u3089\u308c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                   <\/p>\n
                                                                    \n
                                                                  • \n
                                                                      AngularJS \u3092\u4f7f\u3063\u3066\u3044\u308c\u3070\u3001\uff08\u5ba3\u8a00\u7684\u306a\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u4f7f\u3063\u3066\u3044\u308b\u9650\u308a\uff09 Contoller \u306f DOM \u306b\u4e00\u5207\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u306a\u304f\u753b\u9762\u306e\u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                       <\/p>\n
                                                                        \n
                                                                      • \n
                                                                          DOM \u3092\u4f7f\u308f\u305a\u306b\u30c6\u30b9\u30c8\u3092\u304b\u3051\u308b\u3068\u3001\u30c6\u30b9\u30c8\u304c\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u306b\u306a\u308b\u3088\uff01<\/ul>\n<\/li>\n<\/ul>\n
                                                                           <\/p>\n
                                                                            \u5ba3\u8a00\u7684\u306a\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306e\u65b9\u304c\u30b7\u30f3\u30d7\u30eb\u3067\u8aad\u307f\u3084\u3059\u3044\u3088\uff01<\/ul>\n
                                                                            \u6362\u53e5\u8bdd\u8bf4\uff0c\u5982\u679c\u4f60\u4f7f\u7528AngularJS\uff0c\u6700\u597d\u4f7f\u7528\u58f0\u660e\u6027\u4e8b\u4ef6\u5904\u7406\u5668\uff01<\/p>\n
                                                                            \u5faa\u73af\u5904\u7406<\/h1>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <ul<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n            <li<\/span> ng-repeat=<\/span>\"item in items\"<\/span>><\/span>{{item.key}} : {{item.value}}<\/li><\/span>\r\n        <\/ul><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>items<\/span> =<\/span> [<\/span>\r\n        {<\/span>key<\/span>:<\/span> '<\/span>hoge<\/span>'<\/span>,<\/span> value<\/span>:<\/span> '<\/span>HOGE<\/span>'<\/span>}<\/span>\r\n        ,{<\/span>key<\/span>:<\/span> '<\/span>fuga<\/span>'<\/span>,<\/span> value<\/span>:<\/span> '<\/span>FUGA<\/span>'<\/span>}<\/span>\r\n        ,{<\/span>key<\/span>:<\/span> '<\/span>piyo<\/span>'<\/span>,<\/span> value<\/span>:<\/span> '<\/span>PIYO<\/span>'<\/span>}<\/span>\r\n    ];<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                            \u56fe\u50cf\u663e\u793a<\/p>\n
                                                                            \"WS000002.JPG\"<\/div>\n
                                                                            ng-repeat \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u6307\u5b9a\u3057\u305f\u30bf\u30b0\u304c\u3001\u7e70\u308a\u8fd4\u3057\u51e6\u7406\u3055\u308c\u308b\u3002<\/p>\n
                                                                            \u83b7\u53d6\u5f53\u524d\u5faa\u73af\u7d22\u5f15<\/h2>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <ul<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n            <li<\/span> ng-repeat=<\/span>\"item in items\"<\/span>><\/span>{{$index}}<\/li><\/span>\r\n        <\/ul><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            \u8868\u793a\u7684\u753b\u9762<\/p>\n
                                                                            \"WS000000.JPG\"<\/div>\n
                                                                            $index \u3067\u73fe\u5728\u306e\u30eb\u30fc\u30d7\u56de\u6570\u304c\u53d6\u5f97\u3067\u304d\u308b\uff080 \u59cb\u307e\u308a\uff09<\/p>\n
                                                                            \u5207\u6362\u5c01\u9762\u548c\u9690\u85cf<\/h1>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <div<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n            <div<\/span> ng-show=<\/span>\"true\"<\/span>><\/span>\r\n                Visible\r\n            <\/div><\/span>\r\n            <div<\/span> ng-show=<\/span>\"false\"<\/span>><\/span>\r\n                Invisible\r\n            <\/div><\/span>\r\n        <\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            \u5c01\u9762\u753b\u9762<\/p>\n
                                                                            \"WS000001.JPG\"<\/div>\n
                                                                            ng-show \u306e\u5024\u304c true \u306e\u5834\u5408\u306f\u305d\u306e DOM \u304c\u8868\u793a\u3055\u308c\u3001 false \u306e\u5834\u5408\u306f\u975e\u8868\u793a\u306b\u306a\u308b\u3002<\/p>\n
                                                                            \u6307\u5b9aCSS\u7c7b<\/h1>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n        <style><\/span>\r\n            .red<\/span> {<\/span>\r\n                color<\/span>:<\/span> red<\/span>;<\/span>\r\n            }<\/span>\r\n\r\n            .blue<\/span> {<\/span>\r\n                color<\/span>:<\/span> blue<\/span>;<\/span>\r\n            }<\/span>\r\n\r\n            .solid-border<\/span> {<\/span>\r\n                border<\/span>:<\/span> 1px<\/span> solid<\/span> black<\/span>;<\/span>\r\n            }<\/span>\r\n\r\n            .dotted-border<\/span> {<\/span>\r\n                border<\/span>:<\/span> 1px<\/span> dotted<\/span> black<\/span>;<\/span>\r\n            }<\/span>\r\n\r\n            li<\/span> {<\/span>\r\n                margin-top<\/span>:<\/span> 10px<\/span>;<\/span>\r\n            }<\/span>\r\n        <\/style><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <ul><\/span>\r\n            <li<\/span> ng-class=<\/span>\"hoge\"<\/span>><\/span>hoge<\/li><\/span>\r\n            <li<\/span> ng-class=<\/span>\"['blue', 'solid-border']\"<\/span>><\/span>fuga<\/li><\/span>\r\n            <li<\/span> ng-class=<\/span>\"{'red': isRed, 'dotted-border': isDotted}\"<\/span>><\/span>piyo<\/li><\/span>\r\n        <\/ul><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>hoge<\/span> =<\/span> '<\/span>red solid-border<\/span>'<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>isRed<\/span> =<\/span> true<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>isDotted<\/span> =<\/span> true<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                            \u753b\u9762\u5c55\u793a<\/p>\n
                                                                            \"gomi.JPG\"<\/div>\n
                                                                            ng-class \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4f7f\u3046\u3002\u5024\u306b\u306f Angular \u5f0f\u3092\u6307\u5b9a\u3059\u308b\u3002
                                                                            \nAngular \u5f0f\u306e\u8a55\u4fa1\u7d50\u679c\u304c\u3001<\/p>\n
                                                                            \u300c\u6587\u5b57\u5217\u300d\u306e\u5834\u5408\u3001 CSS \u30af\u30e9\u30b9\u540d\u306e\u5217\u6319\uff08\u7a7a\u767d\u533a\u5207\u308a\uff09\u3068\u3057\u3066\u51e6\u7406\u3055\u308c\u308b\u3002
                                                                            \n\u300c\u914d\u5217\u300d\u306e\u5834\u5408\u3001 CSS \u30af\u30e9\u30b9\u540d\u306e\u914d\u5217\u3068\u3057\u3066\u51e6\u7406\u3055\u308c\u308b\u3002
                                                                            \n\u300c\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u300d\u306e\u5834\u5408\u3001\u5404\u30d7\u30ed\u30d1\u30c6\u30a3\u3092 CSS \u30af\u30e9\u30b9\u540d : \u6709\u52b9\u304b\u3069\u3046\u304b\u306e boolean \u3068\u5224\u65ad\u3057\u3001 true \u306e CSS \u30af\u30e9\u30b9\u3060\u3051\u304c\u9069\u7528\u3055\u308c\u308b\u3002<\/p>\n
                                                                            \u81ea\u5206\u304c\u8a66\u3057\u305f\u9650\u308a\u3067\u306f\u3001\u914d\u5217\u3084\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ad\u30fc\u306f\u300c\u6587\u5b57\u5217\u300d\u306b\u3057\u306a\u3044\u3068\u3046\u307e\u304f\u52d5\u4f5c\u3057\u306a\u304b\u3063\u305f\u3002<\/p>\n
                                                                            \u5728\u4e2d\u6587\u4e2d\uff0c\u5c06src\u5c5e\u6027\u548chref\u5c5e\u6027\u7ed1\u5b9a\u6570\u636e<\/h1>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <img<\/span> ng-src=<\/span>\".\/{{imageFileName}}\"<\/span> \/><\/span>\r\n        <a<\/span> ng-href=<\/span>\"{{url}}\"<\/span>><\/span>link<\/a><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>url<\/span> =<\/span> '<\/span>http:\/\/www.google.co.jp<\/span>'<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>imageFileName<\/span> =<\/span> '<\/span>hoge.png<\/span>'<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                            \u56fe\u50cf\u5448\u73b0<\/p>\n
                                                                            \"angularjs.JPG\"<\/div>\n
                                                                            src \u5c5e\u6027\u3084 href \u5c5e\u6027\u306b {{}} \u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u306f\u3001\u305d\u308c\u305e\u308c ng-src\u3001\u3068 ng-href \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4f7f\u3046\u3002
                                                                            \n\u306a\u305c\u306a\u3089\u3001 image \u30bf\u30b0\u306a\u3069\u306f\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308b\u3068\u540c\u6642\u306b\u3001 AngularJS \u306e\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u304c\u5b9f\u884c\u3055\u308c\u308b\u524d\u306b src \u5c5e\u6027\u306e URL \u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3057\u307e\u3046\u305f\u3081\u3002<\/p>\n
                                                                            \u5c06\u6a21\u578b\u7684\u66f4\u6539\u53cd\u6620\u5230\u89c6\u56fe\u4e2d<\/h1>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1><\/span>{{message}}<\/h1><\/span>\r\n\r\n        <button<\/span> ng-click=<\/span>\"change()\"<\/span>><\/span>change!!<\/button><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>hoge<\/span>'<\/span>\r\n\r\n    $scope<\/span>.<\/span>change<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n        $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>change!!<\/span>'<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                            \u753b\u9762\u8868\u8fbe<\/p>\n
                                                                            \"angularjs.JPG\"<\/div>\n
                                                                            \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae<\/p>\n
                                                                            \"angularjs.JPG\"<\/div>\n
                                                                            $scope \u3092\u901a\u3058\u3066\u30d3\u30e5\u30fc\u306b\u8868\u793a\u3057\u3066\u3044\u308b\u5834\u5408\u3001 JS \u5074\u3067\u305d\u306e\u5024\u304c\u5909\u308f\u308c\u3070\u3001\u81ea\u52d5\u7684\u306b\u5909\u66f4\u304c\u753b\u9762\u306b\u53cd\u6620\u3055\u308c\u308b\u3002<\/p>\n
                                                                            \u4f7f\u7528 $watch \u51fd\u6570\u6765\u76d1\u89c6\u53d8\u5316\u3002<\/h1>\n
                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        hoge : <input<\/span> type=<\/span>\"number\"<\/span> ng-model=<\/span>\"hoge\"<\/span> \/><br<\/span> \/><\/span>\r\n        fuga : <input<\/span> type=<\/span>\"number\"<\/span> ng-model=<\/span>\"fuga\"<\/span> \/><br<\/span> \/><\/span>\r\n        <p><\/span>\u5408\u8a08 : {{sum}}<\/p><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                            function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>hoge<\/span> =<\/span> 0<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>fuga<\/span> =<\/span> 0<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>sum<\/span> =<\/span> 0<\/span>;<\/span>\r\n\r\n    $scope<\/span>.<\/span>$watch<\/span>(<\/span>'<\/span>hoge + fuga<\/span>'<\/span>,<\/span> '<\/span>sum = hoge + fuga<\/span>'<\/span>);<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                            \u753b\u9762\u8868\u73b0<\/p>\n
                                                                            \"angularjs.JPG\"<\/div>\n
                                                                            \u8f93\u5165\u503c\u5230hoge\u3002<\/p>\n
                                                                            \"angularjs.JPG\"<\/div>\n
                                                                            \u8bf7\u5728fuga\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c\u3002<\/p>\n
                                                                            \"angularjs.JPG\"<\/div>\n
                                                                              \n
                                                                            • \n
                                                                                \u8907\u6570\u306e\u5024\u306e\u5909\u5316\u3092\u540c\u6642\u306b\u76e3\u8996\u3057\u305f\u3044\u5834\u5408\u306a\u3069\u306f\u3001 $watch \u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                 <\/p>\n
                                                                                  \n
                                                                                • \n
                                                                                    $watch \u95a2\u6570\u306e\u5f15\u6570\u306b\u306f\u4ee5\u4e0b\u306e\u5024\u3092\u6e21\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                    \u7b2c\u4e00\u5f15\u6570\uff08watchFn\uff09\uff1a\u76e3\u8996\u3059\u308b\u5024\u3092\u8fd4\u3059 Angular \u5f0f\uff08\u6587\u5b57\u5217\uff09\u3001\u307e\u305f\u306f\u95a2\u6570\u3002
                                                                                    \n\u7b2c\u4e8c\u5f15\u6570\uff08watchAction\uff09\uff1a\u5024\u304c\u5909\u5316\u3057\u305f\u6642\u306b\u5b9f\u884c\u3055\u308c\u308b Angular \u5f0f\u3001\u307e\u305f\u306f\u95a2\u6570\u3002
                                                                                    \n\u7b2c\u4e09\u5f15\u6570\uff08deepWatch\uff09\uff1aboolean \u5024\u3092\u6307\u5b9a\u3002 true \u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u3001\u7b2c\u4e00\u5f15\u6570\u3067\u6307\u5b9a\u3057\u305f\u5f0f\uff08\u95a2\u6570\uff09\u304c\u8fd4\u3057\u305f\u5024\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5909\u5316\u3082\u76e3\u8996\u3059\u308b\u3088\u3046\u306b\u306a\u308b\u3002<\/p>\n
                                                                                    \u524d\u9762\u7684\u4f8b\u5b50\u4f7f\u7528\u4e86 Angular \u8868\u8fbe\u5f0f\uff0c\u4f46\u5982\u679c\u4f7f\u7528\u51fd\u6570\u7684\u8bdd\uff0c\u5c06\u4f1a\u662f\u4ee5\u4e0b\u7684\u65b9\u5f0f\u3002<\/p>\n
                                                                                    function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>hoge<\/span> =<\/span> 0<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>fuga<\/span> =<\/span> 0<\/span>;<\/span>\r\n    $scope<\/span>.<\/span>sum<\/span> =<\/span> 0<\/span>;<\/span>\r\n\r\n    $scope<\/span>.<\/span>$watch<\/span>(<\/span>\r\n        function<\/span>()<\/span> {<\/span>\r\n            return<\/span> $scope<\/span>.<\/span>hoge<\/span> +<\/span> $scope<\/span>.<\/span>fuga<\/span>;<\/span>\r\n        },<\/span>\r\n        function<\/span>()<\/span> {<\/span>\r\n            $scope<\/span>.<\/span>sum<\/span> =<\/span> $scope<\/span>.<\/span>hoge<\/span> +<\/span> $scope<\/span>.<\/span>fuga<\/span>;<\/span>\r\n        }<\/span>\r\n    );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                    \u5b9a\u4e49\u6a21\u5757<\/h1>\n
                                                                                    <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1><\/span>{{message}}<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                    (<\/span>function<\/span>()<\/span> {<\/span>\r\n    var<\/span> myModule<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> []);<\/span>\r\n\r\n    myModule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n        $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>module<\/span>'<\/span>;<\/span>\r\n    });<\/span>\r\n})();<\/span>\r\n<\/code><\/pre>\n
                                                                                    \u56fe\u50cf\u5448\u73b0<\/p>\n
                                                                                    \"angularjs.JPG\"<\/div>\n
                                                                                      \n
                                                                                    • \n
                                                                                        \u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u5b9a\u7fa9\u3059\u308c\u3070\u3001\u305d\u306e\u4e2d\u306b Controller \u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\uff08\u4ed6\u306b\u3082\u30b5\u30fc\u30d3\u30b9\u3068\u304b\u8272\u3005\u5b9a\u7fa9\u3067\u304d\u308b\uff09\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                        ng-app \u306e\u5024\u306b\u5b9a\u7fa9\u3057\u305f\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u540d\u524d\u3092\u6e21\u3059\u3002<\/p>\n
                                                                                        \u5b9a\u4e49\u5e76\u52a0\u8f7d\u591a\u4e2a\u6a21\u5757<\/h2>\n
                                                                                        <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n  <head><\/span>\r\n    <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n  <\/head><\/span>\r\n  <body><\/span>\r\n    <h1><\/span>{{message}}<\/h1><\/span>\r\n  <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                        angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>hogeModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>service<\/span>(<\/span>'<\/span>hogeService<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>method<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n        return<\/span> '<\/span>hoge service<\/span>'<\/span>;<\/span>\r\n    };<\/span>\r\n});<\/span>\r\n\r\nangular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>hogeModule<\/span>'<\/span>])<\/span>\r\n.<\/span>run<\/span>(<\/span>function<\/span>(<\/span>$rootScope<\/span>,<\/span> hogeService<\/span>)<\/span> {<\/span>\r\n    $rootScope<\/span>.<\/span>message<\/span> =<\/span> hogeService<\/span>.<\/span>method<\/span>();<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                        \u753b\u9762\u5c55\u793a<\/p>\n
                                                                                        \"angularjs.JPG\"<\/div>\n
                                                                                        angular.module() \u306e\u7b2c\u4e00\u5f15\u6570\u306f\u5b9a\u7fa9\u3059\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u540d\u524d\u3002\u7b2c\u4e8c\u5f15\u6570\u306f\u30ed\u30fc\u30c9\u3059\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u540d\u524d\u3092\u914d\u5217\u3067\u6307\u5b9a\u3059\u308b\u3002<\/p>\n
                                                                                        \u5728\u591a\u4e2a\u6587\u4ef6\u4e2d\u8de8\u6a21\u5757\u5b9a\u4e49\u76f8\u540c\u6a21\u5757\u7684\u914d\u7f6e\u3002<\/h2>\n
                                                                                        <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n  <head><\/span>\r\n    <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"app.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"HogeService.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"FugaService.js\"<\/span>><\/script><\/span>\r\n  <\/head><\/span>\r\n  <body><\/span>\r\n    <h1><\/span>{{hoge}}<\/h1><\/span>\r\n    <h1><\/span>{{fuga}}<\/h1><\/span>\r\n  <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                        angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>run<\/span>(<\/span>function<\/span>(<\/span>$rootScope<\/span>,<\/span> hogeService<\/span>,<\/span> fugaService<\/span>)<\/span> {<\/span>\r\n    $rootScope<\/span>.<\/span>hoge<\/span> =<\/span> hogeService<\/span>.<\/span>method<\/span>();<\/span>\r\n    $rootScope<\/span>.<\/span>fuga<\/span> =<\/span> fugaService<\/span>.<\/span>method<\/span>();<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                        angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>)<\/span>\r\n.<\/span>service<\/span>(<\/span>'<\/span>hogeService<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>method<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n        return<\/span> '<\/span>hoge service<\/span>'<\/span>;<\/span>\r\n    };<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                        angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>)<\/span>\r\n.<\/span>service<\/span>(<\/span>'<\/span>fugaService<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>method<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n        return<\/span> '<\/span>fuga service<\/span>'<\/span>;<\/span>\r\n    };<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                        \u753b\u9762\u5448\u73b0<\/p>\n
                                                                                        \"angularjs.JPG\"<\/div>\n
                                                                                          \n
                                                                                        • \n
                                                                                            \u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u6700\u521d\u306b\u5b9a\u7fa9\u3059\u308b\u3068\u304d\u306f module(<\u30e2\u30b8\u30e5\u30fc\u30eb\u540d>, []) \u3092\u4f7f\u7528\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                             <\/p>\n
                                                                                              \n
                                                                                            • \n
                                                                                                \u65e2\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u53d6\u5f97\u3059\u308b\u3068\u304d\u306f\u3001 module(<\u30e2\u30b8\u30e5\u30fc\u30eb\u540d>) \u3092\u4f7f\u7528\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                module(<\u30e2\u30b8\u30e5\u30fc\u30eb\u540d>, []) \u306f\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u5b9a\u7fa9\u3092\u4e0a\u66f8\u304d\u3057\u3066\u3057\u307e\u3046\u306e\u3067\u6ce8\u610f\u3002
                                                                                                \n\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u307e\u3060\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u306a\u3044\u72b6\u614b\u3067 module(<\u30e2\u30b8\u30e5\u30fc\u30eb\u540d>) \u3092\u4f7f\u7528\u3059\u308b\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3002<\/p>\n
                                                                                                \u53ef\u4ee5\u53c2\u8003<\/p>\n
                                                                                                  \u30e2\u30b8\u30e5\u30fc\u30eb | AngularJS 1.2 \u65e5\u672c\u8a9e\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9 | js STUDIO<\/ul>\n
                                                                                                  \u6ce8\u5165\u4f9d\u8d56\u5b9e\u4f8b\uff08\u670d\u52a1\uff09<\/h1>\n
                                                                                                  <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1><\/span>{{message}}<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                  (<\/span>function<\/span>()<\/span> {<\/span>\r\n    var<\/span> myModule<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> []);<\/span>\r\n\r\n    myModule<\/span>.<\/span>service<\/span>(<\/span>'<\/span>sampleService<\/span>'<\/span>,<\/span> SampleService<\/span>);<\/span>\r\n\r\n    myModule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>,<\/span> sampleService<\/span>)<\/span> {<\/span>\r\n        $scope<\/span>.<\/span>message<\/span> =<\/span> sampleService<\/span>.<\/span>method<\/span>();<\/span>\r\n    });<\/span>\r\n\r\n    function<\/span> SampleService<\/span>()<\/span> {<\/span>\r\n        this<\/span>.<\/span>method<\/span> =<\/span> function<\/span>()<\/span> {<\/span>\r\n            return<\/span> '<\/span>sample service<\/span>'<\/span>;<\/span>\r\n        };<\/span>\r\n    }<\/span>\r\n})();<\/span>\r\n<\/code><\/pre>\n
                                                                                                  \u753b\u9762\u6240\u5c55\u793a\u7684\u666f\u8c61<\/p>\n
                                                                                                  \"angularjs.JPG\"<\/div>\n
                                                                                                    \n
                                                                                                  • \n
                                                                                                      \u30e2\u30b8\u30e5\u30fc\u30eb\u306e service() \u30e1\u30bd\u30c3\u30c9\u3067\u4efb\u610f\u306e\u30af\u30e9\u30b9\uff08\u30b5\u30fc\u30d3\u30b9\uff09\u3092\u767b\u9332\u3067\u304d\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                      \u7b2c\u4e00\u5f15\u6570\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u306e\u540d\u524d\u3002
                                                                                                      \n\u7b2c\u4e8c\u5f15\u6570\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u95a2\u6570\u3002<\/p>\n
                                                                                                      \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u5f15\u6570\u306b\u3001\u767b\u9332\u3057\u305f\u30b5\u30fc\u30d3\u30b9\u540d\u3068\u540c\u3058\u540d\u524d\u306e\u5909\u6570\u3092\u5b9a\u7fa9\u3059\u308b\u3068\u3001\u305d\u306e\u5909\u6570\u306b\u30b5\u30fc\u30d3\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3055\u308c\u308b\u3002
                                                                                                      \n\u30b5\u30fc\u30d3\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u751f\u6210\u304c\u8907\u96d1\u306a\u5834\u5408\u306f\u3001 factory() \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3046\u3002<\/p>\n
                                                                                                      \u901a\u8fc7factory()\u65b9\u6cd5\u6ce8\u518c\u670d\u52a1<\/h2>\n
                                                                                                      (<\/span>function<\/span>()<\/span> {<\/span>\r\n    var<\/span> myModule<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> []);<\/span>\r\n\r\n    myModule<\/span>.<\/span>factory<\/span>(<\/span>'<\/span>sampleService<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n        return<\/span> {<\/span>\r\n            method<\/span>:<\/span> function<\/span>()<\/span> {<\/span>\r\n                return<\/span> '<\/span>sample service created by factory.<\/span>'<\/span>\r\n            }<\/span>\r\n        };<\/span>\r\n    });<\/span>\r\n\r\n    myModule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>,<\/span> sampleService<\/span>)<\/span> {<\/span>\r\n        $scope<\/span>.<\/span>message<\/span> =<\/span> sampleService<\/span>.<\/span>method<\/span>();<\/span>\r\n    });<\/span>\r\n})();<\/span>\r\n<\/code><\/pre>\n
                                                                                                      \u753b\u9762\u5c55\u793a<\/p>\n
                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                      \u7f16\u8bd1\uff08\u538b\u7f29\uff09\u7b56\u7565<\/h2>\n
                                                                                                      AngularJS\u901a\u8fc7\u6839\u636e\u63a7\u5236\u5668\u548c\u670d\u52a1\u7684\u53c2\u6570\u540d\u79f0\u6765\u8fdb\u884c\u4f9d\u8d56\u6ce8\u5165\u3002<\/p>\n
                                                                                                      \u4f46\u662f\uff0c\u5f53\u538b\u7f29\u6e90\u4ee3\u7801\u65f6\uff0c\u6839\u636e\u5de5\u5177\u548c\u8bbe\u7f6e\u7684\u4e0d\u540c\uff0c\u53d8\u91cf\u540d\u53ef\u80fd\u4f1a\u88ab\u66f4\u6539\u4e3a\u50cf a \u8fd9\u6837\u7684\u77ed\u540d\u79f0\u3002<\/p>\n
                                                                                                      \u5982\u679c\u8fd9\u6837\u7684\u8bdd\uff0c\u5c31\u65e0\u6cd5\u8fdb\u884c “\u6839\u636e\u540d\u79f0\u7684\u6ce8\u5165”\uff0c\u5728\u8fd0\u884c\u65f6\u4f1a\u53d1\u751f\u9519\u8bef\u3002<\/p>\n
                                                                                                      \u5728AngularJS\u4e2d\uff0c\u4e3a\u4e86\u5e94\u5bf9\u8fd9\u4e2a\u95ee\u9898\uff0c\u5df2\u7ecf\u63d0\u4f9b\u4e86\u4e00\u79cd\u660e\u786e\u6307\u5b9a\u4f9d\u8d56\u5173\u7cfb\u540d\u79f0\u7684\u65b9\u6cd5\u3002<\/p>\n
                                                                                                      var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> []);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> [<\/span>'<\/span>$scope<\/span>'<\/span>,<\/span> function<\/span>(<\/span>s<\/span>)<\/span> {<\/span>\r\n    s<\/span>.<\/span>message<\/span> =<\/span> '<\/span>hoge<\/span>'<\/span>;<\/span>\r\n}]);<\/span>\r\n<\/code><\/pre>\n
                                                                                                      \u5728\u63a7\u5236\u5668\u548c\u670d\u52a1\u5b9a\u4e49\u65f6\uff0c\u5c06\u51fd\u6570\u4f20\u9012\u7ed9\u4e00\u4e2a\u6570\u7ec4\u3002<\/p>\n
                                                                                                      \u7136\u540e\uff0c\u6309\u7167\u987a\u5e8f\u5217\u4e3e\u53c2\u6570\u7684\u540d\u79f0\uff0c\u6700\u540e\u653e\u7f6e\u51fd\u6570\u4f53\u3002<\/p>\n
                                                                                                      \u53ea\u8981\u8fd9\u6837\u505a\uff0c\u51fd\u6570\u4e3b\u4f53\u53c2\u6570\u7684\u540d\u79f0\u53ef\u4ee5\u662f\u4efb\u4f55\u540d\u79f0\uff0c\u5e76\u4e14\u5728\u538b\u7f29\u540e\u4e5f\u53ef\u4ee5\u6b63\u5e38\u8fd0\u884c\u3002<\/p>\n
                                                                                                      \u4f7f\u7528\u8fc7\u6ee4\u5668\u6765\u6307\u5b9a\u663e\u793a\u683c\u5f0f<\/h1>\n
                                                                                                      <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1><\/span>{{money | currency}}<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                      function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>money<\/span> =<\/span> 1000<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                      \u753b\u9762\u5c55\u793a<\/p>\n
                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                      {{value | filter}} \u3068\u3044\u3046\u3075\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u3001\u8868\u793a\u5f62\u5f0f\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\uff08\u30d5\u30a3\u30eb\u30bf\u30fc\u3068\u547c\u3076\uff09\u3002<\/p>\n
                                                                                                      currency \u306f\u3001\u304a\u91d1\u306e\u8868\u793a\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306f\u30c9\u30eb\u8868\u8a18\uff09\u3002
                                                                                                      \n\u30d5\u30a3\u30eb\u30bf\u30fc\u306b\u306f\u5f15\u6570\u3092\u6e21\u305b\u308b\u3082\u306e\u304c\u3042\u308a\u3001 {{value | filter:param1:param2}} \u3068\u3044\u3046\u3075\u3046\u306b\u30b3\u30ed\u30f3 : \u533a\u5207\u308a\u3067\u6e21\u3059\u3002
                                                                                                      \n\u30d5\u30a3\u30eb\u30bf\u30fc\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u306b\u306f Angular \u5f0f\u304c\u4f7f\u3048\u308b\u3002<\/p>\n
                                                                                                      \u6807\u51c6\u8fc7\u6ee4\u5668<\/h2>\n
                                                                                                      \u8fc7\u6ee4\u5668<\/h3>\n
                                                                                                      {{ filter_expression | filter : expression : comparator }}\r\n<\/code><\/pre>\n
                                                                                                        \u914d\u5217\u304b\u3089\u6761\u4ef6\u306b\u4e00\u81f4\u3057\u305f\u8981\u7d20\u3060\u3051\u3092\u62bd\u51fa\u3059\u308b\u30d5\u30a3\u30eb\u30bf\u30fc\u3002<\/ul>\n
                                                                                                        \u4f20\u9012\u4e00\u4e2a\u5b57\u7b26\u4e32\u7ed9\u8868\u8fbe\u5f0f<\/h4>\n
                                                                                                        <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <pre><\/span>{{array1 | filter:\"g\" | json}}<\/pre><\/span>\r\n        <pre><\/span>{{array2 | filter:\"h\" | json}}<\/pre><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                        function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>array1<\/span> =<\/span> [<\/span>\"<\/span>hoge<\/span>\"<\/span>,<\/span> \"<\/span>fuga<\/span>\"<\/span>,<\/span> \"<\/span>piyo<\/span>\"<\/span>];<\/span>\r\n    $scope<\/span>.<\/span>array2<\/span> =<\/span> [<\/span>\r\n        \"<\/span>hoge<\/span>\"<\/span>,<\/span>\r\n        \"<\/span>fuga<\/span>\"<\/span>,<\/span>\r\n        {<\/span>a<\/span>:<\/span> \"<\/span>hoge<\/span>\"<\/span>},<\/span>\r\n        {<\/span>a<\/span>:<\/span> \"<\/span>fuga<\/span>\"<\/span>},<\/span>\r\n        {<\/span>b<\/span>:<\/span> {<\/span>c<\/span>:<\/span> \"<\/span>hoge<\/span>\"<\/span>}},<\/span>\r\n        {<\/span>b<\/span>:<\/span> {<\/span>c<\/span>:<\/span> \"<\/span>fuga<\/span>\"<\/span>}},<\/span>\r\n    ];<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                        \u8868\u793a\u6210\u679c\/\u8868\u793a\u7ed3\u679c<\/p>\n
                                                                                                        \"angularjs.JPG\"<\/div>\n
                                                                                                          \n
                                                                                                        • \n
                                                                                                            expression \u306b\u6587\u5b57\u5217\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u3001\u4ee5\u4e0b\u306e\u3044\u305a\u308c\u304b\u306e\u6761\u4ef6\u306b\u4e00\u81f4\u3059\u308b\u8981\u7d20\u304c\u62bd\u51fa\u3055\u308c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                            \u6307\u5b9a\u3057\u305f\u6587\u5b57\u5217\u3092\u542b\u3080\u6587\u5b57\u5217\u8981\u7d20\u3002
                                                                                                            \n\u6307\u5b9a\u3057\u305f\u6587\u5b57\u5217\u3092\u542b\u3080\u6587\u5b57\u5217\u3092\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3068\u3057\u3066\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u8981\u7d20\u3002<\/p>\n
                                                                                                            expression \u306e\u6587\u5b57\u5217\u306e\u5148\u982d\u306b ! \u3092\u3064\u3051\u308b\u3068\u6761\u4ef6\u3092\u5426\u5b9a\u3067\u304d\u308b\uff08\u6307\u5b9a\u3057\u305f\u6587\u5b57\u5217\u3092\u542b\u307e\u306a\u3044\u8981\u7d20\u3092\u62bd\u51fa\u3067\u304d\u308b\uff09\u3002<\/p>\n
                                                                                                            \u5c06\u4e00\u4e2a\u5bf9\u8c61\u4f20\u5165\u8868\u8fbe\u5f0f\u3002<\/h4>\n
                                                                                                            <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <ul><\/span>\r\n            <li<\/span> ng-repeat=<\/span>\"physicist in physicists | filter:{firstName:'e', lastName: 'l'}\"<\/span>><\/span>\r\n                {{physicist.firstName}} {{physicist.lastName}}\r\n            <\/li><\/span>\r\n        <\/ul><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                            function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>physicists<\/span> =<\/span> [<\/span>\r\n        {<\/span>firstName<\/span>:<\/span> '<\/span>Johannes<\/span>'<\/span>,<\/span> lastName<\/span>:<\/span> '<\/span>Kepler<\/span>'<\/span>},<\/span>\r\n        {<\/span>firstName<\/span>:<\/span> '<\/span>Galileo<\/span>'<\/span>,<\/span>  lastName<\/span>:<\/span> '<\/span>Galilei<\/span>'<\/span>},<\/span>\r\n        {<\/span>firstName<\/span>:<\/span> '<\/span>Thomas<\/span>'<\/span>,<\/span>   lastName<\/span>:<\/span> '<\/span>Young<\/span>'<\/span>},<\/span>\r\n        {<\/span>firstName<\/span>:<\/span> '<\/span>Michael<\/span>'<\/span>,<\/span>  lastName<\/span>:<\/span> '<\/span>Faraday<\/span>'<\/span>},<\/span>\r\n        {<\/span>firstName<\/span>:<\/span> '<\/span>Edward<\/span>'<\/span>,<\/span>   lastName<\/span>:<\/span> '<\/span>Morley<\/span>'<\/span>},<\/span>\r\n        {<\/span>firstName<\/span>:<\/span> '<\/span>Niels<\/span>'<\/span>,<\/span>    lastName<\/span>:<\/span> '<\/span>Bohr<\/span>'<\/span>}<\/span>\r\n    ];<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                            \u8868\u793a\u7ed3\u679c<\/p>\n
                                                                                                            \"angularjs.JPG\"<\/div>\n
                                                                                                              expression \u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3057\u305f\u5834\u5408\u3001\u6307\u5b9a\u3057\u305f\u5168\u3066\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u304a\u3044\u3066\u3001\u6307\u5b9a\u3057\u305f\u6587\u5b57\u5217\u3092\u542b\u3080\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u8981\u7d20\u3060\u3051\u304c\u62bd\u51fa\u3055\u308c\u308b\u3002<\/ul>\n
                                                                                                              \u4f20\u9012\u51fd\u6570\u5230\u8868\u8fbe\u5f0f<\/h4>\n
                                                                                                              <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        {{[1, 2, 3, 4, 5] | filter:isEvenNumber}}\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                              function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>isEvenNumber<\/span> =<\/span> function<\/span>(<\/span>number<\/span>)<\/span> {<\/span>\r\n        return<\/span> number<\/span> %<\/span> 2<\/span> ==<\/span> 0<\/span>;<\/span>\r\n    };<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                              \u8868\u793a\u7ed3\u679c sh\u00ec ji\u00e9 gu\u01d2)<\/p>\n
                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                expression \u3067\u95a2\u6570\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u3001\u914d\u5217\u306e\u5404\u8981\u7d20\u304c\u95a2\u6570\u306b\u6e21\u3055\u308c\u3001\u95a2\u6570\u304c true \u3092\u8fd4\u3057\u305f\u8981\u7d20\u3060\u3051\u304c\u62bd\u51fa\u3055\u308c\u308b\u3002<\/ul>\n
                                                                                                                \u5728comparator \u4e2d\u5b9a\u4e49\u5339\u914d\u6761\u4ef6<\/h4>\n
                                                                                                                <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <p><\/span>{{[\"a\", \"A\", \"ab\", \"c\"] | filter:\"a\":true}}\r\n        <p><\/span>{{[\"a\", \"A\", \"ab\", \"c\"] | filter:\"a\":false}}\r\n        <p><\/span>{{[\"a\", \"A\", \"ab\", \"c\"] | filter:\"a\":contains}}\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>contains<\/span> =<\/span> function<\/span>(<\/span>actual<\/span>,<\/span> expected<\/span>)<\/span> {<\/span>\r\n        return<\/span> actual<\/span>.<\/span>indexOf<\/span>(<\/span>expected<\/span>)<\/span> !=<\/span> -<\/span>1<\/span>;<\/span>\r\n    };<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                                \u8868\u793a\u6210\u679c<\/p>\n
                                                                                                                \"angularjs.JPG\"<\/div>\n
                                                                                                                  \n
                                                                                                                • \n
                                                                                                                    comparator \u3067\u5b9f\u969b\u306e\u5024\u3068\u62bd\u51fa\u6761\u4ef6\u306b\u6307\u5b9a\u3057\u3066\u3044\u308b\u5024\u3068\u306e\u6bd4\u8f03\u6761\u4ef6\u3092\u5b9a\u7fa9\u3067\u304d\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                     <\/p>\n
                                                                                                                      \n
                                                                                                                    • \n
                                                                                                                        false \uff08\u30c7\u30d5\u30a9\u30eb\u30c8\uff09\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u3001\u5927\u6587\u5b57\u5c0f\u6587\u5b57\u95a2\u4fc2\u7121\u3057\u3001\u304b\u3064\u6587\u5b57\u5217\u3092\u542b\u3093\u3067\u3044\u308c\u3070 OK \u306b\u306a\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                         <\/p>\n
                                                                                                                          \n
                                                                                                                        • \n
                                                                                                                            true \u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u3001 angular.equals() \u3067\u6bd4\u8f03\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                             <\/p>\n
                                                                                                                              \u95a2\u6570\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u3001\u305d\u306e\u95a2\u6570\u304c true \u3092\u8fd4\u3057\u305f\u5834\u5408\u306b\u4e00\u81f4\u3057\u3066\u3044\u308b\u3068\u5224\u65ad\u3055\u308c\u308b\u3002<\/ul>\n
                                                                                                                              \u8d27\u5e01<\/h3>\n
                                                                                                                              {{ currency_expression | currency : symbol }}\r\n<\/code><\/pre>\n
                                                                                                                              {{1000 | currency:\"\uffe5\"}}\r\n<\/code><\/pre>\n
                                                                                                                              \uffe51,000.00\r\n<\/code><\/pre>\n
                                                                                                                                \n
                                                                                                                              • \n
                                                                                                                                  \u304a\u91d1\u3092\u8868\u793a\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                   <\/p>\n
                                                                                                                                    \u5f15\u6570\u3067\u30b7\u30f3\u30dc\u30eb\u3092\u5909\u66f4\u3067\u304d\u308b\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306f $\uff09\u3002<\/ul>\n
                                                                                                                                    \u6570\u5b57 (sh\u00f9 z\u00ec)<\/h3>\n
                                                                                                                                    OR<\/p>\n
                                                                                                                                    \u53f7\u7801 m\u01ce)<\/p>\n
                                                                                                                                    {{ number_expression | number : fractionSize }}\r\n<\/code><\/pre>\n
                                                                                                                                    {{1000 | number:3}}\r\n<\/code><\/pre>\n
                                                                                                                                    1,000.000\r\n<\/code><\/pre>\n
                                                                                                                                      \n
                                                                                                                                    • \n
                                                                                                                                        \u6570\u5024\u3092\u8868\u793a\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                         <\/p>\n
                                                                                                                                          \u5f15\u6570\u3067\u3001\u5c0f\u6570\u70b9\u4ee5\u4e0b\u306e\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3067\u304d\u308b\u3002<\/ul>\n
                                                                                                                                          \u65e5\u671f<\/h3>\n
                                                                                                                                          {{ date_expression | date : format }}\r\n<\/code><\/pre>\n
                                                                                                                                          {{date | date:\"yyyy\/MM\/dd HH:mm:ss.sss\"}}\r\n<\/code><\/pre>\n
                                                                                                                                          2014\/04\/30 13:20:33.912\r\n<\/code><\/pre>\n
                                                                                                                                            \n
                                                                                                                                          • \n
                                                                                                                                              \u65e5\u6642\u3092\u8868\u793a\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                               <\/p>\n
                                                                                                                                                \u5f15\u6570\u3067\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u6307\u5b9a\u3067\u304d\u308b\uff08\u8a73\u7d30\u306f API \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u3092\u53c2\u7167\uff09\u3002<\/ul>\n
                                                                                                                                                JSON<\/h3>\n
                                                                                                                                                JSON (JavaScript Object Notation) \u662f\u4e00\u79cd\u8f7b\u91cf\u7ea7\u7684\u6570\u636e\u4ea4\u6362\u683c\u5f0f\uff0c\u6613\u4e8e\u9605\u8bfb\u548c\u7f16\u5199\u3002\u5b83\u88ab\u5e7f\u6cdb\u5e94\u7528\u4e8eWeb\u5e94\u7528\u7a0b\u5e8f\u4e2d\u7684\u6570\u636e\u4f20\u8f93\u548c\u5b58\u50a8\u3002JSON\u91c7\u7528\u4e86\u7b80\u6d01\u7684\u6587\u672c\u683c\u5f0f\u6765\u8868\u793a\u7ed3\u6784\u5316\u6570\u636e\uff0c\u4ee5\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u8fdb\u884c\u4fdd\u5b58\u3002\u5b83\u652f\u6301\u7b80\u5355\u7684\u6570\u636e\u7c7b\u578b\uff0c\u4f8b\u5982\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u3001\u5e03\u5c14\u503c\u548c\u6570\u7ec4\u7b49\u3002JSON\u7684\u4f7f\u7528\u65b9\u4fbf\u7075\u6d3b\uff0c\u6210\u4e3a\u4e86\u73b0\u4ee3\u5f00\u53d1\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u7ec4\u6210\u90e8\u5206\u3002<\/p>\n
                                                                                                                                                {{ json_expression | json }}\r\n<\/code><\/pre>\n
                                                                                                                                                <pre><\/span>{{json | json}}<\/pre><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                $scope<\/span>.<\/span>json<\/span> =<\/span> {<\/span>\r\n    hoge<\/span>:<\/span> '<\/span>HOGE<\/span>'<\/span>,<\/span>\r\n    fuga<\/span>:<\/span> {<\/span>\r\n        a<\/span>:<\/span> true<\/span>,<\/span>\r\n        b<\/span>:<\/span> false<\/span>\r\n    },<\/span>\r\n    piyo<\/span>:<\/span> [<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>]<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                \u8868\u793a\u7ed3\u679c<\/p>\n
                                                                                                                                                \"angularjs.JPG\"<\/div>\n
                                                                                                                                                  JavaScript \u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092 JSON \u5f62\u5f0f\u306e\u6587\u5b57\u5217\u3067\u8868\u793a\u3059\u308b\u3002<\/ul>\n
                                                                                                                                                  \u5c0f\u5199\u5b57\u6bcd\u548c\u5927\u5199\u5b57\u6bcd<\/h3>\n
                                                                                                                                                  {{ lowercase_expression | lowercase }}\r\n{{ uppercase_expression | uppercase }}\r\n<\/code><\/pre>\n
                                                                                                                                                  <p><\/span>{{\"HOGE\" | lowercase}}<\/p><\/span>\r\n<p><\/span>{{\"fuga\" | uppercase}}<\/p><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                  hoge\r\n\r\nFUGA\r\n<\/code><\/pre>\n
                                                                                                                                                    \u5927\u6587\u5b57\u5c0f\u6587\u5b57\u3092\u5207\u308a\u66ff\u3048\u308b\u3002<\/ul>\n
                                                                                                                                                    \u9650\u5236\u4e8e<\/h3>\n
                                                                                                                                                    {{ limitTo_expression | limitTo : limit }}\r\n<\/code><\/pre>\n
                                                                                                                                                    <p><\/span>{{[1, 22, 333, 4444] | limitTo:3}}<\/p><\/span>\r\n<p><\/span>{{\"aBcDeFg\" | limitTo:4}}<\/p><\/span>\r\n<p><\/span>{{[1, 22, 333, 4444] | limitTo:-3}}<\/p><\/span>\r\n<p><\/span>{{\"aBcDeFg\" | limitTo:-4}}<\/p><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                    [1,22,333]\r\n\r\naBcD\r\n\r\n[22,333,4444]\r\n\r\nDeFg\r\n<\/code><\/pre>\n
                                                                                                                                                      \n
                                                                                                                                                    • \n
                                                                                                                                                        \u914d\u5217\u307e\u305f\u306f\u6587\u5b57\u5217\u3092\u3001\u5148\u982d\u304b\u3089\u6307\u5b9a\u3057\u305f\u6570\u3060\u3051\u53d6\u308a\u51fa\u3057\u3066\u8868\u793a\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                         <\/p>\n
                                                                                                                                                          \n
                                                                                                                                                        • \n
                                                                                                                                                            \u30de\u30a4\u30ca\u30b9\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u5f8c\u308d\u304b\u3089\u6307\u5b9a\u3057\u305f\u6570\u3060\u3051\u53d6\u308a\u51fa\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                             <\/p>\n
                                                                                                                                                              \u914d\u5217\u3084\u6587\u5b57\u5217\u306e\u9577\u3055\u3088\u308a\u5927\u304d\u3044\u5024\u3092\u5f15\u6570\u3067\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u3001\u30a8\u30e9\u30fc\u306b\u306a\u3089\u305a\u5168\u3066\u306e\u8981\u7d20\uff08\u6587\u5b57\uff09\u304c\u8868\u793a\u3055\u308c\u308b\u3002<\/ul>\n
                                                                                                                                                              \u6570\u7ec4\u53ef\u80fd\u4e0eng-repeat\u7b49\u7ed3\u5408\u4f7f\u7528\u3002<\/p>\n
                                                                                                                                                              <ul><\/span>\r\n    <li<\/span> ng-repeat=<\/span>\"value in [1, 2, 3, 4, 5] | limitTo : 3\"<\/span>><\/span>{{value}}<\/li><\/span>\r\n<\/ul><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                              \u8868\u793a\u7ed3\u679c<\/p>\n
                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                              \u6309\u7167\u987a\u5e8f\u6392\u5217<\/h3>\n
                                                                                                                                                              {{ orderBy_expression | orderBy : expression : reverse }}\r\n<\/code><\/pre>\n
                                                                                                                                                              \u4f7f\u7528\u51fd\u6570\u6765\u8868\u8fbe<\/h4>\n
                                                                                                                                                              <ul><\/span>\r\n    <li<\/span> ng-repeat=<\/span>\"value in values | orderBy:myFunction\"<\/span>><\/span>{{value.name}}({{value.age}})<\/li><\/span>\r\n<\/ul><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                              $scope<\/span>.<\/span>values<\/span> =<\/span> [<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>taro<\/span>'<\/span>,<\/span>    age<\/span>:<\/span> 15<\/span>},<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>takeshi<\/span>'<\/span>,<\/span> age<\/span>:<\/span> 12<\/span>},<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>takuya<\/span>'<\/span>,<\/span>  age<\/span>:<\/span> 17<\/span>}<\/span>\r\n];<\/span>\r\n\r\n$scope<\/span>.<\/span>myFunction<\/span> =<\/span> function<\/span>(<\/span>value<\/span>)<\/span> {<\/span>\r\n    return<\/span> value<\/span>.<\/span>age<\/span>;<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                              \u8868\u660e\u7ed3\u679c<\/p>\n
                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                \u95a2\u6570\u306b\u914d\u5217\u306e\u5404\u8981\u7d20\u304c\u6e21\u3055\u308c\u308b\u306e\u3067\u3001\u6e21\u3055\u308c\u305f\u8981\u7d20\u306e\u4e2d\u304b\u3089\u30bd\u30fc\u30c8\u306e\u57fa\u6e96\u306b\u3057\u305f\u3044\u5024\uff08\u6bd4\u8f03\u6f14\u7b97\u5b50\u3067\u6bd4\u8f03\u3067\u304d\u308b\u3082\u306e\uff09\u3092\u53d6\u5f97\u3057\u3066\u8fd4\u3059\u3002<\/ul>\n
                                                                                                                                                                \u4f20\u9012\u5b57\u7b26\u4e32\u7ed9\u8868\u8fbe\u5f0f<\/h4>\n
                                                                                                                                                                <ul><\/span>\r\n    <li<\/span> ng-repeat=<\/span>\"value in values | orderBy:'age'\"<\/span>><\/span>{{value.name}}({{value.age}})<\/li><\/span>\r\n<\/ul><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                  \n
                                                                                                                                                                • \n
                                                                                                                                                                    expression \u306b\u6587\u5b57\u5217\u3092\u6e21\u3059\u3068\u3001\u305d\u306e\u6587\u5b57\u5217\u306f\u914d\u5217\u306e\u5404\u8981\u7d20\u304c\u6301\u3064\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5224\u65ad\u3055\u308c\u3001\u305d\u306e\u5024\u3067\u30bd\u30fc\u30c8\u304c\u884c\u308f\u308c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                    -age \u306e\u3088\u3046\u306b\u3059\u308c\u3070\u3001\u30bd\u30fc\u30c8\u9806\u3092\u9006\u306b\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                    \u5c06\u6570\u7ec4\u4f20\u9012\u7ed9\u8868\u8fbe\u5f0f<\/h4>\n
                                                                                                                                                                    <ul><\/span>\r\n    <li<\/span> ng-repeat=<\/span>\"value in values | orderBy:['age', 'height']\"<\/span>><\/span>\r\n        {{value.name}}({{value.age}})({{value.height}} cm)\r\n    <\/li><\/span>\r\n<\/ul><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                    $scope<\/span>.<\/span>values<\/span> =<\/span> [<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>taro<\/span>'<\/span>,<\/span>    age<\/span>:<\/span> 15<\/span>,<\/span> height<\/span>:<\/span> 165<\/span>},<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>takeshi<\/span>'<\/span>,<\/span> age<\/span>:<\/span> 12<\/span>,<\/span> height<\/span>:<\/span> 155<\/span>},<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>taichi<\/span>'<\/span>,<\/span>  age<\/span>:<\/span> 15<\/span>,<\/span> height<\/span>:<\/span> 160<\/span>},<\/span>\r\n    {<\/span>name<\/span>:<\/span> '<\/span>takuya<\/span>'<\/span>,<\/span>  age<\/span>:<\/span> 17<\/span>,<\/span> height<\/span>:<\/span> 170<\/span>}<\/span>\r\n];<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                    \u8868\u660e\u7d50\u679c (Express the result)<\/p>\n
                                                                                                                                                                    \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                      \n
                                                                                                                                                                    • \n
                                                                                                                                                                        expression \u306b\u914d\u5217\u3092\u6e21\u3059\u3068\u3001\u8907\u6570\u306e\u9805\u76ee\u3067\u30bd\u30fc\u30c8\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                         <\/p>\n
                                                                                                                                                                          \u914d\u5217\u306e\u5404\u8981\u7d20\u306f\u6587\u5b57\u5217\u307e\u305f\u306f\u95a2\u6570\u3092\u6307\u5b9a\u3059\u308b\uff08\u305d\u308c\u305e\u308c\u306e\u4f7f\u3044\u65b9\u306f\u524d\u8ff0\u306e\u901a\u308a\uff09\u3002<\/ul>\n
                                                                                                                                                                          \u5236\u4f5c\u81ea\u5df1\u7684\u8fc7\u6ee4\u5668<\/h2>\n
                                                                                                                                                                          <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <h1><\/span>{{\"hoge\" | myFilter:\"<<\/span>\"<\/span>:<\/span>\"<\/span>><\/span>\"}}<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                          var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> []);<\/span>\r\n\r\nmodule<\/span>.<\/span>filter<\/span>(<\/span>'<\/span>myFilter<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> function<\/span>(<\/span>value<\/span>,<\/span> param1<\/span>,<\/span> param2<\/span>)<\/span> {<\/span>\r\n        return<\/span> param1<\/span> +<\/span> value<\/span> +<\/span> param2<\/span>;<\/span>\r\n    };<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                          \u8868\u793a\u6210\u679c<\/p>\n
                                                                                                                                                                          \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                            \n
                                                                                                                                                                          • \n
                                                                                                                                                                              \u30e2\u30b8\u30e5\u30fc\u30eb\u306e filter() \u30e1\u30bd\u30c3\u30c9\u3067\u30d5\u30a3\u30eb\u30bf\u30fc\u306e\u30d5\u30a1\u30af\u30c8\u30ea\u95a2\u6570\u3092\u767b\u9332\u3067\u304d\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                               <\/p>\n
                                                                                                                                                                                \u30d5\u30a3\u30eb\u30bf\u30fc\u306b\u306f\u3001\u7b2c\u4e00\u5f15\u6570\u306b\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u9069\u7528\u3057\u305f\u5024\u3001\u7b2c\u4e8c\u5f15\u6570\u4ee5\u964d\u306b\u30d5\u30a3\u30eb\u30bf\u30fc\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u304c\u6e21\u3055\u308c\u308b\u3002<\/ul>\n
                                                                                                                                                                                \u5c06\u8fc7\u6ee4\u5668\u8fde\u63a5\u8d77\u6765<\/h2>\n
                                                                                                                                                                                <pre><\/span>{{[\"hoge\", \"fuga\", \"piyo\"] | filter:\"g\" | json}}<\/pre><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                [\r\n  \"hoge\",\r\n  \"fuga\"\r\n]\r\n<\/code><\/pre>\n
                                                                                                                                                                                  \u30d1\u30a4\u30d7\u306e\u30ce\u30ea\u3067\u3001\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u9023\u7d50\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/ul>\n
                                                                                                                                                                                  \u5728 JavaScript \u4ee3\u7801\u4e2d\u64cd\u4f5c\u4f7f\u7528\u8fc7\u6ee4\u5668<\/h2>\n
                                                                                                                                                                                  angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>run<\/span>(<\/span>function<\/span>(<\/span>$filter<\/span>)<\/span> {<\/span>\r\n    var<\/span> filter<\/span> =<\/span> $filter<\/span>(<\/span>'<\/span>json<\/span>'<\/span>);<\/span>\r\n    var<\/span> str<\/span> =<\/span> filter<\/span>({<\/span>name<\/span>:<\/span> '<\/span>Taro<\/span>'<\/span>,<\/span> age<\/span>:<\/span> 17<\/span>});<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>str<\/span>);<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  {\r\n  \"name\": \"Taro\",\r\n  \"age\": 17\r\n}\r\n<\/code><\/pre>\n
                                                                                                                                                                                  $filter() \u95a2\u6570\u306b\u30d5\u30a3\u30eb\u30bf\u30fc\u540d\u3092\u6e21\u3059\u3068\u3001\u305d\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u306e\u95a2\u6570\u3092\u53d6\u5f97\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                  \u66f4\u6539\u533a\u57df\u8bbe\u7f6e<\/h1>\n
                                                                                                                                                                                  \u83b7\u53d6 i18n \u6587\u4ef6<\/h2>\n
                                                                                                                                                                                  \u4ece\u5b98\u65b9\u7f51\u7ad9\u4e0b\u8f7d AngularJS \u65f6\uff0c\u9009\u62e9\u4ee5 ZIP \u683c\u5f0f\u4e0b\u8f7d\uff0c\u89e3\u538b\u540e\u4f1a\u53d1\u73b0\u91cc\u9762\u6709\u4e00\u4e2a\u540d\u4e3a i18n \u7684\u6587\u4ef6\u5939\u3002<\/p>\n
                                                                                                                                                                                  \u4ece\u8fd9\u4e9b\u6587\u4ef6\u4e2d\u627e\u5230\u6240\u9700\u7684\u533a\u57df\u8bbe\u7f6e\u6587\u4ef6\u3002<\/p>\n
                                                                                                                                                                                  \u8bfb\u53d6 i18n \u6587\u4ef6<\/h2>\n
                                                                                                                                                                                  <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-locale_ja-jp.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1><\/span>{{date | date:\"yyyy\/MM\/dd EEE\"}}<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  function<\/span> SampleController<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>date<\/span> =<\/span> new<\/span> Date<\/span>();<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  \u8868\u660e\u7684\u7d50\u679c<\/h2>\n
                                                                                                                                                                                  \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                  \u5728\u9875\u9762\u7684\u67d0\u4e2a\u90e8\u5206\u52a8\u6001\u52a0\u8f7d\u6a21\u677f\u3002<\/h1>\n
                                                                                                                                                                                  \u51c6\u5907\u4e00\u4e2a\u7f51\u7edc\u670d\u52a1\u5668<\/h2>\n
                                                                                                                                                                                  \u82e5\u8981\u5c1d\u8bd5\u8fd9\u4e2a\uff0c\u8bf7\u901a\u8fc7Web\u670d\u52a1\u5668\u8bbf\u95ee\u9875\u9762\uff0c\u7531\u4e8e\u6d4f\u89c8\u5668\u5b89\u5168\u9650\u5236\u7684\u539f\u56e0\u3002<\/p>\n
                                                                                                                                                                                  \u6240\u4ee5\uff0c\u51c6\u5907\u4e00\u4e2aWeb\u670d\u52a1\u5668\u3002<\/p>\n
                                                                                                                                                                                  \u4f7f\u7528Python\u7684SimpleHTTPServer\uff0c\u6216\u8005\u4f7f\u7528Apache\u3001Tomcat\u3001Jetty\u7b49\uff0c\u6216\u8005\u60a8\u81ea\u5df1\u9009\u62e9\u4e00\u4e2a\u3002<\/p>\n
                                                                                                                                                                                  \u6dfb\u52a0ngRoute\u6a21\u5757<\/h2>\n
                                                                                                                                                                                  \u5982\u679c\u4f60\u6b63\u5728\u4f7f\u7528 zip \u6587\u4ef6\u4e0b\u8f7d AngularJS\uff0c\u90a3\u4e48\u5728\u5b58\u653e angular.min.js \u7684\u6587\u4ef6\u5939\u91cc\u4e5f\u5e94\u8be5\u6709 angular-route.min.js\uff0c\u6240\u4ee5\u8bf7\u6309\u7167\u5b83\u7684\u8def\u5f84\u52a0\u8f7d\u3002<\/p>\n
                                                                                                                                                                                  \u7b80\u5355\u7684\u4f8b\u5b50 de<\/h2>\n
                                                                                                                                                                                  <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-route.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n        <style><\/span>\r\n            .border<\/span> {<\/span>\r\n                border<\/span>:<\/span> 1px<\/span> solid<\/span> red<\/span>;<\/span>\r\n            }<\/span>\r\n        <\/style><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <h1><\/span>sample.html<\/h1><\/span>\r\n        <div<\/span> ng-view<\/span> class=<\/span>\"border\"<\/span>><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngRoute<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$routeProvider<\/span>)<\/span> {<\/span>\r\n    $routeProvider<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/<\/span>'<\/span>,<\/span> {<\/span>\r\n        controller<\/span>:<\/span> '<\/span>RootController<\/span>'<\/span>,<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>root.html<\/span>'<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>RootController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>message by RootController.<\/span>'<\/span>;<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  <h1><\/span>Root Template<\/h1><\/span>\r\n<p><\/span>{{message}}<\/p><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  \u5728Web\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95eesample.html\u3002<\/p>\n
                                                                                                                                                                                  \u8868\u793a\u6210\u679c<\/p>\n
                                                                                                                                                                                  \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                  root.html\u6587\u4ef6\u5df2\u52a0\u8f7d\u5e76\u6e32\u67d3\u5230\u6307\u5b9a\u4e86ng-view\u6307\u4ee4\u7684DOM\u4e2d\u7684sample.html\u4e2d\u3002<\/p>\n
                                                                                                                                                                                  \u89e3\u91ca<\/h3>\n
                                                                                                                                                                                  \u542f\u7528ngRoute\u6a21\u5757\u3002<\/h4>\n
                                                                                                                                                                                          <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-route.min.js\"<\/span>><\/script><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngRoute<\/span>'<\/span>]);<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  angular-route.min.js \u3092\u8aad\u307f\u8fbc\u307f\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u5b9a\u7fa9\u3059\u308b\u3068\u304d\u306b ‘ngRoute’ \u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                  \u6307\u5b9a\u4e00\u4e2a\u52a8\u6001\u52a0\u8f7d\u7684\u4f4d\u7f6e<\/h4>\n
                                                                                                                                                                                          <div<\/span> ng-view<\/span> class=<\/span>\"border\"<\/span>><\/div><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                  ng-view \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u6307\u5b9a\u3057\u305f DOM \u304c\u3001\u52d5\u7684\u30da\u30fc\u30b8\u5207\u308a\u63db\u3048\u306e\u30bf\u30fc\u30b2\u30c3\u30c8\u3068\u306a\u308b\u3002<\/p>\n
                                                                                                                                                                                  \u4e3a\u6bcf\u4e2aURL\u6307\u5b9a\u8981\u663e\u793a\u7684\u6a21\u677f\u548c\u63a7\u5236\u5668\u3002<\/h4>\n
                                                                                                                                                                                  module<\/span>.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$routeProvider<\/span>)<\/span> {<\/span>\r\n    $routeProvider<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/<\/span>'<\/span>,<\/span> {<\/span>\r\n        controller<\/span>:<\/span> '<\/span>RootController<\/span>'<\/span>,<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>root.html<\/span>'<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>RootController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>message by RootController.<\/span>'<\/span>;<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                    \n
                                                                                                                                                                                  • \n
                                                                                                                                                                                      \u30e2\u30b8\u30e5\u30fc\u30eb\u306e config() \u95a2\u6570\u306b\u5f15\u6570\u3067 $routeProvider \u3092\u53d7\u3051\u53d6\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                      $routeProvider \u306e when() \u30e1\u30bd\u30c3\u30c9\u3067\u3001 URL \u3054\u3068\u306b\u8aad\u307f\u8fbc\u3080\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3092\u6307\u5b9a\u3059\u308b\u3002
                                                                                                                                                                                      \n\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u6307\u5b9a\u306f\u3001\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u95a2\u6570\u3092\u6e21\u3059\u3053\u3068\u3082\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                      \u7ffb\u9875<\/h2>\n
                                                                                                                                                                                      <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-route.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n        <style><\/span>\r\n            .border<\/span> {<\/span>\r\n                border<\/span>:<\/span> 1px<\/span> solid<\/span> red<\/span>;<\/span>\r\n                padding<\/span>:<\/span> 0<\/span> 0<\/span> 10px<\/span> 10px<\/span>;<\/span>\r\n            }<\/span>\r\n        <\/style><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <h1><\/span>sample.html<\/h1><\/span>\r\n        <div<\/span> ng-view<\/span> class=<\/span>\"border\"<\/span>><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngRoute<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$routeProvider<\/span>)<\/span> {<\/span>\r\n    $routeProvider<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/<\/span>'<\/span>,<\/span> {<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>first.html<\/span>'<\/span>\r\n    })<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/next<\/span>'<\/span>,<\/span> {<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>second.html<\/span>'<\/span>\r\n    })<\/span>\r\n    .<\/span>otherwise<\/span>({<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>not-found.html<\/span>'<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      <h1><\/span>First Page<\/h1><\/span>\r\n<a<\/span> href=<\/span>\"#\/next\"<\/span>><\/span>next<\/a><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      <h1><\/span>Second Page<\/h1><\/span>\r\n<a<\/span> href=<\/span>\"#\/\"<\/span>><\/span>back<\/a><\/span>\r\n<a<\/span> href=<\/span>\"#\/aaaa\"<\/span>><\/span>not found<\/a><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      <h1><\/span>Page Not Found<\/h1><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      \u753b\u9762\u5448\u73b0<\/p>\n
                                                                                                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                      \u70b9\u51fb\u94fe\u63a5\u2191<\/p>\n
                                                                                                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                      \u70b9\u51fb\u672a\u627e\u5230<\/p>\n
                                                                                                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                      $routeProvider \u306e when() \u95a2\u6570\u306f\u30e1\u30bd\u30c3\u30c9\u30c1\u30a7\u30fc\u30f3\u304c\u3067\u304d\u308b\u3002
                                                                                                                                                                                      \nURL \u306f Hashbang \u3067\u6307\u5b9a\u3059\u308b\uff08\u305f\u3060\u3057\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306f\u30d0\u30f3\u30b0\u306b\u5f53\u305f\u308b\u90e8\u5206 ! \u304c\u306a\u3044\uff09\u3002<\/p>\n
                                                                                                                                                                                      otherwise() \u95a2\u6570\u3067\u3001\u305d\u306e\u4ed6\u306e URL \u304c\u6307\u5b9a\u3055\u308c\u305f\u5834\u5408\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u5b9a\u7fa9\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                      \u83b7\u53d6URL\u8def\u5f84\u7684\u4e00\u90e8\u5206\u4f5c\u4e3a\u53c2\u6570<\/h2>\n
                                                                                                                                                                                      <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-route.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <div<\/span> ng-view<\/span>><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngRoute<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$routeProvider<\/span>)<\/span> {<\/span>\r\n    $routeProvider<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/:param<\/span>'<\/span>,<\/span> {<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>sub.html<\/span>'<\/span>,<\/span>\r\n        controller<\/span>:<\/span> function<\/span>(<\/span>$scope<\/span>,<\/span> $routeParams<\/span>)<\/span> {<\/span>\r\n            $scope<\/span>.<\/span>paramValue<\/span> =<\/span> $routeParams<\/span>.<\/span>param<\/span>;<\/span>\r\n        }<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      <h1><\/span>param = {{paramValue}}<\/h1><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      \u4f7f\u7528\u6d4f\u89c8\u5668\u8bbf\u95ee http:\/\/localhost\/sample.html#\/hoge\u3002<\/p>\n
                                                                                                                                                                                      \u753b\u9762\u8868\u73b0<\/p>\n
                                                                                                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                      $routeProvider \u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u5b9a\u7fa9\u3059\u308b\u3068\u304d\u306b\u3001 :<\u30d1\u30e9\u30e1\u30fc\u30bf\u540d> \u3068\u3044\u3046\u5f62\u5f0f\u3067\u30d1\u30b9\u3092\u5b9a\u7fa9\u3059\u308b\u3068\u3001\u305d\u306e\u90e8\u5206\u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3067\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002
                                                                                                                                                                                      \n\u30d1\u30b9\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u5f15\u6570\u306b $routeParams \u3092\u5b9a\u7fa9\u3057\u3066\u3001 $routeParams.<\u30d1\u30e9\u30e1\u30fc\u30bf\u540d> \u3067\u53d6\u5f97\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                      \u4e0d\u4f7f\u7528Hashbang<\/h2>\n
                                                                                                                                                                                      <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-route.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <a<\/span> href=<\/span>\"hoge\"<\/span>><\/span>\/angular\/hoge<\/a><\/span>\r\n        <div<\/span> ng-view<\/span>><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngRoute<\/span>'<\/span>])<\/span>\r\n.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$routeProvider<\/span>,<\/span> $locationProvider<\/span>)<\/span> {<\/span>\r\n\r\n    $locationProvider<\/span>.<\/span>html5Mode<\/span>(<\/span>true<\/span>);<\/span>\r\n\r\n    $routeProvider<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/angular\/hoge<\/span>'<\/span>,<\/span> {<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>template.html<\/span>'<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      <h1><\/span>Template<\/h1><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                      \u753b\u9762\u7684\u610f\u601d\u662f\u6307\u901a\u8fc7\u7ed8\u753b\u3001\u6444\u5f71\u6216\u5176\u4ed6\u89c6\u89c9\u5a92\u4ecb\u6765\u8868\u8fbe\u601d\u60f3\u3001\u611f\u60c5\u6216\u573a\u666f\u7684\u65b9\u5f0f\u3002<\/p>\n
                                                                                                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                      \u70b9\u51fb\u4e0b\u9762\u7684\u94fe\u63a5<\/p>\n
                                                                                                                                                                                      \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                        \n
                                                                                                                                                                                      • \n
                                                                                                                                                                                          Hashbang \u3092\u4f7f\u308f\u305a\u306b HTML5 \u306e pushState \u3092\u4f7f\u3063\u3066 URL \u3092\u66f8\u304d\u63db\u3048\u308b\u3088\u3046\u306b\u3059\u308b\u306b\u306f\u3001 $locationProvider \u306e html5Mode() \u30e1\u30bd\u30c3\u30c9\u3067 true \u3092\u6307\u5b9a\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                          when() \u3067\u6307\u5b9a\u3059\u308b\u30eb\u30fc\u30c8\uff08route\uff09\u306f\u3001\u30d9\u30fc\u30b9 URL \u3092\u57fa\u6e96\u3068\u3057\u305f\u7d76\u5bfe\u30d1\u30b9\u3067\u6307\u5b9a\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                          \u7136\u800c\uff0c\u5982\u679c\u5728\u9ede\u64ca\u9023\u7d50\u5f8c\u7684\u756b\u9762\u4e0a\u6309\u4e0b F5\uff0c\u5c07\u6703\u8df3\u8f49\u5230404\u9801\u9762\u3002\u4f3c\u4e4e\u9700\u8981\u9032\u884cmode_rewrite\u7b49\u76f8\u61c9\u7684\u8655\u7406\u3002<\/p>\n
                                                                                                                                                                                            AngularJS\u306eURL\u30ea\u30ed\u30fc\u30c9\u554f\u984c\u3092mod_rewrite\u3067\u5bfe\u5fdc | Web\u30a8\u30f3\u30b8\u30cb\u30a2\u30d6\u30ed\u30b0<\/ul>\n
                                                                                                                                                                                            \u52a8\u6001\u66f4\u6539\u9875\u9762\u6807\u9898<\/h2>\n
                                                                                                                                                                                            <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n  <head><\/span>\r\n    <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"angular-route.min.js\"<\/span>><\/script><\/span>\r\n    <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n\r\n    <title<\/span> ng-bind=<\/span>\"title + ' - Sample'\"<\/span>><\/title><\/span>\r\n  <\/head><\/span>\r\n  <body><\/span>\r\n    <a<\/span> href=<\/span>\"#\/hoge\"<\/span>><\/span>hoge<\/a><\/span>\r\n\r\n    <div<\/span> ng-view<\/span>><\/div><\/span>\r\n  <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                            angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngRoute<\/span>'<\/span>])<\/span>\r\n.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$routeProvider<\/span>)<\/span> {<\/span>\r\n    $routeProvider<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/<\/span>'<\/span>,<\/span> {<\/span>\r\n        title<\/span>:<\/span> '<\/span>Top Page<\/span>'<\/span>,<\/span>\r\n        template<\/span>:<\/span> '<\/span><h1>top<\/h1><\/span>'<\/span>\r\n    })<\/span>\r\n    .<\/span>when<\/span>(<\/span>'<\/span>\/hoge<\/span>'<\/span>,<\/span> {<\/span>\r\n        title<\/span>:<\/span> '<\/span>Hoge Page<\/span>'<\/span>,<\/span>\r\n        template<\/span>:<\/span> '<\/span><h1>hoge<\/h1><\/span>'<\/span>\r\n    });<\/span>\r\n})<\/span>\r\n.<\/span>run<\/span>(<\/span>function<\/span>(<\/span>$rootScope<\/span>)<\/span> {<\/span>\r\n    $rootScope<\/span>.<\/span>$on<\/span>(<\/span>'<\/span>$routeChangeSuccess<\/span>'<\/span>,<\/span> function<\/span>(<\/span>event<\/span>,<\/span> current<\/span>,<\/span> previous<\/span>)<\/span> {<\/span>\r\n        $rootScope<\/span>.<\/span>title<\/span> =<\/span> current<\/span>.<\/span>$$route<\/span>.<\/span>title<\/span>;<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                            \u753b\u9762\u8868\u793a\uff1a\u4ee5\u56fe\u50cf\u7684\u5f62\u5f0f\u6765\u8868\u8fbe\u6216\u5c55\u793a\u3002<\/p>\n
                                                                                                                                                                                            \u6216<\/p>\n
                                                                                                                                                                                            \u753b\u9762\u5c55\u793a\uff1a\u4f7f\u7528\u56fe\u50cf\u5448\u73b0\u6216\u5c55\u793a\u3002<\/p>\n
                                                                                                                                                                                            \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                            \u70b9\u51fb\u4e0b\u65b9\u2193<\/p>\n
                                                                                                                                                                                            \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                            title \u30bf\u30b0\u306b ng-bind \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3067\u30bf\u30a4\u30c8\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                            $routeProvider \u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u5b9a\u7fa9\u3059\u308b\u969b\u3001 when() \u30e1\u30bd\u30c3\u30c9\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3067 title \u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                            module \u306e run() \u30e1\u30bd\u30c3\u30c9\u306e\u4e2d\u3067\u3001 $rootScope.$on(“$routeChangeSuccess”, callback) \u3092\u4f7f\u7528\u3057\u3066\u30bf\u30a4\u30c8\u30eb\u306e\u5909\u66f4\u3092\u53cd\u6620\u3055\u305b\u308b\u3002<\/p>\n
                                                                                                                                                                                            \u53c2\u8003\u7684\u4e1c\u897f<\/p>\n
                                                                                                                                                                                              javascript – How to dynamically change header based on angularjs partial view? – Stack Overflow<\/ul>\n
                                                                                                                                                                                              \u670d\u52a1\u5668\u8bf7\u6c42<\/h1>\n
                                                                                                                                                                                              \u7528\u4e8e\u786e\u8ba4\u64cd\u4f5c\u7684\u670d\u52a1\u5668\u7aef\u5b9e\u65bd<\/h2>\n
                                                                                                                                                                                              package<\/span> sample.angular<\/span>;<\/span>\r\n\r\nimport<\/span> java.io.BufferedReader<\/span>;<\/span>\r\nimport<\/span> java.io.IOException<\/span>;<\/span>\r\nimport<\/span> java.io.PrintWriter<\/span>;<\/span>\r\nimport<\/span> java.io.UnsupportedEncodingException<\/span>;<\/span>\r\nimport<\/span> java.net.URLDecoder<\/span>;<\/span>\r\n\r\nimport<\/span> javax.servlet.ServletException<\/span>;<\/span>\r\nimport<\/span> javax.servlet.annotation.WebServlet<\/span>;<\/span>\r\nimport<\/span> javax.servlet.http.HttpServlet<\/span>;<\/span>\r\nimport<\/span> javax.servlet.http.HttpServletRequest<\/span>;<\/span>\r\nimport<\/span> javax.servlet.http.HttpServletResponse<\/span>;<\/span>\r\n\r\nimport<\/span> org.apache.commons.lang3.text.StrBuilder<\/span>;<\/span>\r\n\r\n@WebServlet<\/span>(<\/span>\"\/ajax\/*\"<\/span>)<\/span>\r\npublic<\/span> class<\/span> SampleServlet<\/span> extends<\/span> HttpServlet<\/span> {<\/span>\r\n    private<\/span> static<\/span> final<\/span> long<\/span> serialVersionUID<\/span> =<\/span> 1L<\/span>;<\/span>\r\n\r\n    @Override<\/span>\r\n    public<\/span> void<\/span> service<\/span>(<\/span>HttpServletRequest<\/span> req<\/span>,<\/span> HttpServletResponse<\/span> res<\/span>)<\/span> throws<\/span> IOException<\/span>,<\/span> ServletException<\/span> {<\/span>\r\n        System<\/span>.<\/span>out<\/span>.<\/span>println<\/span>(<\/span>\"[URL] \"<\/span> +<\/span> req<\/span>.<\/span>getRequestURL<\/span>());<\/span>\r\n        System<\/span>.<\/span>out<\/span>.<\/span>println<\/span>(<\/span>\"[Method] \"<\/span> +<\/span> req<\/span>.<\/span>getMethod<\/span>());<\/span>\r\n        System<\/span>.<\/span>out<\/span>.<\/span>println<\/span>(<\/span>\"[Query String] \"<\/span> +<\/span> req<\/span>.<\/span>getQueryString<\/span>()<\/span> +<\/span> \" \"<\/span> +<\/span> this<\/span>.<\/span>decodeQueryString<\/span>(<\/span>req<\/span>));<\/span>\r\n        System<\/span>.<\/span>out<\/span>.<\/span>println<\/span>(<\/span>\"[Request Body]\"<\/span>);<\/span>\r\n        System<\/span>.<\/span>out<\/span>.<\/span>println<\/span>(<\/span>this<\/span>.<\/span>getRequestBody<\/span>(<\/span>req<\/span>));<\/span>\r\n\r\n        String<\/span> message<\/span>;<\/span>\r\n\r\n        if<\/span> (<\/span>req<\/span>.<\/span>getRequestURI<\/span>().<\/span>contains<\/span>(<\/span>\"error\"<\/span>))<\/span> {<\/span>\r\n            res<\/span>.<\/span>sendError<\/span>(<\/span>HttpServletResponse<\/span>.<\/span>SC_INTERNAL_SERVER_ERROR<\/span>);<\/span>\r\n            message<\/span> =<\/span> \"Error!!\"<\/span>;<\/span>\r\n        }<\/span> else<\/span> {<\/span>\r\n            res<\/span>.<\/span>setStatus<\/span>(<\/span>HttpServletResponse<\/span>.<\/span>SC_OK<\/span>);<\/span>\r\n            message<\/span> =<\/span> \"Success!!\"<\/span>;<\/span>\r\n        }<\/span>\r\n\r\n        if<\/span> (<\/span>Boolean<\/span>.<\/span>valueOf<\/span>(<\/span>req<\/span>.<\/span>getParameter<\/span>(<\/span>\"array\"<\/span>)))<\/span> {<\/span>\r\n            this<\/span>.<\/span>writeResponseAsArray<\/span>(<\/span>res<\/span>,<\/span> message<\/span>);<\/span>\r\n        }<\/span> else<\/span> {<\/span>\r\n            this<\/span>.<\/span>writeResponseAsObject<\/span>(<\/span>res<\/span>,<\/span> message<\/span>);<\/span>\r\n        }<\/span>\r\n    }<\/span>\r\n\r\n    private<\/span> StrBuilder<\/span> getRequestBody<\/span>(<\/span>HttpServletRequest<\/span> req<\/span>)<\/span> throws<\/span> IOException<\/span> {<\/span>\r\n        StrBuilder<\/span> sb<\/span> =<\/span> new<\/span> StrBuilder<\/span>();<\/span>\r\n\r\n        try<\/span> (<\/span>BufferedReader<\/span> br<\/span> =<\/span> req<\/span>.<\/span>getReader<\/span>())<\/span> {<\/span>\r\n            String<\/span> line<\/span>;<\/span>\r\n            while<\/span> ((<\/span>line<\/span> =<\/span> br<\/span>.<\/span>readLine<\/span>())<\/span> !=<\/span> null<\/span>)<\/span> {<\/span>\r\n                sb<\/span>.<\/span>appendln<\/span>(<\/span>line<\/span>);<\/span>\r\n            }<\/span>\r\n        }<\/span>\r\n\r\n        return<\/span> sb<\/span>;<\/span>\r\n    }<\/span>\r\n\r\n    private<\/span> String<\/span> decodeQueryString<\/span>(<\/span>HttpServletRequest<\/span> req<\/span>)<\/span> throws<\/span> UnsupportedEncodingException<\/span> {<\/span>\r\n        if<\/span> (<\/span>req<\/span>.<\/span>getQueryString<\/span>()<\/span> !=<\/span> null<\/span>)<\/span> {<\/span>\r\n            return<\/span> \"(\"<\/span> +<\/span> URLDecoder<\/span>.<\/span>decode<\/span>(<\/span>req<\/span>.<\/span>getQueryString<\/span>(),<\/span> \"UTF-8\"<\/span>)<\/span> +<\/span> \")\"<\/span>;<\/span>\r\n        }<\/span> else<\/span> {<\/span>\r\n            return<\/span> \"\"<\/span>;<\/span>\r\n        }<\/span>\r\n    }<\/span>\r\n\r\n    private<\/span> void<\/span> writeResponseAsObject<\/span>(<\/span>HttpServletResponse<\/span> res<\/span>,<\/span> String<\/span> message<\/span>)<\/span> throws<\/span> IOException<\/span> {<\/span>\r\n        this<\/span>.<\/span>writeResponse<\/span>(<\/span>res<\/span>,<\/span> String<\/span>.<\/span>format<\/span>(<\/span>\"{\\\\\"<\/span>message<\/span>\\\\<\/span>\": \\\\\"<\/span>%<\/span>s<\/span>\\\\<\/span>\"}\"<\/span>,<\/span> message<\/span>));<\/span>\r\n    }<\/span>\r\n\r\n    private<\/span> void<\/span> writeResponseAsArray<\/span>(<\/span>HttpServletResponse<\/span> res<\/span>,<\/span> String<\/span> message<\/span>)<\/span> throws<\/span> IOException<\/span> {<\/span>\r\n        this<\/span>.<\/span>writeResponse<\/span>(<\/span>res<\/span>,<\/span> \"[\"<\/span> +<\/span> message<\/span> +<\/span> \"]\"<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    private<\/span> void<\/span> writeResponse<\/span>(<\/span>HttpServletResponse<\/span> res<\/span>,<\/span> String<\/span> text<\/span>)<\/span> throws<\/span> IOException<\/span> {<\/span>\r\n        try<\/span> (<\/span>PrintWriter<\/span> writer<\/span> =<\/span> res<\/span>.<\/span>getWriter<\/span>())<\/span> {<\/span>\r\n            writer<\/span>.<\/span>println<\/span>(<\/span>text<\/span>);<\/span>\r\n        }<\/span>\r\n        res<\/span>.<\/span>flushBuffer<\/span>();<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              \/ajax\/ \u3067\u59cb\u307e\u308b URI \u306b\u30a2\u30af\u30bb\u30b9\u304c\u3042\u3063\u305f\u5834\u5408\u306b\u3001\u305d\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u60c5\u5831\u3092\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u51fa\u529b\u3059\u308b\u3002
                                                                                                                                                                                              \nURL \u306b error \u304c\u542b\u307e\u308c\u308b\u5834\u5408\u306f\u3001 Internal Server Error \u3092\u8fd4\u3059\u3002
                                                                                                                                                                                              \n\u30ea\u30af\u30a8\u30b9\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u306b array=true \u304c\u542b\u307e\u308c\u308b\u5834\u5408\u306f\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u914d\u5217\u5f62\u5f0f\u306e JSON \u306b\u3059\u308b\u3002\u305d\u308c\u4ee5\u5916\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5f62\u5f0f\u306e JSON \u3002<\/p>\n
                                                                                                                                                                                              \u57fa\u672c<\/h2>\n
                                                                                                                                                                                              <html<\/span> ng-app<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <pre><\/span>{{response | json}}<\/pre><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              function<\/span> SampleController<\/span>(<\/span>$scope<\/span>,<\/span> $http<\/span>)<\/span> {<\/span>\r\n    var<\/span> uri<\/span> =<\/span> '<\/span>ajax\/test<\/span>'<\/span>;<\/span>\r\n    var<\/span> param<\/span> =<\/span> {<\/span>params<\/span>:<\/span> {<\/span>hoge<\/span>:<\/span> '<\/span>HOGE<\/span>'<\/span>,<\/span> fuga<\/span>:<\/span> '<\/span>\u3075\u304c<\/span>'<\/span>}};<\/span>\r\n\r\n    $http<\/span>.<\/span>get<\/span>(<\/span>uri<\/span>,<\/span> param<\/span>)<\/span>\r\n         .<\/span>success<\/span>(<\/span>function<\/span>(<\/span>data<\/span>,<\/span> status<\/span>,<\/span> headers<\/span>,<\/span> config<\/span>)<\/span> {<\/span>\r\n             log<\/span>(<\/span>'<\/span>success<\/span>'<\/span>,<\/span> data<\/span>,<\/span> status<\/span>,<\/span> headers<\/span>,<\/span> config<\/span>);<\/span>\r\n         })<\/span>\r\n         .<\/span>error<\/span>(<\/span>function<\/span>(<\/span>data<\/span>,<\/span> status<\/span>,<\/span> headers<\/span>,<\/span> config<\/span>)<\/span> {<\/span>\r\n             log<\/span>(<\/span>'<\/span>error<\/span>'<\/span>,<\/span> data<\/span>,<\/span> status<\/span>,<\/span> headers<\/span>,<\/span> config<\/span>);<\/span>\r\n         });<\/span>\r\n\r\n    function<\/span> log<\/span>(<\/span>type<\/span>,<\/span> data<\/span>,<\/span> status<\/span>,<\/span> headers<\/span>,<\/span> config<\/span>)<\/span> {<\/span>\r\n        $scope<\/span>.<\/span>response<\/span> =<\/span> {<\/span>\r\n            type<\/span>:<\/span> type<\/span>,<\/span>\r\n            data<\/span>:<\/span> data<\/span>,<\/span>\r\n            status<\/span>:<\/span> status<\/span>,<\/span>\r\n            headers<\/span>:<\/span> headers<\/span>,<\/span>\r\n            config<\/span>:<\/span> config<\/span>\r\n        };<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              \u5c06\u4e0a\u8ff0\u6587\u4ef6\u90e8\u7f72\u5230Tomcat\u4e2d\uff0c\u4ee5angular\u4f5c\u4e3a\u4e0a\u4e0b\u6587\u8def\u5f84\uff0c\u5e76\u5728Web\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95eehttp:\/\/localhost:8080\/angular\/sample.html\u3002<\/p>\n
                                                                                                                                                                                              \u753b\u9762\u5448\u73b0<\/p>\n
                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                              \u670d\u52a1\u5668\u63a7\u5236\u53f0\u8f93\u51fa<\/p>\n
                                                                                                                                                                                              [URL] http:\/\/localhost:8080\/angular\/ajax\/test\r\n[Method] GET\r\n[Query String] fuga=%E3%81%B5%E3%81%8C&hoge=HOGE (fuga=\u3075\u304c&hoge=HOGE)\r\n[Request Body]\r\n<\/code><\/pre>\n
                                                                                                                                                                                              $http \u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3084\u30b5\u30fc\u30d3\u30b9\u306b\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                              $http \u306b\u306f\u30b5\u30fc\u30d0\u30fc\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u98db\u3070\u3059\u305f\u3081\u306e\u30e1\u30bd\u30c3\u30c9\uff08HTTP \u306e\u30e1\u30bd\u30c3\u30c9\u3068\u5bfe\u5fdc\u3057\u3066\u3044\u308b\uff09\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u3002
                                                                                                                                                                                              \n\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u8fd4\u3055\u308c\u305f\u6587\u5b57\u5217\u304c JSON \u5f62\u5f0f\u306e\u5834\u5408\u3001\u81ea\u52d5\u7684\u306b\u30c7\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u3055\u308c\u308b\u3002<\/p>\n
                                                                                                                                                                                              \u751f\u6210\u4e00\u4e2a\u7528\u4e8e\u64cd\u4f5c REST \u8d44\u6e90\u7684\u7c7b<\/h2>\n
                                                                                                                                                                                              <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"angular-resource.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngResource<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$resource<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n    var<\/span> Res<\/span> =<\/span> $resource<\/span>(<\/span>'<\/span>ajax\/res<\/span>'<\/span>);<\/span>\r\n\r\n    Res<\/span>.<\/span>get<\/span>().<\/span>$promise<\/span>\r\n    .<\/span>then<\/span>(<\/span>function<\/span>()<\/span> {<\/span>\r\n        return<\/span> Res<\/span>.<\/span>save<\/span>().<\/span>$promise<\/span>;<\/span>\r\n    })<\/span>\r\n    .<\/span>then<\/span>(<\/span>function<\/span>()<\/span> {<\/span>\r\n        return<\/span> Res<\/span>.<\/span>delete<\/span>().<\/span>$promise<\/span>;<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              [URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] GET\r\n[Query String] null\r\n[Request Body]\r\n\r\n[URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] POST\r\n[Query String] null\r\n[Request Body]\r\n\r\n[URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] DELETE\r\n[Query String] null\r\n[Request Body]\r\n<\/code><\/pre>\n
                                                                                                                                                                                              ngResource \u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u6709\u52b9\u306b\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                              $resource \u95a2\u6570\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u6307\u5b9a\u3057\u305f URL \u306b\u57fa\u672c\u7684\u306a REST \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u6301\u3063\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u8fd4\u3055\u308c\u308b\u3002<\/p>\n
                                                                                                                                                                                              $resource \u95a2\u6570\u304c\u8fd4\u3059\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092 \u30ea\u30bd\u30fc\u30b9\u30af\u30e9\u30b9 \u3002\u30ea\u30bd\u30fc\u30b9\u30af\u30e9\u30b9\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b REST \u30ea\u30af\u30a8\u30b9\u30c8\u7528\u306e\u30e1\u30bd\u30c3\u30c9\u3092 \u30a2\u30af\u30b7\u30e7\u30f3 \u3068\u547c\u3076\u3002<\/p>\n
                                                                                                                                                                                              \u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5728\u8d44\u6e90\u7c7b\u4e2d\u5b9a\u4e49\u7684\u64cd\u4f5c\u65b9\u6cd5<\/h3>\n
                                                                                                                                                                                              \n
                                                                                                                                                                                              \u30e1\u30bd\u30c3\u30c9\u540d\u5bfe\u5fdc\u3059\u308b HTTP \u30e1\u30bd\u30c3\u30c9\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u8fd4\u3055\u308c\u308b\u3053\u3068\u3092\u671f\u5f85\u3057\u3066\u3044\u308b JSON \u306e\u578bget<\/code>GET<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8save<\/code>POST<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8query<\/code>GET<\/code>\u914d\u5217remove<\/code>DELETE<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8delete<\/code>DELETE<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8<\/div>\n<\/div>\n
                                                                                                                                                                                              \u8d44\u6e90\u7c7b\u52a8\u4f5c\u65b9\u6cd5\u7684\u53c2\u6570<\/h3>\n
                                                                                                                                                                                              \u5982\u679c\u662fGET\u8bf7\u6c42<\/h4>\n
                                                                                                                                                                                              Resource.action([parameters], [success], [error])\r\n<\/code><\/pre>\n
                                                                                                                                                                                              Res<\/span>.<\/span>get<\/span>({<\/span>a<\/span>:<\/span> 10<\/span>},<\/span> function<\/span>()<\/span> {<\/span>\/*success*\/<\/span>},<\/span> function<\/span>()<\/span> {<\/span>\/*error*\/<\/span>});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              \u5982\u679c\u4e0d\u662f GET \u8bf7\u6c42\u7684\u60c5\u51b5\u4e0b<\/h4>\n
                                                                                                                                                                                              Resource.action([parameters], postData, [success], [error]);\r\n<\/code><\/pre>\n
                                                                                                                                                                                              Res<\/span>.<\/span>save<\/span>({<\/span>a<\/span>:<\/span> 11<\/span>},<\/span> {<\/span>b<\/span>:<\/span> '<\/span>Bbb<\/span>'<\/span>},<\/span> function<\/span>()<\/span> {<\/span>\/*success*\/<\/span>},<\/span> function<\/span>()<\/span> {<\/span>\/*error*\/<\/span>});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              \u5c06\u53c2\u6570\u5d4c\u5165\u8bf7\u6c42\u8def\u5f84\u4e2d\u3002<\/h3>\n
                                                                                                                                                                                              var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngResource<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$resource<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n    var<\/span> Res<\/span> =<\/span> $resource<\/span>(<\/span>'<\/span>ajax\/res\/:hoge\/:fuga\/:piyo<\/span>'<\/span>,<\/span> {<\/span>hoge<\/span>:<\/span> '<\/span>Hoge<\/span>'<\/span>});<\/span>\r\n\r\n    Res<\/span>.<\/span>get<\/span>({<\/span>fuga<\/span>:<\/span> '<\/span>Fuga<\/span>'<\/span>});<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              [URL] http:\/\/localhost:8080\/angular\/ajax\/res\/Hoge\/Fuga\r\n[Method] GET\r\n[Query String] null\r\n[Request Body]\r\n<\/code><\/pre>\n
                                                                                                                                                                                              $resource \u95a2\u6570\u306e URL \u306b :<\u30d1\u30e9\u30e1\u30fc\u30bf\u540d> \u3068\u3044\u3046\u66f8\u5f0f\u3067\u30d1\u30b9\u3092\u66f8\u304f\u3068\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u6642\u306b\u5024\u3092\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                              $resource \u95a2\u6570\u306e\u7b2c\u4e8c\u5f15\u6570\u3067\u3001\u30d1\u30e9\u30e1\u30fc\u30bf\u306b\u57cb\u3081\u8fbc\u3080\u5024\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092\u6307\u5b9a\u3067\u304d\u308b\uff08\u524d\u8ff0\u306e\u4f8b\u306e :hoge\uff09\u3002
                                                                                                                                                                                              \n\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u5b9a\u7fa9\u3057\u305f\u3082\u306e\u306e\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u6642\u306b\u5024\u3092\u6307\u5b9a\u3057\u306a\u304b\u3063\u305f\u5834\u5408\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u306e URL \u304b\u3089\u305d\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u90e8\u5206\u306f\u9664\u53bb\u3055\u308c\u308b\uff08\u524d\u8ff0\u306e\u4f8b\u306e :piyo\uff09\u3002<\/p>\n
                                                                                                                                                                                              \u5c06\u53c2\u6570\u5d4c\u5165\u8bf7\u6c42\u6570\u636e\u4e2d\u3002<\/h4>\n
                                                                                                                                                                                              var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngResource<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$resource<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n    var<\/span> Res<\/span> =<\/span> $resource<\/span>(<\/span>'<\/span>ajax\/res\/:hoge\/:fuga<\/span>'<\/span>,<\/span> {<\/span>hoge<\/span>:<\/span> '<\/span>@hoge<\/span>'<\/span>,<\/span> fuga<\/span>:<\/span> '<\/span>@fuga<\/span>'<\/span>});<\/span>\r\n\r\n    var<\/span> param<\/span> =<\/span> {<\/span>hoge<\/span>:<\/span> '<\/span>HOGE<\/span>'<\/span>};<\/span>\r\n    var<\/span> postData<\/span> =<\/span> {<\/span>hoge<\/span>:<\/span> '<\/span>Hoge<\/span>'<\/span>,<\/span> fuga<\/span>:<\/span> '<\/span>Fuga<\/span>'<\/span>};<\/span>\r\n\r\n    Res<\/span>.<\/span>save<\/span>(<\/span>param<\/span>,<\/span> postData<\/span>);<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                              [URL] http:\/\/localhost:8080\/angular\/ajax\/res\/HOGE\/Fuga\r\n[Method] POST\r\n[Query String] null\r\n[Request Body]\r\n{\"hoge\":\"Hoge\",\"fuga\":\"Fuga\"}\r\n<\/code><\/pre>\n
                                                                                                                                                                                                \n
                                                                                                                                                                                              • \n
                                                                                                                                                                                                  \u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306e\u5148\u982d\u306b @ \u3092\u3064\u3051\u308b\u3068\u3001\u305d\u306e\u5024\u3092\u30ea\u30af\u30a8\u30b9\u30c8\u30c7\u30fc\u30bf\u304b\u3089\u53d6\u5f97\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                   <\/p>\n
                                                                                                                                                                                                    \n
                                                                                                                                                                                                  • \n
                                                                                                                                                                                                      \u305f\u3060\u3057\u3001\u57cb\u3081\u8fbc\u307f\u30d1\u30e9\u30e1\u30fc\u30bf\uff08\u7b2c\u4e00\u5f15\u6570\uff09\u3067\u540c\u3058\u540d\u524d\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u305d\u3061\u3089\u304c\u512a\u5148\u3055\u308c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                       <\/p>\n
                                                                                                                                                                                                        \u4e3b\u306b\u975e GET \u30e1\u30bd\u30c3\u30c9\u3067\u6709\u7528\u3002<\/ul>\n
                                                                                                                                                                                                        \u5728\u64cd\u4f5c\u65b9\u6cd5\u7684\u6210\u529f\u51fd\u6570\u4e2d\uff0c\u63a5\u6536\u8d44\u6e90\u7c7b\u7684\u5b9e\u4f8b\u3002<\/h3>\n
                                                                                                                                                                                                        var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngResource<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$resource<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n    var<\/span> Res<\/span> =<\/span> $resource<\/span>(<\/span>'<\/span>ajax\/res<\/span>'<\/span>);<\/span>\r\n\r\n    Res<\/span>.<\/span>get<\/span>(<\/span>function<\/span>(<\/span>res<\/span>)<\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>(res instanceof Res) = <\/span>'<\/span> +<\/span> (<\/span>res<\/span> instanceof<\/span> Res<\/span>));<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>res.message = <\/span>'<\/span> +<\/span> res<\/span>.<\/span>message<\/span>);<\/span>\r\n        res<\/span>.<\/span>hoge<\/span> =<\/span> '<\/span>HOGE<\/span>'<\/span>;<\/span>\r\n        res<\/span>.<\/span>$save<\/span>();<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                        (res instanceof Res) = true\r\nres.message = Success!!\r\n<\/code><\/pre>\n
                                                                                                                                                                                                        [URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] GET\r\n[Query String] null\r\n[Request Body]\r\n\r\n[URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] POST\r\n[Query String] null\r\n[Request Body]\r\n{\"message\":\"Success!!\",\"hoge\":\"HOGE\"}\r\n<\/code><\/pre>\n
                                                                                                                                                                                                          \n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                            \u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\u306e success \u95a2\u6570\u306e\u5f15\u6570\u3067\u3001\u30ea\u30bd\u30fc\u30b9\u30af\u30e9\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\uff08 \u30ea\u30bd\u30fc\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9 \uff09\u304c\u53d6\u5f97\u3067\u304d\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                             <\/p>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                            • \n
                                                                                                                                                                                                                \u30ea\u30bd\u30fc\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u8fd4\u3055\u308c\u305f JSON \u304c\u30c7\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u3055\u308c\u3066\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                 <\/p>\n
                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                • \n
                                                                                                                                                                                                                    \u30ea\u30bd\u30fc\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u306f\u3001 $ \u59cb\u307e\u308a\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\uff08$save \u306a\u3069\uff09\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                     <\/p>\n
                                                                                                                                                                                                                      \u30ea\u30bd\u30fc\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u30c7\u30fc\u30bf\u306b\u30ea\u30bd\u30fc\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u6301\u3064\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u8a2d\u5b9a\u3055\u308c\u308b\u3002<\/ul>\n
                                                                                                                                                                                                                      \u987a\u4fbf\u63d0\u4e00\u4e0b\uff0c\u52a8\u4f5c\u65b9\u6cd5\u8fd4\u56de\u7684\u662f\u4e0e\u6210\u529f\u65f6\u4f20\u9012\u7684\u76f8\u540c\u8d44\u6e90\u5b9e\u4f8b\u3002<\/p>\n
                                                                                                                                                                                                                      var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngResource<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$resource<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n    var<\/span> Res<\/span> =<\/span> $resource<\/span>(<\/span>'<\/span>ajax\/res<\/span>'<\/span>);<\/span>\r\n\r\n    var<\/span> a<\/span>;<\/span>\r\n\r\n    var<\/span> b<\/span> =<\/span> Res<\/span>.<\/span>get<\/span>(<\/span>function<\/span>(<\/span>res<\/span>)<\/span> {<\/span>\r\n        a<\/span> =<\/span> res<\/span>;<\/span>\r\n    });<\/span>\r\n\r\n    b<\/span>.<\/span>$promise<\/span>.<\/span>then<\/span>(<\/span>function<\/span>()<\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>a<\/span> ===<\/span> b<\/span>);<\/span> \/\/ true<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                      • \n
                                                                                                                                                                                                                          \u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\uff08 get() \uff09\u306e\u623b\u308a\u5024\uff08 b \uff09\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\u304c\u5b9f\u884c\u3055\u308c\u305f\u76f4\u5f8c\u306f\u7a7a\u306e\u72b6\u614b\u3067\u751f\u6210\u3055\u308c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                           <\/p>\n
                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                              \u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u5e30\u3063\u3066\u304d\u305f\u3089\u3001\u305d\u306e\u3068\u304d\u623b\u308a\u5024\u306b\u5024\u304c\u30bb\u30c3\u30c8\u3055\u308c\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                               <\/p>\n
                                                                                                                                                                                                                                \u3053\u306e\u4ed5\u7d44\u307f\u3092\u5229\u7528\u3059\u308b\u3068\u3001\u5358\u7d14\u306b\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u975e\u540c\u671f\u3067\u53d6\u5f97\u3057\u305f\u5024\u3092\u753b\u9762\u306b\u63cf\u753b\u3059\u308b\u3060\u3051\u306a\u3089\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u66f8\u304f\u5fc5\u8981\u304c\u306a\u304f\u306a\u308b\uff08\u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\u306e\u623b\u308a\u5024\u3092\u3001\u305d\u306e\u307e\u307e $scope \u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u30bb\u30c3\u30c8\u3057\u3066\u3057\u307e\u3048\u3070\u3001\u3042\u3068\u306f AngularJS \u304c\u5024\u306e\u5909\u66f4\u3092\u76e3\u8996\u3057\u3001\u5024\u304c\u30bb\u30c3\u30c8\u3055\u308c\u305f\u6642\u70b9\u3067\u8868\u793a\u3092\u66f4\u65b0\u3057\u3066\u304f\u308c\u308b\uff09\u3002<\/ul>\n
                                                                                                                                                                                                                                \u8d44\u6e90\u5b9e\u4f8b\u7684\u52a8\u4f5c\u65b9\u6cd5\u53c2\u6570<\/h4>\n
                                                                                                                                                                                                                                instance.$action([parameters], [success], [error]);\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                res<\/span>.<\/span>$save<\/span>({<\/span>a<\/span>:<\/span> 11<\/span>},<\/span> function<\/span>()<\/span> {<\/span>\/*success*\/<\/span>},<\/span> function<\/span>()<\/span> {<\/span>\/*error*\/<\/span>});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                \u5b9a\u4e49\u4e00\u4e2a\u81ea\u5df1\u7684\u52a8\u4f5c\u65b9\u6cd5<\/h3>\n
                                                                                                                                                                                                                                var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [<\/span>'<\/span>ngResource<\/span>'<\/span>]);<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$resource<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n    var<\/span> Res<\/span> =<\/span> $resource<\/span>(<\/span>'<\/span>ajax\/res<\/span>'<\/span>,<\/span> {},<\/span> {<\/span>myAction<\/span>:<\/span> {<\/span>method<\/span>:<\/span> '<\/span>PUT<\/span>'<\/span>}});<\/span>\r\n\r\n    Res<\/span>.<\/span>myAction<\/span>(<\/span>function<\/span>(<\/span>res<\/span>)<\/span> {<\/span>\r\n        res<\/span>.<\/span>$myAction<\/span>();<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                [URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] PUT\r\n[Query String] null\r\n[Request Body]\r\n\r\n[URL] http:\/\/localhost:8080\/angular\/ajax\/res\r\n[Method] PUT\r\n[Query String] null\r\n[Request Body]\r\n{\"message\":\"Success!!\"}\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                $resource \u95a2\u6570\u306e\u7b2c\u4e09\u5f15\u6570\u3067\u72ec\u81ea\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3067\u304d\u308b\u3002
                                                                                                                                                                                                                                \n\u30a2\u30af\u30b7\u30e7\u30f3\u30e1\u30bd\u30c3\u30c9\u306e\u5b9a\u7fa9\u3067\u6307\u5b9a\u3067\u304d\u308b\u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u3064\u3044\u3066\u306f API \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u3092\u53c2\u7167\u3002<\/p>\n
                                                                                                                                                                                                                                \u5b9a\u4e49\u62e6\u622a\u5668<\/h2>\n
                                                                                                                                                                                                                                <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                var<\/span> module<\/span> =<\/span> angular<\/span>.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> []);<\/span>\r\n\r\nmodule<\/span>.<\/span>config<\/span>(<\/span>function<\/span>(<\/span>$httpProvider<\/span>)<\/span> {<\/span>\r\n    $httpProvider<\/span>.<\/span>interceptors<\/span>.<\/span>push<\/span>(<\/span>function<\/span>(<\/span>$q<\/span>)<\/span> {<\/span>\r\n        return<\/span> {<\/span>\r\n            request<\/span>:<\/span> function<\/span>(<\/span>config<\/span>)<\/span> {<\/span>\r\n                console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>request : <\/span>'<\/span> +<\/span> config<\/span>.<\/span>url<\/span>);<\/span>\r\n                return<\/span> config<\/span> ||<\/span> $q<\/span>.<\/span>when<\/span>(<\/span>config<\/span>);<\/span>\r\n            },<\/span>\r\n\r\n            requestError<\/span>:<\/span> function<\/span>(<\/span>rejection<\/span>)<\/span> {<\/span>\r\n                console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>requestError<\/span>'<\/span>);<\/span>\r\n                return<\/span> $q<\/span>.<\/span>reject<\/span>(<\/span>rejection<\/span>);<\/span>\r\n            },<\/span>\r\n\r\n            response<\/span>:<\/span> function<\/span>(<\/span>response<\/span>)<\/span> {<\/span>\r\n                console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>response : <\/span>'<\/span> +<\/span> response<\/span>.<\/span>config<\/span>.<\/span>url<\/span>);<\/span>\r\n                return<\/span> response<\/span> ||<\/span> $q<\/span>.<\/span>when<\/span>(<\/span>response<\/span>);<\/span>\r\n            },<\/span>\r\n\r\n            responseError<\/span>:<\/span> function<\/span>(<\/span>rejection<\/span>)<\/span> {<\/span>\r\n                console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>responseError : <\/span>'<\/span> +<\/span> rejection<\/span>.<\/span>config<\/span>.<\/span>url<\/span>);<\/span>\r\n                return<\/span> $q<\/span>.<\/span>reject<\/span>(<\/span>rejection<\/span>);<\/span>\r\n            }<\/span>\r\n        };<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n\r\nmodule<\/span>.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$http<\/span>,<\/span> $q<\/span>)<\/span> {<\/span>\r\n\r\n    $q<\/span>.<\/span>when<\/span>(<\/span>$http<\/span>.<\/span>get<\/span>(<\/span>'<\/span>ajax\/success<\/span>'<\/span>))<\/span>\r\n    .<\/span>then<\/span>(<\/span>success<\/span>,<\/span> error<\/span>)<\/span>\r\n    .<\/span>then<\/span>(<\/span>function<\/span>()<\/span> {<\/span>\r\n        return<\/span> $http<\/span>.<\/span>get<\/span>(<\/span>'<\/span>ajax\/error<\/span>'<\/span>);<\/span>\r\n    })<\/span>\r\n    .<\/span>then<\/span>(<\/span>success<\/span>,<\/span> error<\/span>);<\/span>\r\n\r\n    function<\/span> success<\/span>()<\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>success<\/span>'<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    function<\/span> error<\/span>()<\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error<\/span>'<\/span>);<\/span>\r\n    }<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                request : ajax\/success\r\nresponse : ajax\/success\r\nsuccess\r\nrequest : ajax\/error\r\nresponseError : ajax\/error\r\nerror\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                $httpProvider.interceptors \u306b\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306e\u30d5\u30a1\u30af\u30c8\u30ea\u30fc\u95a2\u6570\u3092 push \u3059\u308b\u3002
                                                                                                                                                                                                                                \n\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306b\u306f\u3001\u4ee5\u4e0b\u306e\uff14\u3064\u306e\u95a2\u6570\u3092\u5b9a\u7fa9\u3067\u304d\u308b<\/p>\n
                                                                                                                                                                                                                                request\uff1a\u30ea\u30af\u30a8\u30b9\u30c8\u9001\u4fe1\u524d\u306b\u51e6\u7406\u3092\u631f\u3080\u3002<\/p>\n
                                                                                                                                                                                                                                requestError\uff1a\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u9001\u4fe1\u306b\u5931\u6557\u3057\u305f\u5834\u5408\u306b\u51e6\u7406\u3092\u631f\u3080\u3002<\/p>\n
                                                                                                                                                                                                                                response\uff1a\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u53d7\u3051\u53d6\u3063\u305f\u76f4\u5f8c\u306b\u51e6\u7406\u3092\u631f\u3080\u3002<\/p>\n
                                                                                                                                                                                                                                responseError\uff1a\u30a8\u30e9\u30fc\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u53d7\u3051\u53d6\u3063\u305f\u76f4\u5f8c\u306b\u51e6\u7406\u3092\u631f\u3080\u3002<\/p>\n
                                                                                                                                                                                                                                ver1.1.3 \u307e\u3067\u306f \u5225\u306e\u65b9\u6cd5 \u3067\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u5b9f\u88c5\u3057\u3066\u3044\u305f\u3088\u3046\u3060\u304c\u3001 1.1.4 \u304b\u3089\u306f\u975e\u63a8\u5968\u306b\u306a\u3063\u3066\u3044\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                \u5b9a\u4e49\u81ea\u5df1\u7684\u6307\u4ee4<\/h1>\n
                                                                                                                                                                                                                                \u57fa\u672c (j\u012b<\/h2>\n
                                                                                                                                                                                                                                <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1<\/span> my-hoge<\/span>><\/span>some string<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myHoge<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        template<\/span>:<\/span> '<\/span><u>message = {{message}}<\/u><\/span>'<\/span>\r\n    };<\/span>\r\n})<\/span>\r\n.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>hoge<\/span>'<\/span>;<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                \u753b\u9762\u8868\u660e<\/p>\n
                                                                                                                                                                                                                                \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                                • \n
                                                                                                                                                                                                                                    \u30e2\u30b8\u30e5\u30fc\u30eb\u306e directive() \u30e1\u30bd\u30c3\u30c9\u3067\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u5b9a\u7fa9\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                    directive() \u30e1\u30bd\u30c3\u30c9\u306b\u306f\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u540d\u524d\u3068\u30d5\u30a1\u30af\u30c8\u30ea\u95a2\u6570\u3092\u6e21\u3059\u3002
                                                                                                                                                                                                                                    \n\u30d5\u30a1\u30af\u30c8\u30ea\u95a2\u6570\u306f\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u8a2d\u5b9a\u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3059\u3088\u3046\u306b\u3059\u308b\u3002
                                                                                                                                                                                                                                    \n\u7279\u306b\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u3001\u5b9a\u7fa9\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306f\u30bf\u30b0\u306e\u5c5e\u6027\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                    template \u306f\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u8a2d\u5b9a\u3057\u305f\u30bf\u30b0\u306e\u5185\u5bb9\u3092\u3001\u6307\u5b9a\u3057\u305f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u6587\u5b57\u5217\u3067\u7f6e\u304d\u63db\u3048\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                    \u5173\u4e8e\u6307\u4ee4\u540d\u79f0<\/h3>\n
                                                                                                                                                                                                                                    <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <h1<\/span> my-hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> my:hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> my_hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> data-my-hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> data-my:hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> data-my_hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> x-my-hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> x-my:hoge<\/span>><\/span>some string<\/h1><\/span>\r\n        <h1<\/span> x-my_hoge<\/span>><\/span>some string<\/h1><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                    \u89c6\u89c9\u56fe\u50cf\u8868\u8ff0<\/p>\n
                                                                                                                                                                                                                                    \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                                    • \n
                                                                                                                                                                                                                                        \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u540d\u524d\u306f\u3001\u5b9a\u7fa9\u306e\u6642\u70b9\u3067\u306f camelCase \u3067\u8a18\u8ff0\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                         <\/p>\n
                                                                                                                                                                                                                                          \n
                                                                                                                                                                                                                                        • \n
                                                                                                                                                                                                                                            \u5b9f\u969b\u306b\u4f7f\u7528\u3059\u308b\u3068\u304d\u306f\u3001\u57fa\u672c\u306f\u30cf\u30a4\u30d5\u30f3 – \u7e4b\u304e\u306e\u5168\u3066\u5c0f\u6587\u5b57\u3067\u6307\u5b9a\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                             <\/p>\n
                                                                                                                                                                                                                                              \u305f\u3060\u3057\u3001 HTML5 \u306a\u3069\u306e\u4ed5\u69d8\u306b\u5408\u308f\u305b\u308b\u305f\u3081\u3001 data- \u306a\u3069\u306e\u63a5\u982d\u8f9e\u3092\u4ed8\u3051\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u3002<\/ul>\n
                                                                                                                                                                                                                                              \u6539\u53d8\u6307\u4ee4\u7684\u5f62\u5f0f<\/h2>\n
                                                                                                                                                                                                                                              <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <my-hoge><\/my-hoge><\/span>\r\n        <h1<\/span> my-fuga<\/span>><\/h1><\/span>\r\n        <h1<\/span> class=<\/span>my-piyo<\/span>><\/h1><\/span>\r\n        <h2<\/span> my-piyo<\/span>><\/h2><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myHoge<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        restrict<\/span>:<\/span> '<\/span>E<\/span>'<\/span>,<\/span>\r\n        template<\/span>:<\/span> '<\/span><h1>hoge<\/h1><\/span>'<\/span>\r\n    };<\/span>\r\n})<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myFuga<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        restrict<\/span>:<\/span> '<\/span>A<\/span>'<\/span>,<\/span>\r\n        template<\/span>:<\/span> '<\/span>fuga<\/span>'<\/span>\r\n    };<\/span>\r\n})<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myPiyo<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        restrict<\/span>:<\/span> '<\/span>CA<\/span>'<\/span>,<\/span>\r\n        template<\/span>:<\/span> '<\/span>piyo<\/span>'<\/span>\r\n    };<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              \u753b\u9762\u8868\u8fbe<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                              DOM\u7ed3\u6784<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                              restrict \u3067\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u5f62\u614b\u3092\u6307\u5b9a\u3067\u304d\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                              A \uff1a\u5c5e\u6027\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                              E \uff1a\u8981\u7d20\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                              C \uff1aclass \u5c5e\u6027\u306e\u5024\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                              AE \u306e\u3088\u3046\u306b\u8907\u6570\u306e\u5f62\u614b\u3092\u307e\u3068\u3081\u3066\u5b9a\u7fa9\u3067\u304d\u308b\u3002
                                                                                                                                                                                                                                              \n\u7701\u7565\u3057\u305f\u5834\u5408\u306f A \u3092\u6307\u5b9a\u3057\u305f\u306e\u3068\u540c\u3058\u306b\u306a\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                              \u4f7f\u7528\u6307\u5b9a\u7684\u6a21\u677f\u66ff\u6362 DOM \u5143\u7d20<\/h2>\n
                                                                                                                                                                                                                                              <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        <my-hoge<\/span> \/><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myHoge<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        restrict<\/span>:<\/span> '<\/span>E<\/span>'<\/span>,<\/span>\r\n        replace<\/span>:<\/span> true<\/span>,<\/span>\r\n        template<\/span>:<\/span> '<\/span><h1>hoge<\/h1><\/span>'<\/span>\r\n    };<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              \u753b\u9762\u663e\u793a<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                              DOM \u7ed3\u6784<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                              replace \u306b true \u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u8981\u7d20\u3092\u7f6e\u304d\u63db\u3048\u308b\u3002<\/p>\n
                                                                                                                                                                                                                                              \u6307\u5b9a\u522b\u7684\u6587\u4ef6\u4f5c\u4e3a\u6a21\u677f\u3002<\/h2>\n
                                                                                                                                                                                                                                              <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <div<\/span> my-hoge<\/span>><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myHoge<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>template.html<\/span>'<\/span>\r\n    };<\/span>\r\n})<\/span>\r\n.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>hoge<\/span>'<\/span>;<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              <h1><\/span>template.html<\/h1><\/span>\r\n<h2><\/span>message = {{message}}<\/h2><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              \u753b\u9762\u8868\u8fbe<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                              templateUrl \u3067\u5225\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u3057\u3066\u8aad\u307f\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b\u3002
                                                                                                                                                                                                                                              \nChrome \u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u90fd\u5408\u4e0a Web \u30b5\u30fc\u30d0\u30fc\u7d4c\u7531\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u53d6\u5f97\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3002<\/p>\n
                                                                                                                                                                                                                                              \u5c06\u6a21\u677f\u5d4c\u5165HTML\u6587\u4ef6\u4e2d\u3002<\/h3>\n
                                                                                                                                                                                                                                              <html<\/span> ng-app=<\/span>\"myModule\"<\/span>><\/span>\r\n    <head><\/span>\r\n        <script <\/span>src=<\/span>\"angular.min.js\"<\/span>><\/script><\/span>\r\n        <script <\/span>src=<\/span>\"sample.js\"<\/span>><\/script><\/span>\r\n    <\/head><\/span>\r\n    <body<\/span> ng-controller=<\/span>\"SampleController\"<\/span>><\/span>\r\n        <div<\/span> my-hoge<\/span>><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n\r\n<script <\/span>type=<\/span>\"text\/ng-template\"<\/span> id=<\/span>\"hogeTemplate\"<\/span>><\/span>\r\n<<\/span>h1<\/span>><\/span>message<\/span> =<\/span> {{<\/span>message<\/span>}}<\/span><<\/span>\/h1<\/span>>\r\n<\/span><\/script><\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              angular<\/span>\r\n.<\/span>module<\/span>(<\/span>'<\/span>myModule<\/span>'<\/span>,<\/span> [])<\/span>\r\n.<\/span>directive<\/span>(<\/span>'<\/span>myHoge<\/span>'<\/span>,<\/span> function<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n        templateUrl<\/span>:<\/span> '<\/span>hogeTemplate<\/span>'<\/span>\r\n    };<\/span>\r\n})<\/span>\r\n.<\/span>controller<\/span>(<\/span>'<\/span>SampleController<\/span>'<\/span>,<\/span> function<\/span>(<\/span>$scope<\/span>)<\/span> {<\/span>\r\n    $scope<\/span>.<\/span>message<\/span> =<\/span> '<\/span>hoge<\/span>'<\/span>;<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                                                                                                                                                                                                                                              \u753b\u9762\u5c55\u793a<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n
                                                                                                                                                                                                                                              DOM \u7ed3\u6784<\/p>\n
                                                                                                                                                                                                                                              \"angularjs.JPG\"<\/div>\n