前回ログイン画面を作成しようと考えていましたが、その前にAngularJSでのページ遷移あたりが、わかっていないのでそこを学習し始めようと思います。

参考サイトにある、画面遷移のサンプルをこのページに埋め込み動かしてみようという試みです、しかし本物のファイルへのURLを表示するのはセキュリティ的にアウトなので、画面に表示するところまでは行きませんでした。
しかし、URLを指定すれば表示できルはずです、
注意点としてはURLと参照先ファイルへのパスが混同しないようにするところです。

画面遷移

参考サイトはこちらです。W3 schoolsのサイトです。
ここのページでは、英語表示なので日本語に翻訳して読みます。そして、サンプルとしてこのリンク先に試しにコードと実行結果をいじれるページがありました。

つまり

appモジュールを作る時にngRouteも追加して、routeプロバイイダーでURLを指定してやれば良いという認識を持ちました。

 let app = angular.module('モジュール名(XXApp)', ['ngRoute']);
app.controller('コントローラ名', function($scope) {
  // 処理
} 

つまづいたところ

ルーティングをやるのに設定をするところ

app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "<h1>Template Test</h1>"
//    templateUrl : "main.htm"
  })
  .when("/pages/london.htm", {
    templateUrl : "./pages/london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "./pages/paris.htm",
    controller : "parisCtrl"
  });
});

と
移動する場所を指定、取得するのに自分のPCでテストする場合はローカルサーバーを立てないとブラウザのセキュリティで弾かれるのでテストが面倒というところ、Node.jsなどでWebサーバーを起動してやるとローカルでテスト(実験)しやすいです。

Routingしてみる

参考サイトにあるように「ロンドン」「パリ」のHTMファイルをロードするように実装して見ます。

app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "<h1>Template Test</h1>"
//    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "./pages/london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "./pages/paris.htm",
    controller : "parisCtrl"
  });
});

app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

エラーの対応

そして、実行(表示)してみると
下のようなエラーが出ました。ちなみに無限ループしてちょっと面倒でした。

angular.js:12845 Access to XMLHttpRequest at 'file:///london' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ angular.js:12845
angular.js:12845 Access to XMLHttpRequest at 'file:///paris' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

これの原因はHTMLに定義しているメソッドで以下のような記述がダメでした。
ng-click="headerClick({{categ.url}})
そして、HTMLはこんな感じです。

<div ng-repeat="categ in techCategories" >{{categ.categName}}</div>

色々と試した結果、ng-clickには「{{」がいらない「}}」

という答えが出ました。

結果下のようなコードになりました。

<div class="scrollmenu" style="display:{{leftSideBar_disp}}">
  <a ng-repeat="categ in techCategories" href="{{categ.url}}">{{categ.categName}}</a>
  </div>

一応はこれで表示ができました。

追伸

うまくいかなかった、画面遷移が動きました。

でわでわ。。。