认识 AngularJS 构建 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 技术的不断发展，前端框架也越来越多。其中，AngularJS 是一款由 Google 推出的前端框架，它的出现彻底改变了前端开发的方式。本文将介绍 AngularJS 的基础知识，包括指令、表达式、模块、控制器等，以及如何使用 AngularJS 构建 Web 应用。

AngularJS 基础知识

指令

AngularJS 的核心是指令系统。指令是一个带有前缀 ng- 的 HTML 属性，用于扩展 HTML 的功能。指令可以用于事件绑定、循环、条件等功能。

下面是一些常用的指令：

ng-app：定义 AngularJS 应用的根元素。
ng-model：将表单元素与模型数据绑定。
ng-bind：将模型数据绑定到 HTML 元素。
ng-repeat：循环遍历数组或对象。

表达式

AngularJS 中的表达式用于在 HTML 中绑定数据。表达式使用双花括号 {{}} 包裹，可以使用 JavaScript 表达式和函数调用。

下面是一些常用的表达式：

{{name}}：绑定变量 name 的值。
{{1+1}}：计算表达式 1+1 的值。
{{getName()}}：调用函数 getName()。

模块

AngularJS 中的模块用于将应用拆分成小的功能模块。每个模块都有自己的依赖关系，可以在需要时加载或卸载。

下面是一个简单的模块定义：

angular.module('myApp', []);

控制器

AngularJS 中的控制器用于管理应用中的数据和行为。控制器可以通过 $scope 对象与视图进行交互。

下面是一个简单的控制器定义：

angular.module('myApp').controller('myCtrl', function($scope) {
  $scope.name = 'John';
});

使用 AngularJS 构建 Web 应用

现在我们已经了解了 AngularJS 的基础知识，接下来让我们使用 AngularJS 构建一个简单的 Web 应用。

步骤一：定义模块和控制器

我们需要先定义一个模块和一个控制器，代码如下：

// javascriptcn.com 代码示例
<body ng-app="myApp" ng-controller="myCtrl">
  <h1>Hello {{name}}!</h1>
</body>

<script>
  angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.name = 'John';
  });
</script>

步骤二：绑定数据和事件

我们可以使用 ng-model 指令将输入框绑定到模型数据，使用 ng-click 指令将按钮绑定到事件，代码如下：

// javascriptcn.com 代码示例
<body ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name">
  <button ng-click="sayHello()">Say Hello</button>
  <h1>Hello {{name}}!</h1>
</body>

<script>
  angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.name = 'John';
    $scope.sayHello = function() {
      alert('Hello ' + $scope.name + '!');
    };
  });
</script>

步骤三：循环遍历数组

我们可以使用 ng-repeat 指令循环遍历数组，代码如下：

// javascriptcn.com 代码示例
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</body>

<script>
  angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.items = ['Apple', 'Banana', 'Orange'];
  });
</script>

总结

本文介绍了 AngularJS 的基础知识，包括指令、表达式、模块、控制器等，并演示了如何使用 AngularJS 构建 Web 应用。AngularJS 是一个功能强大的前端框架，可以帮助我们更快、更高效地开发 Web 应用。希望本文对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6561a7a8d2f5e1655dbade64