AngularJS API 学习笔记
AngularJS是一个流行的前端JavaScript框架,它提供了强大的API来帮助开发人员构建动态单页应用程序。在这份学习笔记中,我们将探索AngularJS中一些最重要的API。
ng-app
ng-app指令定义了AngularJS应用程序的根元素。它通常被用于HTML文档的body标签或者任何你想要使用的DOM元素中。当页面加载时,AngularJS会扫描整个文档,并启动应用程序。
例如:
Copy Code<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p>{{ greeting }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.greeting = "Hello, World!";
});
</script>
</body>
</html>
ng-model
ng-model指令绑定了AngularJS模型中的数据到HTML元素中。当用户输入表单时,模型数据将自动更新。
例如:
Copy Code<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<p>Enter your name:</p>
<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "";
});
</script>
</body>
</html>
ng-repeat
ng-repeat指令循环遍历一个集合,并将每个元素渲染到HTML中。
例如:
Copy Code<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li ng-repeat="person in people">{{ person }}</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.people = ["Alice", "Bob", "Charlie"];
});
</script>
</body>
</html>
ng-click
ng-click指令让你可以为HTML元素添加一个点击事件监听器。当用户点击元素时,它会执行指定的AngularJS表达式。
例如:
Copy Code<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>You clicked the button {{ count }} times.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
这些只是AngularJS中API的一小部分。要深入了解所有可用的API,请参阅官方文档。
希望这份学习笔记能对你有所帮助!