AngularJS 基础概念

AngularJS 是一个由 Google 开发的开源 JavaScript 框架，用于构建单页面应用程序（SPA）。它通过扩展 HTML 的功能，使得开发者能够更加轻松地创建动态、交互式的前端应用。

MVC 架构

AngularJS 使用 MVC（Model-View-Controller）架构来组织应用程序的代码。在 AngularJS 中，Model 代表数据，View 代表用户界面，Controller 则负责处理用户输入和更新数据。

双向数据绑定

AngularJS 的一个重要特性是双向数据绑定，它使得当 Model 发生变化时，View 会自动更新，反之亦然。这样可以减少开发者手动操作 DOM 的工作量，提高开发效率。

示例代码：

// www.javascriptcn.com code example
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name">
  <p>Hello, {{name}}!</p>
</div>

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

在上面的示例中，当用户在输入框中输入内容时，{{name}} 中的值会实时更新。

指令

AngularJS 中的指令是用来扩展 HTML 的标签和属性，使其具有更多功能。常见的指令包括 ng-model、ng-repeat、ng-click 等。

示例代码：

// www.javascriptcn.com code example
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.items = ['Item 1', 'Item 2', 'Item 3'];
});
</script>

上面的示例中使用了 ng-repeat 指令来循环显示列表项。

以上是 AngularJS 的基础概念，接下来我们将深入学习更多高级特性和技巧。