Search

文字列サーチのプログラムです。

次のリンクをクリックすると "ngp_search.html" が呼び出されます。
文字列サーチ

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_search.html" です。
    <!doctype html>
    <html ng-app="myApp">
    
    <head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('MyController', ['$scope', function($scope)
        { $scope.articles = [
          {
            url: 'http://maedakobe.rw.xsi.jp/javascript/javascript.html',
            title: '超初心者のプログラム入門(JavaScript)'
          },
          {
            url: 'http://www.eonet.ne.jp/~maeda/cs/cs.html',
            title: '超初心者のプログラム入門(C#)'
          },
          {
            url: 'http://www.eonet.ne.jp/~maeda/cpp/cpp.htm',
            title: '超初心者のプログラム入門(C/C++)'
          },
          {
            url: 'http://maedakobe.rw.xsi.jp/php/php.html',
            title: '超初心者のプログラム入門(PHP)'
          },
        ];
      }]);
    </script>
    </head>
    
    <body ng-controller="MyController">
    <ul>
      <!--<li ng-repeat="article in articles | filter : '入門'">-->
      <!--<li ng-repeat="article in articles | filter : '(C#)'">-->
      <!--<li ng-repeat="article in articles | filter : '!(C#)'">-->
      <li ng-repeat="article in articles | filter : 'maedakobe'">
        <a ng-href="{{article.url}}">
          {{article.title}} </a>
      </li>
    </ul>
    
    </body>
    </html>
    
  2. html を AngularJS の myApp モジュールに関連付けます。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app="myApp">
    
  3. myApp モジュールを作成して myController コントローラーを登録します。
    $scope.articles で検索対象となる文字列を配列として定義します。
    url がホームページが登録されている URL で、title がそのタイトルです。
    <script>
    var app = angular.module('myApp', []);
    app.controller('MyController', ['$scope', function($scope)
        { $scope.articles = [
          {
            url: 'http://maedakobe.rw.xsi.jp/javascript/javascript.html',
            title: '超初心者のプログラム入門(JavaScript)'
          },
          {
            url: 'http://www.eonet.ne.jp/~maeda/cs/cs.html',
            title: '超初心者のプログラム入門(C#)'
          },
          {
            url: 'http://www.eonet.ne.jp/~maeda/cpp/cpp.htm',
            title: '超初心者のプログラム入門(C/C++)'
          },
          {
            url: 'http://maedakobe.rw.xsi.jp/php/php.html',
            title: '超初心者のプログラム入門(PHP)'
          },
        ];
      }]);
    </script>
    
  4. <li> の ng-repeat でフィルターを指定してホームページを検索します。
    '入門' で検索すると、全てのページが該当します。
    '!(C#)' は (C#) が見つからないページのことで、3件が該当します。
    'maedakobe' で検索すると JavaScript と PHP のページが該当します。
    検索されたページの url をクリックすると、そのページが表示されます。
    <ul>
      <!--<li ng-repeat="article in articles | filter : '入門'">-->
      <!--<li ng-repeat="article in articles | filter : '(C#)'">-->
      <!--<li ng-repeat="article in articles | filter : '!(C#)'">-->
      <li ng-repeat="article in articles | filter : 'maedakobe'">
        <a ng-href="{{article.url}}">
          {{article.title}} </a>
      </li>
    </ul>
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)