Angular.js學習筆記

阿新 • • 發佈：2020-12-14

技術標籤：前端

1. AngularJS是什麼?

Google開源的前端JS 結構化框架
動態展示頁面資料, 並與使用者進行互動
AngularJS特性(優點)
- 雙向資料繫結
- 宣告式依賴注入
- 解耦應用邏輯, 資料模型和檢視
- 完善的頁面指令
- 定製表單驗證
- Ajax封裝

2. HelloWorld

匯入angular.js, 並在頁面中引入
在中ng-app指令
定義ng-model=‘xxx’/{{xxx}}

1. 雙向資料繫結

View（檢視）：頁面（標籤、指令，表示式）
Model(模型) ：作用域物件（屬性、方法）
資料繫結：資料從一個位置自動流向另一個位置
- View–>Model
- Model–>View
單向資料繫結：只支援一個方向
- View–>Model ： ng-init
- Model–>View : {{name}}
雙向資料繫結
- Model<–>View : ng-model
- angular是支援雙向資料繫結的

2. 依賴注入

依賴的物件被別人(呼叫者)自動注入進入
注入的方式;
- 內部自建：不動態
- 全域性變數：汙染全域性環境
- 形參：這種最好
angualr就是通過宣告式依賴注入，來得到作用域物件
形參名不能隨便定義（只是針對當前這種寫法）

3. MVC模式

M: Model, 即模型, 在angular中:
- 為scope
- 儲存資料的容器
- 提供操作資料的方法
V: View, 即檢視

, 在angular中:
- 為頁面
- 包括: html/css/directive/expression
- 顯示Model的資料
- 將資料同步到Model
- 與使用者互動
C: Controller, 即控制器, 在angular中:
- 為angular的Controller
- 初始化Model資料
- 為Model新增行為方法

4. MVVM模式

M: Model, 即資料模型, 在angular中:
- 為scope中的各個資料物件
V: View, 即檢視, 在angular中:
- 為頁面
VM: ViewModel, 即檢視模型, 在angular中:
- 為scope物件
在angular中controller不再是架構的核心，在MVVM中只是起輔助作用，用來輔助$scope物件，即VM層

