Lower/Upperd

文字列を大文字/小文字に変換するフィルターを利用します。
 変換前:Webデリ - Spicy Tools, Delicious Sites. 

 小文字:webデリ - spicy tools, delicious sites. 

 大文字:WEBデリ - SPICY TOOLS, DELICIOUS SITES. 

次のリンクをクリックすると "ngp_lower_upper.html" が呼び出されます。
Lower/Upper

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_lower_upper.html" です。
    <!doctype html>
    <html ng-app>
    <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    </head>
    
    <body>
    <div ng-init="name = 'Webデリ - Spicy Tools, Delicious Sites.'">
    <p>
      変換前:{{name}}
    </p>
    <p>
      小文字:{{name | lowercase}}
    </p>
    <p>
      大文字:{{name | uppercase}}
    </p>
    </div>
    
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. div の ng-init で テストに使う文字列を定義します。
    "name" が名前で 'Webデリ - Spicy Tools, Delicious Sites.' がその値です。
    <div ng-init="name = 'Webデリ - Spicy Tools, Delicious Sites.'">
    
  4. 「変換前と小文字と大文字」に変換した文字列を印字します。
    一般に {{ name }} の中には AngularJS で定義された名前を指定します。
    <p>
      変換前:{{name}}
    </p>
    <p>
      小文字:{{name | lowercase}}
    </p>
    <p>
      大文字:{{name | uppercase}}
    </p>
    

AngularJS を使わずに作成

Lower/Upper

AngularJS の理解を深めるために、AngularJS を使わずに作成してみましょう。
このケースでは、AngularJS を使ってもプログラムが簡単になったとは思えません。
強いて言えば <script> を使わなくても {{name | lowercase}} のように AngularJS で定義された名前とフィルターが使えることでしょうか。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>lower/upper</title>
</head>

<body>
<div id="str">Webデリ - Spicy Tools, Delicious Sites.</div>

<script>
  var wk = document.getElementById("str").textContent;
  document.write("<p>" + "変換前:" + wk + "</p>");
  document.write("<p>" + "小文字:" + wk.toLowerCase() + "</p>");
  document.write("<p>" + "大文字:" + wk.toUpperCase() + "</p>");
</script>

</body>
</html>

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