AngularJS初步认识

最新推荐文章于 2025-11-16 15:14:49 发布

转载最新推荐文章于 2025-11-16 15:14:49 发布 · 439 阅读

文章标签：

#angularjs

本文介绍了AngularJS的基础知识，包括如何引入框架、使用ng-app定义应用、ng-model绑定输入框值、ng-bind显示数据及表达式的使用。同时展示了如何通过控制器管理数据。

今天开始接触AngularJS。

1、AngularJS是一个javascript框架，通过script标签添加的到页面中

2、ng-app指令定义一个AngularJS应用程序

ng-model把元素值（比如输入域的值）绑定到应用程序

ng-bind指令把应用程序数据绑定到HTML视图

3、

<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

</body>
</html>

讲解：网页加载完毕，AngularJS自动开启

ng-app指令告诉AngularJS，<div>元素是AngularJS应用程序的“所有者”。

ng-model指令把输入域的值绑定到应用程序变量name。

4、

讲解：

ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

ng-init指令初始化AngularJS应用程序变量。

ng前加上 data- 网页对HTML5有效

5、AngularJS表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>

</body>
</html>

讲解：

AngularJS表达式写在双大括号内：{{expression}}

AngularJS表达式将数据绑定到HTML

AngularJS将在表达式书写的位置“输出”数据

6、

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

讲解：

AngularJS模块（Moodule）定义了AngularJS应用

AngularJS控制器（Controller）用于控制AngularJS应用

ng-app指令定义了应用，ng-controller定义了控制器

 在 angular.module(‘myApp’, [] )中，有个空的数组，这个数组是myApp模块所依赖的模块的列表

scope是AngularJS的作用域