作用域
- 是一個js例項物件
- 這個物件的屬性、方法，頁面都可以直接引用、操作
- ng-app指令：內部建立一個根作用域（$rootScope）, 是所有其它作用域的父物件
控制器
- 也是一個物件，是我們View與Model之間的橋樑
- 當我們使用了ng-controller指令，內部就會建立控制器物件
- 但我們同時得提供控制器的建構函式（必須定義一個$scope的形參）
- 每定義一個ng-controller指令，內部就會建立一個新的作用域物件（ s c o p e ） , 並自動注入構造函數中 , 在函數內部可以直接使用 scope）, 並自動注入建構函式中,在函式內部可以直接使用 scope）,並自動注入構造函數中,在函數內部可以直接使用scope物件。
模組
- 也是一個物件
- 建立模組物件： angular.module(‘模組名’, [依賴的模組])
- 通過模組新增控制器：
  - module.controller(‘MyController’, function(KaTeX parse error: Expected '}', got 'EOF' at end of input: scope){//操作scope的語句})
- angular的整體設計也是多模組的
  - 核心模組： angular.js
  - 擴充套件模組： angular-router.js, angular-message.js, angular-animate.js
表示式
- {{js表示式}}
- 從作用域物件中讀取對應的屬性資料來顯示資料
- 不支援if/for/while
- 支援三目表示式
指令
- 什麼指令：自定義標籤屬性/標籤
- 常用的指令：
  - ng-app: 指定模組名，angular管理的區域
  - ng-model：雙向繫結，輸入相關標籤
  - ng-init：初始化資料
  - ng-click：呼叫作用域物件的方法（點選時）
    可以傳$event
  - ng-controller: 指定控制器建構函式名，內部會自動建立一個新的子作用域（外部的）
  - ng-bind：解決使用{{}}顯示資料閃屏（在很短時間內顯示{{}}）
  - ng-repeat：遍歷陣列顯示資料，陣列有幾個元素就會產生幾個新的作用域
    - $index, $first, $last, $middle, $odd, $even
  - ng-show: 布林型別，如果為true才顯示
  - ng-hide: 布林型別，如果為true就隱藏
  - ng-class: 動態引用定義的樣式 {aClass:true, bClass:false}
- ng-style: 動態引用通過js指定的樣式物件 {color:‘red’, background:‘blue’}
- ng-mouseenter: 滑鼠移入監聽, 值為函式呼叫, 可以傳$event
- ng-mouseleave: 滑鼠移出監聽, 值為函式呼叫, 可以傳$event
過濾器
- 作用: 在顯示資料時可以對資料進行格式化或過濾
  - 單個—>格式化（將別的型別的資料轉換為特定格式的字串）
  - 多個----》格式化/過濾
  - 不會真正改變被操作資料
- {{express | 過濾器名：補充說明}}
- 常用過濾器：
  - currency 貨幣格式化(文字)
  - number數值格式化(文字)
  - date 將日期物件格式化(文字)
  - json: 將js物件格式化為json(文字)
  - lowercase : 將字串格式化為全小寫(文字)
  - uppercase : 將字串格式化全大寫(文字)
  - limitTo 從一個數組或字串中過濾出一個新的陣列或字串
    - limitTo : 3 limitTo : -3
  - orderBy : 根據指定作用域屬性對陣列進行排序
    - {{[2,1,4,3] | orderBy}} 升序
    - {{[2,1,4,3] | orderBy：‘-’}} 降序
    - {{[{id:2,price:3}, {id:1, price:4}] | orderBy:‘id’} id升序
    - {{[{id:2,price:3}, {id:1, price:4}] | orderBy:’-price’} price降序
  - filter : 從陣列中過濾返回一個新陣列
    - {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:‘3’}} //根據id過濾
    - {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:‘3’}} //根據所有欄位過濾

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<input type="text" id="name">
<p>您輸入的內容是：<span id="contentSpan"></span></p>

<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript">
  $(function () {
      $('#name').keyup(function () {
          var name = this.value;
          $('#contentSpan').html(name);
      })
  })
  
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app>

<!--
  ng-app(指令) : 告訴angular核心它管理當前標籤所包含的整個區域,並且會自動建立$rootScope根作用域物件
  ng-model : 將當前輸入框的值與誰關聯(屬性名:屬性值), 並作為當前作用域物件($rootScope)的屬性
  {{}} (表示式) : 顯示資料,從作用域物件的指定屬性名上取

  1、表示式：通常有一個返回值，可以放在任何需要值得地方，比如函式呼叫的引數，一個變數名，一個運算，

  2、語句：通常表示一個完整的執行單位，一段完整的js可執行的程式碼，有的語句也可以用表示式來執行，叫做表示式語句。

  3、區別：語句用封號結尾，有些語句我們沒有加封號，比如console.log雖然我們沒有加封號，但也是語句，因為js引擎會自動解析並且加上封號。
  js引擎在解析的時候會自動的加上封號

  4、特例：if語句，就不用加封號  可也是完整的語句。
-->

<input type="text" ng-model="username">
<p>您輸入的內容是：<span>{{username}}</span></p>
<script src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

在這裡插入圖片描述
1_雙向資料繫結.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>02_(雙向)資料繫結</title>
</head>
<body ng-app="" ng-init="name='tom'">

<!--
1. 資料繫結: 資料從一個地方A轉移(傳遞)到另一個地方B, 而且這個操作由框架來完成
2. 雙向資料繫結: 資料可以從View(檢視層)流向Model（模型）, 也可以從Model流向View
  * 檢視(View): 也就是我們的頁面(主要是Andular指令和表示式)
  * 模型(Model) : 作用域物件(當前為$rootScope), 它可以包含一些屬性或方法
  * 當改變View中的資料, Model物件的對應屬性也會隨之改變:  ng-model指令  資料從View==>Model
  * 當Model域物件的屬性發生改變時, 頁面對應資料隨之更新:  {{}}表示式  資料從Model==>View
  * ng-model是雙向資料繫結, 而{{}}是單向資料繫結
3.ng-init  用來初始化當前作用域變數。
-->
<input type="text" ng-model="name">
<p>姓名1：{{name}}</p>
<input type="text" ng-model="name">
<p>姓名2：{{name}}</p>

<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>
</html>

2_依賴注入.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body ng-app="">
<!--
    * 依賴物件：完成某個特定的功能需要某個物件才能實現，這個物件就是依賴物件。
    * 依賴注入：依賴的物件以形參的形式被注入進來使用，這種方式就是依賴注入。
    * angular的 ‘$scope’物件就是依賴物件，並且是依賴注入的形式進行使用。
      ！！！形參必須是特定的名稱, 否則Angular無法注入拋異常

    * 回撥函式的event的就是依賴物件
    * 回撥函式有形參就是依賴注入
-->
<div ng-controller="MyController">
  <input type="text" placeholder="姓" ng-model="firstName">
  <input type="text" placeholder="名" ng-model="lastName">

  <p>輸入的姓名為: {{firstName+'-'+lastName}}</p>
  <p>輸入的姓名2為: {{getName()}}</p>
</div>

<div>
  {{firstName}} <!--不能顯示-->
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  function MyController ($scope) {//必須是$scope, $scope就是依賴物件, 被angular動態注入的
    $scope.firstName = 'KB';
    $scope.lastName = 'Brent';

    //給域物件指定方法
    $scope.getName = function() {
      return $scope.firstName + "  " + $scope.lastName;
    };
    console.log($scope.age);

    //宣告式和命令式的區別
    //1.命令式：命令程式執行的時候每一步都是按照自己的指令，更注重執行的過程
    //2.宣告式：更注重執行的結果。
    //命令式
    var arr = [1,2,3,4,5];
    var newArr = [];
    for(var i=0;i<arr.length;i++){
      var num = arr[i]*2;
      newArr.push(num);
    }
    console.log(newArr);

    //宣告式
    var newArr2 = arr.map(function (item) {
      return item*2;
    });
    console.log(newArr2);
    //命令式更注重的執行的過程
    //宣告式更注重的執行的結果
    //宣告式是對命令式的區域性包裝
    //解答題與填空題的區別
  }
</script>

<script type="text/javascript">
    document.getElementById('btn').onclick = function(event) {
        alert(event.clientX);
    };
</script>
</body>
</html>

1_作用域與控制器.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="" ng-init="age=12">
<!--
1. 作用域物件     :
  * 一個js例項物件, ng-app指令預設會建立一個根作用域物件($rootScope)
  * 它的屬性和方法與頁面中的指令或表示式是關聯的
2. 控制器:
  * 用來控制AngularJS應用資料的 例項物件
  * ng-controller : 指定控制器建構函式, Angular會自動new此函式建立控制器物件
  * 同時Angular還有建立一個新的域物件$scope, 它是$rootScope的子物件
  * 在控制器函式中宣告$scope形參, Angular會自動將$scope傳入
-->
<div ng-controller="MyController">
  <input type="text" placeholder="姓" ng-model="firstName">
  <input type="text" placeholder="名" ng-model="lastName">

  <p>輸入的姓名為: {{firstName+'-'+lastName}}</p>
  <p>輸入的姓名2為: {{getName()}}</p>
</div>

<div>
  {{firstName}} <!--不能顯示-->
</div>

<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  function MyController ($scope) {//必須是$scope
    // alert(this instanceof MyController);//說明是new呼叫
    $scope.firstName = 'KB';
    $scope.lastName = 'Brent';

    //給域物件指定方法
    $scope.getName = function() {
      return $scope.firstName + "  " + $scope.lastName;
    };

    console.log($scope.age);
  }
</script>
</body>
</html>

2_模組和控制器.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="MyApp">

<div ng-controller="MyCtrl">
  <input type="text" ng-model="empName">
  <p>員工名:{{empName}}</p>
</div>

<div ng-controller="MyCtrl1">
  <input type="text" ng-model="empName">
  <p>員工:{{empName}}</p>
</div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
//    console.log(angular,typeof angular);
//    //建立當前應用的模組物件
//      var module = angular.module('MyApp',[]);
//      module.controller('MyCtrl',function ($scope) {
//            $scope.empName = 'Tom';
//      });
//    module.controller('MyCtrl1',function ($scope) {
//        $scope.empName = 'Jack';
//    })

    //方法鏈呼叫
//    angular.module('MyApp',[])//模組物件的方法執行完返回的就是模組物件本身
//            .controller('MyCtrl',function ($scope) {//$scope寫法問題（js程式碼壓縮時會把所有的區域性變數壓縮成abcd等）
//                $scope.empName = 'Tom';
//            }).controller('MyCtrl1',function ($scope) {
//                $scope.empName = 'Jack';
//            })
    /*
    上面寫法的問題：
        1、形參只能寫固定的變數名$scope;
        2、一旦檔案壓縮，將不能使用，會報錯。
     */
    //改進
    angular.module('MyApp',[])
            .controller('MyCtrl',['$scope',function (a) {
                a.empName = 'tom'
            }])
            .controller('MyCtrl1',['$scope',function (b) {
                b.empName = 'Jack';
            }])
</script>
</body>
</html>

1_表示式.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="">
<!--
1. 使用Angular表示式:
  * 語法: {{expression}}
  * 作用: 顯示錶達式的結果資料
  * 注意: 表示式中引用的變數必須是當前域物件有的屬性(包括其原型屬性)
2. 操作的資料
  * 基本型別資料: number/string/boolean
  * undefined, Infinity, NaN, null解析為空串: "", 不顯示任何效果
  * 物件的屬性或方法
  * 陣列
-->

<p>{{1}}</p>
<p>{{'七彩雲'}}</p>
<p>{{undefined}}</p>
<p>{{'qicaiyun'+3}}</p>
<p>{{4+3}}</p>
<p>{{true}}</p>

<p ng-init="a=3;b=4">{{a+b}}</p>

<p ng-init="p={name:'Tom',age:12};arr=[true, 3, 'qicaiyun']">{{p.name}}---{{p.age}}----{{arr[2]}}</p>

</body>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
</html>

2_常用指令1.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<!--
1. Angular指令
	* Angular為HTML頁面擴充套件的: 自定義標籤屬性或標籤
	* 與Angular的作用域物件(scope)互動,擴充套件頁面的動態表現力
2. 常用指令(一)
  * ng-app: 指定模組名，angular管理的區域
  * ng-model： 雙向繫結，輸入相關標籤
  * ng-init： 初始化資料
  * ng-click： 呼叫作用域物件的方法（點選時）
  * ng-controller: 指定控制器建構函式名，內部會自動建立一個新的子作用域（外部的）
  * ng-bind： 解決使用{{}}顯示資料閃屏（在很短時間內顯示{{}}）
  * ng-repeat： 遍歷陣列顯示資料， 陣列有幾個元素就會產生幾個新的作用域
    * $index, $first, $last, $middle, $odd, $even
  * ng-show: 布林型別， 如果為true才顯示
  * ng-hide: 布林型別， 如果為true就隱藏
-->

<body ng-app="myApp" >

<div ng-controller="MyCtrl" ng-init="age=12">

    <div>
        <h2>價格計算器(自動)</h2>

        數量：<input type="number" ng-model="count1">

        價格：<input type="number" ng-model="price1">

        <p>總計：{{count1 * price1}}</p>
    </div>

    <div>
        <h2>價格計算器(手動)</h2>

        數量：<input type="number" ng-model="count2">

        價格：<input type="number" ng-model="price2">
        <button ng-click="getTotalPrice()">計算</button>

        <p>總計：{{totalPrice}}</p>
    </div>

    <!--
    * ng-repeat： 遍歷陣列顯示資料， 陣列有幾個元素就會產生幾個新的作用域
        * $index, $first, $last, $middle, $odd, $even
    -->
    <h3>人員資訊列表</h3>
    <ul>
        <li ng-repeat="person in persons">偶數行：{{$even}},奇數行{{$odd}},中間的：{{$middle}},最後一個：{{$last}},第一個：{{$first}},第{{$index + 1}}個，{{person.name}}----{{person.age}}</li>
    </ul>

    <!--
    * ng-bind： 解決使用{{}}顯示資料閃屏（在很短時間內顯示{{}}）
    -->
    <!--當使用ng-bind的時候表示式不在生效-->
    <p ng-bind="count2">{{'asdfdsfds'}}</p>
    <p>{{count2}}</p>
    <!--
      * ng-show: 布林型別， 如果為true才顯示
      * ng-hide: 布林型別， 如果為true就隱藏
    -->
    <!--<button ng-click="switch()">切換</button>-->
    <!--<p ng-show="isLike">我愛范冰冰</p>-->
    <!--<p ng-hide="isLike">范冰冰愛我</p>-->
    <button ng-click="switch()">切換</button>
    <p ng-show="isLike">我喜歡賈靜雯</p>
    <p ng-hide="isLike">賈靜雯喜歡我</p>

</div>
<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
    /*
     *  * ng-app: 指定模組名，angular管理的區域
     * ng-model： 雙向繫結，輸入相關標籤
     * ng-init： 初始化資料
     * ng-click： 呼叫作用域物件的方法（點選時）
     * ng-controller: 指定控制器建構函式名，內部會自動建立一個新的子作用域（外部的）
     * */
    //建立模組物件
    angular.module('myApp', [])
            .controller('MyCtrl', ['$scope', function ($scope) {

                $scope.count1 = 1;
                $scope.price1 = 20;
                $scope.count2 = 1;
                $scope.price2 = 10;
                $scope.totalPrice = $scope.count1 * $scope.price1;
                $scope.getTotalPrice = function () {
                    $scope.totalPrice =  this.count2 * this.count2;
                };

                $scope.persons = [
                    {name : 'kobe', age : 39},
                    {name : 'anverson', age : 41},
                    {name : 'weide', age : 38},
                    {name : 'tim', age : 40},
                    {name : 'curry', age : 29}

                ];
                $scope.isLike = true;
                $scope.switch = function () {
                    $scope.isLike = !$scope.isLike;
                }
            }])
</script>

</body>
</html>

2_常用指令2.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<!--
常用指令(二)
  * ng-class: 動態引用定義的樣式  {aClass:true, bClass:false}
  * ng-style: 動態引用通過js指定的樣式物件   {color:'red', background:'blue'}
  * ng-click: 點選監聽, 值為函式呼叫, 可以傳$event
  * ng-mouseenter: 滑鼠移入監聽, 值為函式呼叫, 可以傳$event
  * ng-mouseleave: 滑鼠移出監聽, 值為函式呼叫, 可以傳$event
-->
<style>
  .evenB {
    background-color: grey;
  }

  .oddB {
    background-color: green;
  }
</style>
<body ng-app="myApp" ng-controller="MyController">

<div style="width: 100px;height: 100px;background-color: red"
     ng-mouseover="over()" ng-mouseleave="leave()" ng-style="myStyle">
</div>
<div>
  <ul>
      <li ng-repeat="p in persons" ng-class="{evenB:$even, oddB:$odd}">
        {{p.name}}---{{p.age}}
      </li>
  </ul>
</div>

<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  angular.module('myApp', [])
      .controller('MyController', function ($scope) {
        $scope.over = function () {
          $scope.myStyle = {
            background: 'blue'
          };
        };
        $scope.leave = function () {
          $scope.myStyle = {
            background: 'green'
          };
        };

        $scope.persons = [
          {name: 'Tom', age: 12},
          {name: 'Tom2', age: 13},
          {name: 'Tom3', age: 14},
          {name: 'Tom4', age: 15},
          {name: 'Tom5', age: 16}
        ];
      });
</script>
</body>

</html>

app.js

angular.module('noteApp', [])
    .controller('NoteController', function ($scope) {
        //console.log($scope.message);
        $scope.message = '';
        //定義獲取剩餘字數的方法
        $scope.getCount = function () {
            //判斷輸入資料的長度
            if(this.message.length > 100){
                $scope.message = $scope.message.slice(0, 100);
            }
            //返回剩餘字數的個數
            return 100 - $scope.message.length;
        };

        //定義儲存的方法
        $scope.save = function () {
            alert('note is saved');
            //將資料儲存到sessionStorage中
            sessionStorage.setItem('note_key', JSON.stringify($scope.message));
            //將輸入內容清空
            $scope.message = '';
        };
        //定義讀取的方法
        $scope.read = function () {
            $scope.message = JSON.parse(sessionStorage.getItem('note_key') || '[]');//對讀取null做了處理
        };

        // 定義刪除的方法
        $scope.delete = function () {
            $scope.message = '';
        };

    });

我的筆記.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    textarea{
      resize: none;
    }
  </style>
</head>
<body ng-app="noteApp" ng-controller="NoteController">

<h2>我的筆記</h2>
<textarea cols="30" rows="10" ng-model="message"></textarea>
<div>
  <button ng-click="save()">儲存</button>
  <button ng-click="read()">讀取</button>
  <button ng-click="delete()">刪除</button>
</div>
<p>剩餘字數：{{getCount()}}</p>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>

在這裡插入圖片描述
app.js

angular.module('todoApp', [])
	.controller('TodoControl', function ($scope) {
		//初始化資料
		$scope.todos = [
			{todo : '吃飯', isChecked : false},
			{todo : '睡覺', isChecked : false},
			{todo : '打豆豆', isChecked : false}
		];

		//定義新增todo的方法
		$scope.add = function () {
			//判斷新增的內容是否為空
			if(!$scope.newTodo){
				alert('輸入的內容不能空');
				return
			}
			// 組合新的todo物件
			var todo = {
				todo : $scope.newTodo,
				isChecked : false
			};
			// 將新的物件新增到todos中
			$scope.todos.unshift(todo);
			//新增完將輸入的內容清空
			$scope.newTodo = '';
		};

		//定義刪除  todo 的方法
		$scope.delete = function () {
			//將$scope.todo的資料暫時儲存
			var oldTodo = $scope.todos;
			//將$scope.todos的資料清空
			$scope.todos = [];
			//進行遍歷
			oldTodo.forEach(function (item, index) {
				//將沒被選中的todo新增到 $scope.todos 陣列中
				if(!item.isChecked){
					$scope.todos.push(item);
				}
			});
		}
	});

demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="todoApp" >

<div ng-controller="TodoControl">
    <h2>我的備忘錄</h2>
    <div>
        <input type="text" ng-model="newTodo">
        <button ng-click="add()">新增</button>
    </div>
    <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.isChecked">
        <span>{{todo.todo}}</span>
    </div>
    <button ng-click="delete()">刪除選中的記錄</button>
</div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

在這裡插入圖片描述

Angular.js學習筆記

技術標籤：前端 1. AngularJS是什麼? Google開源的前端JS 結構化框架動態展示頁面資料, 並與使用者進行互動AngularJS特性(優點)

Node.js 學習筆記之二：基本使用

示例1. 跟大家說 Hello 由於 Node.js 只是 JavaScript 程式的執行時環境，所以它並不會限制 JavaScript 程式碼的具體執行形式。為了說明這一點，本示例將使用四種形式來跟大家說"Hello"。首先，我們要在co

Node.js 學習筆記之三：構建 Web 服務

示例3. 構建 Web 伺服器這部分示例將致力於用 Node.js 模擬一個類似於 Apache 的 Web 伺服器，處理瀏覽器端的請求，將相關的頁面響應給瀏覽器。首先，我們要在code目錄下執行mkdir 03_webSever命令來建立用於存放這

Node.js 學習筆記之五：使用 Express 框架

這部分示例將通過你好，Express、留言板和學生管理三個應用的實現來演示Express框架的基本使用。首先來搭建該示例專案的基本腳手架，為此我們需要在code目錄下執行mkdir 07_Expressjs命令來建立用於存放這一組示例的

Vue.js 學習筆記之一：學習規劃&瞭解 Vue.js

這篇學習筆記將記錄一些我個人在學習 Vue.js 框架時所編寫的程式程式碼與學習心得。為此，我會在ProgrammingLanguage/JavaScript目錄下建立一個名為的vuejs目錄，並在該目錄下設定以下兩個子目錄：

Vue.js 學習筆記之五：編譯 vue 元件

正如上一篇筆記中所說，直接使用 ES6 標準提供的模組規範來編寫 Vue 元件在很多情況下可能並不是最佳實踐。主要原因有兩個，首先是市面上還有許多並沒有對 ES6 標準提供完全支援的 Web 瀏覽器，這樣做可能會導致某些

Vue.js 學習筆記之六：構建更復雜的元件

在掌握瞭如何構建與編譯 Vue 元件的基礎知識之後，接下來就可以試著來構建一些更具有實際用處的複雜元件了。為了賦予元件更具實用性的後面，首先要做的就是讓這些元件具備監聽使用者自定義事件的能力，並且允許使用者

JS學習筆記一

1、類 2、原型 3、陣列和鍵值對 4、時間物件 5、型別 6、判等 7、定義方法 8、JS不存在方法過載

Vue3-js 學習筆記

Vue3-js 學習筆記目錄 reactive 資料繫結事件繫結生命函數週期計算屬性-computed props

JS學習筆記1

針對var a = 1;的流程分析在執行前，編譯器會做以下工作：分詞：把字串分解成多個有意義的詞法單元。

遇見 vue.js --------阿文的vue.js學習筆記（10）------表單輸入繫結

遇見 vue.js --------阿文的vue.js學習筆記（10）------表單輸入繫結 ** 新學習新徵程，我們一起踏上學習 vue.js的新長征

遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js

遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js ** 新學習新徵程，今天我們一起踏上學習 vue.js的新長征

JS學習筆記之JS預解析

技術標籤：JS學習筆記javascript JS預解析學習筆記最近在學習JavaScript的預解析內容將筆記分享給大家

JS學習筆記（五）-JavaScript內建物件和資料型別總結與JS第一階段個人小結

技術標籤：前端字串javascripthtml5 2021.1.15 文章目錄 JS學習筆記（五）JS內建物件內建物件查文件MDN如何學習物件中的方法

HTML+CSS+JS學習筆記(日更)

1、h1 h2 h3 ... h6 對應六個標題2、開頭加<!DOCTYPE html> 是html 5 的定義3、所有內容都在<html> 內，裡面有head和body4、<p> 定義段落，在文字後加東西，就是加在後面，而對段落加東西會另起一

JS學習筆記-陣列

技術標籤：三週學習JSjavascript 一、陣列（Array）陣列也是一個物件它和普通物件的功能類似，也是用來儲存一些值。不同的是普通物件是使用字串來作為屬性名的，而陣列是使用數字來作為索引操作元素。索引：從0

JS學習筆記十一-正則表示式

技術標籤：三週學習JS正則表示式一、正則表示式正則表示式用於表達一些字串的規則，計算機可以根據正則表示式，來檢查一個字串是否符合規則，或則將字串中符合規則的內容提取出來。

JS學習筆記十-Date-Math-包裝類

技術標籤：三週學習JSjavascript 一、Date函式物件在Js中使用date物件來表示一個時間如果直接使用建構函式建立一個Date物件，則會封裝為當前程式碼執行的時間。

d3.js學習筆記（三）------散點圖（添加了數軸）

技術標籤：D3.js資料視覺化d3.js 添加了數軸的散點圖要點： 1、定義數軸時是用 d3.axisBottom()、 d3.axisLeft() 2、數軸是要基於比例尺工作，所以必須呼叫 .scale(比例尺) 3、ticks() 是用來定義刻度線的數量，

d3.js學習筆記（二）------散點圖的顯示（比例尺）

技術標籤：D3.jsd3.js資料視覺化 d3.js之散點圖步驟： 1、建立 svg 2、在 svg 中建立資料點 circle 3、用比例尺設定資料點的引數，（注意：給比例尺的範圍要新增邊距，不然有些點會溢位，無法完整顯示） 4、新增

Angular.js學習筆記

1. AngularJS是什麼?

2. HelloWorld

1. 雙向資料繫結

2. 依賴注入

3. MVC模式

4. MVVM模式

相關推薦