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,请参阅官方文档

希望这份学习笔记能对你有所帮助!