{"id":3591,"date":"2014-06-22T19:38:13","date_gmt":"2014-06-22T10:38:13","guid":{"rendered":"http:\/\/inter-arteq.com\/?p=3591"},"modified":"2022-03-12T18:06:17","modified_gmt":"2022-03-12T09:06:17","slug":"angularjs-how-to-transition-page-view-with-ng-view","status":"publish","type":"post","link":"http:\/\/cms.inter-arteq.com\/angularjs-how-to-transition-page-view-with-ng-view\/","title":{"rendered":"AngularJS\u3067\u753b\u9762\u9077\u79fb\u3059\u308b\u3068\u304d\u306b\u4fbf\u5229\u306ang-view"},"content":{"rendered":"\n<p><a href=\"https:\/\/amzn.to\/3MzPtbq\" target=\"_blank\" rel=\"noreferrer noopener\">AngularJS\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u30ac\u30a4\u30c9<\/a>\u3068\u3044\u3046\u672c\u3092\u8cb7\u3063\u3066\u52c9\u5f37\u4e2d\u3067\u3059\u3002\u4eca\u3001\u5168\u4f53\u306e20%\u304f\u3089\u3044\u3057\u304b\u547c\u3093\u3067\u307e\u305b\u3093\u304c\u3001\u3060\u3044\u3076\u5168\u4f53\u50cf\u304c\u3064\u304b\u3081\u3066\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u53e4\u3044\u306e\u304b\u3001<em>Changing Views with Routes and $location<\/em>\u3068\u3044\u3046\u7ae0\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u304c\u3046\u307e\u304f\u52d5\u304b\u306a\u304b\u3063\u305f\u306e\u3067\u3001\u52d5\u304f\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u7ae0\u3067\u306f\u3001\u30da\u30fc\u30b8\u9077\u79fb\u306a\u3057\u3067\u3001\u753b\u9762\u3092\u9077\u79fb\u3055\u305b\u307e\u3057\u3087\u3046\u3068\u3044\u3046\u306e\u304c\u4e3b\u984c\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u5fc5\u8981\u306b\u306a\u308b\u30d5\u30a1\u30a4\u30eb\u306f<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>index.html<\/li><li>view1.html<\/li><li>view2.html<\/li><li>script.js<\/li><\/ul>\n\n\n\n<p>\u306e\u4e09\u70b9\u3002<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\">\u76ee\u6b21<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/cms.inter-arteq.com\/angularjs-how-to-transition-page-view-with-ng-view\/#angular-routejs%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80\" title=\"angular-route.js\u3092\u8aad\u307f\u8fbc\u3080\">angular-route.js\u3092\u8aad\u307f\u8fbc\u3080<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/cms.inter-arteq.com\/angularjs-how-to-transition-page-view-with-ng-view\/#%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E6%9B%B8%E3%81%8F\" title=\"\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\u3092\u66f8\u304f\">\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\u3092\u66f8\u304f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/cms.inter-arteq.com\/angularjs-how-to-transition-page-view-with-ng-view\/#%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AEview%E3%82%92%E6%9B%B8%E3%81%8F\" title=\"\u305d\u308c\u305e\u308c\u306eview\u3092\u66f8\u304f\">\u305d\u308c\u305e\u308c\u306eview\u3092\u66f8\u304f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"http:\/\/cms.inter-arteq.com\/angularjs-how-to-transition-page-view-with-ng-view\/#%E3%81%BE%E3%81%A8%E3%82%81\" title=\"\u307e\u3068\u3081\">\u307e\u3068\u3081<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"angular-routejs%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80\"><\/span>angular-route.js\u3092\u8aad\u307f\u8fbc\u3080<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Rails\u306a\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u5229\u7528\u3057\u3066\u3044\u308b\u65b9\u306f\u3001\u3054\u5b58\u77e5\u3060\u3068\u601d\u3044\u307e\u3059\u304c\u3001URL\u3092\u89e3\u91c8\u3057\u3066\u3001\u3069\u306e\u30da\u30fc\u30b8\u3092\u8868\u793a\u3055\u305b\u308b\u304b\u5224\u65ad\u3059\u308b\u51e6\u7406\u3092<strong>\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0<\/strong>\u3068\u3044\u3044\u307e\u3059\u3002AngularJS\u306b\u3082\u3053\u306e\u6a5f\u80fd\u304c\u5099\u308f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u306f\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u53ef\u80fd\u306b\u3059\u308b<code>angular-route.js<\/code>\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-file=\"index.html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\n&lt;html ng-app=&quot;MainApp&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;title&gt;\u307b\u3052\u307b\u3052&lt;\/title&gt;\n    &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.0-beta.13\/angular.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;!--\n    \u3053\u3053\u306e\uff11\u884c\u304c\u306a\u304b\u3063\u305f\uff01\u3053\u308c\u306b\u3088\u3063\u3066\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\n    --&gt;\n    &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.0-beta.13\/angular-route.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;!-- ng-view\u304c\u6307\u5b9a\u3055\u308c\u305f\u30bf\u30b0\u306e\u5185\u90e8\u304c\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u3088\u3063\u3066\u5909\u5316\u3059\u308b --&gt;\n    &lt;div ng-view&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre><\/div>\n\n\n\n<p>\u6b21\u306b\u3001\u3053\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u306f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u6a5f\u80fd\u3092\u4f7f\u3044\u307e\u3059\u3001\u3068\u5ba3\u8a00\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-file=\"script.js\" data-lang=\"JavaScript\"><code>\/\/ ngRoute\u304c\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u6a5f\u80fd\u3092\u53f8\u308b\nconst MainApp = angular.module(&#39;MainApp&#39;, [&#39;ngRoute&#39;]);<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E6%9B%B8%E3%81%8F\"><\/span>\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\u3092\u66f8\u304f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u6b21\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30eb\u30fc\u30eb\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>URL\u306e\u6587\u5b57\u5217\u3068\u3001\u305d\u308c\u306b\u5bfe\u5fdc\u3059\u308bController(<code>mainCtrl<\/code>)\u3068templateUrl(<code>view1.html<\/code>, <code>view2.html<\/code>)\u3092\u6307\u5b9a\u3057\u3066\u3042\u3052\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-file=\"script.js\" data-lang=\"JavaScript\"><code>const MainApp = angular.module(&#39;MainApp&#39;, [&#39;ngRoute&#39;]);\nMainApp.config(function($routeProvider){ \/\/ ngRoute\u306e$routeProvider\u304c\u4f7f\u3048\u308b\u3002\n    $routeProvider.\n    when(&#39;\/&#39;, { \/\/ &#39;\/&#39;\u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u305f\u3068\u304d\u306f\n        controller: &#39;mainsCtrl&#39;,  \/\/ mainsCtrl\u3092\u4f7f\u3063\u3066\n        templateUrl: &#39;view1.html&#39;, \/\/ view1.html\u306e\u4e2d\u8eab\u3092ng-view\u306e\u4e2d\u306b\u5165\u308c\u308b\u3002\n    }).\n    when(&#39;\/view2&#39;,{ \/\/ \u4ee5\u4e0b\u540c\u69d8\u306b\u3064\u306a\u3052\u3089\u308c\u308b\u3002\n        controller: &#39;mainsCtrl&#39;,\n        templateUrl: &#39;view2.html&#39;,\n    }).\n    otherwise({ \/\/ \u4e0a\u306e\u3082\u306e\u306b\u8a72\u5f53\u3057\u306a\u304b\u3063\u305f\u5834\u5408\u306f\n        redirectTo: &#39;\/&#39; \/\/ &#39;\/&#39;\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\n    });\n});\nMainApp.controller(&#39;mainsCtrl&#39;, function($http, $scope){\n    \/\/ \u3044\u3044\u611f\u3058\u306e\u51e6\u7406\u3002\n});<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AEview%E3%82%92%E6%9B%B8%E3%81%8F\"><\/span>\u305d\u308c\u305e\u308c\u306eview\u3092\u66f8\u304f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u3042\u3068\u306f<code>view1.html<\/code>\u3068<code>view2.html<\/code>\u3092\u66f8\u3044\u3066\u3044\u304f\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-file=\"view1.html\" data-lang=\"HTML\"><code>&lt;h1&gt;view1&lt;\/h1&gt;\n&lt;a ng-href=&quot;#\/view2&quot;&gt;view2\u3078&lt;\/a&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-file=\"view2.html\" data-lang=\"HTML\"><code>&lt;h1&gt;view2&lt;\/h1&gt;\n&lt;a ng-href=&quot;#\/view1&quot;&gt;view1\u3078&lt;\/a&gt;<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%81%BE%E3%81%A8%E3%82%81\"><\/span>\u307e\u3068\u3081<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u3053\u3093\u306a\u306b\u7c21\u5358\u306b\u753b\u9762\u306e\u518d\u30ed\u30fc\u30c9\u306a\u3057\u306e\u753b\u9762\u9077\u79fb\u304c\u3067\u304d\u308b\u3068\u697d\u3057\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u3060\u3051\u3067\u306fWeb\u30b7\u30b9\u30c6\u30e0\u306f\u4f5c\u308c\u306a\u3044\u3067\u3059\u304c\u3001\u7c21\u5358\u306a\u30b9\u30e0\u30fc\u30ba\u306b\u52d5\u304f\u8efd\u3044Web\u30b5\u30a4\u30c8\u3092\u4f5c\u308b\u306e\u306b\u306f\u5341\u5206\u3060\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305c\u3072\u3001\u30c1\u30e3\u30ec\u30f3\u30b8\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u30ac\u30a4\u30c9\u3068\u3044\u3046\u672c\u3092\u8cb7\u3063\u3066\u52c9\u5f37\u4e2d\u3067\u3059\u3002\u4eca\u3001\u5168\u4f53\u306e20%\u304f\u3089\u3044\u3057\u304b\u547c\u3093\u3067\u307e\u305b\u3093\u304c\u3001\u3060\u3044\u3076\u5168\u4f53\u50cf\u304c\u3064\u304b\u3081\u3066\u304d\u307e\u3057\u305f\u3002 \u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u53e4\u3044\u306e\u304b\u3001Changing Views with Route [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":208445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[41,5],"tags":[155,153,46,42,43,40],"class_list":["post-3591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-program","tag-angular","tag-angularjs","tag-for-beginner","tag-html","tag-javascript","tag-web"],"aioseo_notices":[],"jetpack_featured_media_url":"http:\/\/cms.inter-arteq.com\/wp-content\/uploads\/2022\/03\/angularjs-how-to-transition-page-view-with-ng-view.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts\/3591"}],"collection":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/comments?post=3591"}],"version-history":[{"count":3,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts\/3591\/revisions"}],"predecessor-version":[{"id":208408,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/posts\/3591\/revisions\/208408"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/media\/208445"}],"wp:attachment":[{"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/media?parent=3591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/categories?post=3591"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/cms.inter-arteq.com\/wp-json\/wp\/v2\/tags?post=3591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}