AngularJS 60分钟入门基础教程

AngularJS是一个流行的JavaScript框架，用于构建动态Web应用程序。在本攻略中，我们将介绍AngularJS的基础知识，包括模块、控制器、指令、表达式等，并提供两个示例说明。

AngularJS基础知识

在使用AngularJS之前，需要了解以下几个基础知识：

1. 模块

模块是AngularJS应用程序的基本组成部分，用于组织代码和功能。每个AngularJS应用程序都至少有一个模块。

1. 控制器

控制器是AngularJS应用程序中的一个组件，用于处理视图和模型之间的交互。控制器可以定义在模块中，也可以定义在HTML页面中。

1. 指令

指令是AngularJS应用程序中的一个组件，用于扩展HTML标记的功能。指令可以定义在模块中，也可以定义在HTML页面中。

1. 表达式

表达式是AngularJS应用程序中的一个组件，用于在HTML页面中显示动态数据。表达式可以包含变量、运算符、函数等。

AngularJS使用方法

在AngularJS中使用模块、控制器、指令和表达式，需要进行以下步骤：

1. 引入AngularJS库

在HTML页面中引入AngularJS库：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1. 创建模块

在JavaScript文件中创建模块：

var app = angular.module('myApp', []);

在上面的代码中，我们创建了一个名为myApp的模块。

1. 创建控制器

在JavaScript文件中创建控制器：

app.controller('myCtrl', function($scope) {
    $scope.message = "Hello, AngularJS!";
});

在上面的代码中，我们创建了一个名为myCtrl的控制器，并将一个名为message的变量绑定到$scope对象上。

1. 创建指令

在JavaScript文件中创建指令：

app.directive('myDirective', function() {
    return {
        template : "My custom directive!"
    };
});

在上面的代码中，我们创建了一个名为myDirective的指令，并将其模板设置为"My custom directive!"。

1. 在HTML页面中使用表达式

在HTML页面中使用表达式：

<div ng-app="myApp" ng-controller="myCtrl">
    {{ message }}
</div>

在上面的代码中，我们使用{{ message }}表达式显示控制器中的message变量。

1. 在HTML页面中使用指令

在HTML页面中使用指令：

<div ng-app="myApp">
    <my-directive></my-directive>
</div>

在上面的代码中，我们使用指令显示指令中的模板。

示例说明

以下是两个示例，分别演示了如何在AngularJS中使用控制器和指令。

示例一：使用控制器

在这个示例中，我们演示了如何在AngularJS中使用控制器。我们可以按照以下步骤操作：

1. 引入AngularJS库

在HTML页面中引入AngularJS库：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1. 创建模块和控制器

在JavaScript文件中创建模块和控制器：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.message = "Hello, AngularJS!";
});

在上面的代码中，我们创建了一个名为myApp的模块和一个名为myCtrl的控制器，并将一个名为message的变量绑定到$scope对象上。

1. 在HTML页面中使用表达式

在HTML页面中使用表达式：

<div ng-app="myApp" ng-controller="myCtrl">
    {{ message }}
</div>

在上面的代码中，我们使用{{ message }}表达式显示控制器中的message变量。

1. 运行应用程序

在浏览器中打开HTML页面，即可看到显示"Hello, AngularJS!"的结果。

示例二：使用指令

在这个示例中，我们演示了如何在AngularJS中使用指令。我们可以按照以下步骤操作：

1. 引入AngularJS库

在HTML页面中引入AngularJS库：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1. 创建模块和指令

在JavaScript文件中创建模块和指令：

var app = angular.module('myApp', []);

app.directive('myDirective', function() {
    return {
        template : "My custom directive!"
    };
});

在上面的代码中，我们创建了一个名为myApp的模块和一个名为myDirective的指令，并将其模板设置为"My custom directive!"。

1. 在HTML页面中使用指令

在HTML页面中使用指令：

<div ng-app="myApp">
    <my-directive></my-directive>
</div>

在上面的代码中，我们使用指令显示指令中的模板。

1. 运行应用程序

在浏览器中打开HTML页面，即可看到显示"My custom directive!"的结果。

以上就是AngularJS 60分钟入门基础教程的完整攻略。