角度フロントエンドフレームワーク簡単小さい場合

、角度表現

<ヘッド> 
    <METAのcharset = "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <SCRIPT srcは= "JS / angular.min.js"> </ SCRIPT> 
    <！ - 
        角度1を使用するには、でなければなりませんフレームの導入に関連する
        2属性NGアプリページ表示角度JSアプリケーション本体に書き込まれなければならない
        3、発現データのページを表示する必要がある場合、2つのブレースは、例えば、記述する必要が：{{}変数または式} 
    - > 
</ HEAD> 
<本体NGアプリ> 
    {100} {100} * 
</ BODY> 
2、双方向結合

<ヘッド> 
    <METAのcharset = "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <SCRIPT SRC = "JS / angular.min.js"> </ SCRIPT> 
</ HEAD> 
<ボディNGアプリ> 
    < ！ - 
        NG-モデルは名前のコマンド入力を指す。フォームデータと背景がで属性名NG-モデルの値に応じて取得することができる場合
        も、このプロパティの値により得ることができるページ、現在のページの$へのデータの性質
        範囲は、保存されました
    - > 
    <モデル-ngの入力= "がmyName"> <BR>：あなたの名前を入力してください
    こんにちは、{{}}がmyNameを！！！
</ BODY> 
III初期化コマンド

<ヘッド> 
    <METAのcharset = "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <SCRIPT SRC = "JS / angular.min.js"> </ SCRIPT> 
</ HEAD> 
<ボディNGのApp-NG- INIT =「がmyName = 『ジョン・ドウ』」> 
    <！ - 
        INIT-初期化コマンドがある限り、ページがINIT-NGのの実装にロードされると、あるngの
        要求されたデータと対応するデータがある、$スコープ角度JSは、組み込みオブジェクトであるとメソッド
    - > 
    あなたの名前を入力してください：<INPUT = NG-モデル"がmyNameを"> <BR> 
    {} {}がmyName、こんにちは
</ body>の
IV。

            }         }）。    </ SCRIPT>


















</ HEAD> 
<本体NGアプリ= "て、myApp" NG-コントローラ= "myController"> 
<BR> <入力NGモデル= "X">：X 
Y <入力NGモデル= "Y"> <BR > 
运算结果：{{追加（）}} 
</ BODY> 
五、事件指令

<ヘッド> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スクリプトSRC = "JS / angular.min.js"> </ SCRIPT> 
    <SCRIPT> 
        //定义アプリ模块
        VARアプリ= angular.module（ 'て、myApp'、[]）。
        //定义myController控制器
        app.controller（ 'myController'、関数（$範囲）{ 
            $ scope.add =関数（）{ 
                $ scope.Z =のparseInt（$ scope.X）+のparseInt（$ scope.Y）。
            } 
        }）。
    </ SCRIPT> 
</ HEAD> 
<本体NGアプリ= "て、myApp" NG-コントローラ= "myController"> 
X <入力NGモデル= "X"> <BR> 
Y <入力NGモデル= "Y 「> <

<ヘッド> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スクリプトSRC = "JS / angular.min.js"> </ SCRIPT> 
    <SCRIPT> 
        VARアプリ= angular.module（」 myApp」、[]）。
        //定义控制器
        app.controller（ 'myController'、関数（$スコープ）{ 
            //声明数组リスト
            の$ scope.list = [123,12,22,1323]; 
        }）; 
    </ SCRIPT> 
</ HEAD> 
<本体NGアプリ= "て、myApp" NG-コントローラ= "myController"> 
    <TABLE> 
        <TR NG-リピート= "リストのリストで"> 
            <TD> {{リスト}} </ TD> 
        </ TR> 
    </ TABLE>

<ヘッド> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スクリプトSRC = "JS / angular.min.js"> </ SCRIPT> 
    <SCRIPT> 
        VARアプリ= angular.module（」 myApp」、[]）。
        //定义控制器
        app.controller（ 'myController'、関数（$スコープ）{ 
            //定义数组
            $ scope.list = [ 
                {名： 'リージ'、saylary：12120、スイ：120}、
                {名前： 'zhangsan 」、saylary：2200、スイ：20}、
                {名前： '张三'、saylary：391073、スイ：390} 
            ] 
        }）。
    </ SCRIPT> 
</ HEAD> 
<本体NGアプリ= "て、myApp" NG-コントローラ= "myController"



            <TD>工资</ TD> 
            <TD>税收</ TD> 
        </ TR> 
        <TR NGリピート= "リスト内のリスト"> 
            <TD> {{list.name}} </ TD> 
            <TD> { {list.saylary}} </ TD> 
            <TD> {{list.sui}} </ TD> 
        </ TR> 
    </ TABLE> 
八、内置服务

<ヘッド> 
    <METAのcharset = "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <SCRIPT SRC = "JS / angular.min.js"> </ SCRIPT> 
    <SCRIPT> 
        VARのApp = angular.module（ ' myAppは; '[]）
        //コントローラの定義は、送信するために、AJAX要求、$ http.get GETリクエスト送信するHTTP宇野メインhttpリクエストを$ 
        myController」、関数（app.controller（' $スコープ、$をHTTP）{ 
            $ scope.findAll =関数（）{ 
                $ http.get（ 'data.json'）の成功（関数（応答）{ 
                    $ scope.list =応答; 
                }）; 
            } 
        }）; 
    </ SCRIPT> 
< / HEAD> 
<ボディNGアプリ= "て、myApp" = NG-コントローラ"myController"NG-INIT = "のfindAll（）"> 
    <表> 
        <TR>
            <TD>姓名</ TD> 
            <TD>工资</ TD> 
            <TD>税收</ TD> 
        </ TR> 
        <TR NGリピート= "リスト内のリスト"> 
            <TD> {{}} list.name </ TD> 
            <TD> {{list.salary}} </ TD> 
            <TD> {{list.sui}} </ TD> 
        </ TR> 
    </ TABLE> 
</ BODY>