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)