AngularJS基础学习笔记之简单介绍
AngularJS:超越类库的Web开发框架
AngularJS不仅仅是一个JavaScript类库,而是一个引领下一代Web应用开发的完整框架。由Google Chrome的开发团队精心打造,其设计理念将长久地影响着未来的Web开发。即便在未来的5到10年,我们可能不再使用AngularJS的具体技术,但它的设计精髓仍将盛行。
如何开始使用AngularJS呢?你可以将它作为一个JavaScript文件添加到你的HTML页面中,通过script标签引入即可。例如:
```html
Name:
```
在这个例子中,当页面加载完成时,AngularJS开始执行。ng-app指令告诉AngularJS这个div元素是应用的根元素。然后,ng-model指令将input标签的值绑定到变量name上,ng-bind指令则将name的值展示在段落元素中。
AngularJS还提供了许多其他有用的指令,如ng-init用于初始化变量。例如:
```html
```
你也可以使用data-ng-作为前缀代替ng-,这样可以确保页面上的HTML是有效的。在后面的学习中,你将接触到更多的AngularJS指令和表达式。
AngularJS精准计算并展现表达式结果
想象一下,你正在构建一个网页,而网页上的内容需要根据某些计算来动态更新。AngularJS就能帮你轻松实现这一点。下面是一个简单的HTML文档示例,它使用了AngularJS来显示一个简单的数学表达式的结果。
我的第一个表达式:{{ 5 + 5 }}在这个例子中,AngularJS将表达式“5 + 5”的结果准确地“输出”在网页上。这就是AngularJS表达式的基本功能。
接下来,让我们看一个更复杂的例子,这个例子展示了如何将数据绑定到HTML上。在AngularJS中,你可以使用ng-model指令来绑定数据到HTML元素上,然后使用双括号{{}}来显示这些数据。下面是一个简单的文本输入和显示输入内容的例子:
姓名: {{name}}在这个例子中,用户在文本框中输入的名字会立即显示在页面的其他地方。这就是AngularJS表达式的强大之处。在后面的章节中,我们会学习到更多关于AngularJS表达式的知识。
接下来,我们来谈谈AngularJS的模块和控制器。AngularJS模块定义了AngularJS应用程序,而控制器则控制着这些应用程序的行为。使用ng-app指令可以指定一个应用程序,而ng-controller指令则可以指定一个控制器。下面是一个简单的例子:
First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}
var app = angular.module('myApp', []); // 定义模块myApp
app.controller('myCtrl', function($scope) { // 定义控制器myCtrl并设置其控制行为
$scope.firstName = "John"; // 设置firstName变量的值
$scope.lastName = "Doe"; // 设置lastName变量的值
});
在这个例子中,我们创建了一个名为myApp的模块和一个名为myCtrl的控制器。控制器通过定义$scope对象的属性来控制应用程序的行为。在这个例子中,我们设置了firstName和lastName的值,然后将其显示在网页上。在后面的章节中,我们会学习到更多关于模块和控制器的内容。AngularJS是一个非常强大的工具,它可以帮助你轻松地创建动态网页应用程序。希望你喜欢学习AngularJS!本文到此结束。