AngularJS 应用学习笔记

简介

AngularJS 是一个由 Google 开发的开源前端 JavaScript 框架，为开发单页 Web 应用提供了强大的工具和功能。它使用 MVC 模式来组织应用程序，并使用指令扩展 HTML 语法，使我们可以轻松地创建动态的 Web 页面和交互式 Web 应用。

基础知识

指令

指令是 AngularJS 中最重要的概念之一。指令是在 HTML 标签中添加的新属性，它可以修改标签的行为或向标签添加新功能。AngularJS 内置了许多常用的指令，例如 ng-model、ng-repeat、ng-show、ng-hide 等等。

以下是一个简单的例子，展示了如何使用 ng-show 指令：

htmlCopy Code
<div ng-app="myApp" ng-controller="myController">
    <p ng-show="isVisible">这是一段可见的文本。</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.isVisible = true;
    });
</script>

绑定

绑定是将数据模型和视图元素相关联的过程。当数据模型发生变化时，视图元素也随之更新。AngularJS 提供了三种绑定方式：单向绑定、双向绑定和一次性绑定。

以下是一个简单的例子，展示了如何使用双向绑定：

htmlCopy Code
<div ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="message">
    <p>{{ message }}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.message = 'Hello, world!';
    });
</script>

过滤器

过滤器可以用于格式化数据、过滤数据、排序数据等等。AngularJS 内置了许多常用的过滤器，例如 currency、date、filter、orderBy 等等。

以下是一个简单的例子，展示了如何使用 currency 过滤器：

htmlCopy Code
<div ng-app="myApp" ng-controller="myController">
    <p>{{ price | currency }}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.price = 1234.5678;
    });
</script>

实例演示

下面是一个简单的实例，它展示了如何使用 AngularJS 创建一个简单的计数器应用程序。

htmlCopy Code
<div ng-app="myApp" ng-controller="myController">
    <button ng-click="increment()">Click me</button>
    <p>You have clicked the button {{ count }} times.</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.count = 0;
        $scope.increment = function() {
            $scope.count++;
        };
    });
</script>

在这个实例中，我们创建了一个按钮和一个段落元素。当用户点击按钮时，计数器会增加并更新视图。