AngularJS 参考手册
AngularJS 参考手册
简介
AngularJS是一个流行的JavaScript框架,由Google开发和维护。它使用MVVM(Model-View-ViewModel)设计模式,并提供了用于构建单页应用的各种工具和组件。AngularJS的核心理念是“数据驱动视图”,并且强调了可重用性和易于测试。
指令
AngularJS的指令是由ng-前缀命名的HTML属性,它们可以通过简单地将数据绑定到视图中,来实现一些很有用的功能。以下是一些常见的AngularJS指令:
ng-model
ng-model用于双向数据绑定,它使得我们可以将我们的数据模型同步到视图中的表单元素中。例如:
<input type="text" ng-model="formData.name">
ng-repeat
ng-repeat可以在HTML中重复项,并在应用程序中的一个数组上迭代。例如:
<ul>
<li ng-repeat="friend in friends">{{friend}}</li>
</ul>
ng-click
ng-click指令添加了一个click事件监听器,该监听器在元素被单击时执行一个表达式。例如:
<button ng-click="doSomething()">Do Something</button>
过滤器
过滤器是AngularJS提供的一种机制,用于在数据绑定之前对其进行处理。以下是一些常见的AngularJS过滤器:
filter
filter过滤器允许您使用管理员在HTML模板中指定的字符串将数组缩小为更小的子集。例如:
<ul>
<li ng-repeat="friend in friends | filter:searchString">{{friend}}</li>
</ul>
orderBy
orderBy过滤器允许您按特定属性对数组进行排序。例如:
<ul>
<li ng-repeat="friend in friends | orderBy:'name'">{{friend.name}}</li>
</ul>
服务
服务是AngularJS应用程序中的单例对象,用于执行某些常见任务。以下是一些常见的AngularJS服务:
$http
$http服务可用于从服务器请求数据。例如:
$http.get('/api/users').then(function(response) {
$scope.users = response.data;
});
$location
$location服务可用于获取应用程序的当前路径,并将URL重定向到不同的路径。例如:
if (userIsLoggedIn) {
$location.path('/dashboard');
} else {
$location.path('/login');
}
模块
模块是AngularJS应用程序的基本构建块,它将控制器,服务和指令组织在一起。以下是一些常见的AngularJS模块:
angular.module
angular.module用于创建新的AngularJS模块,或获取现有的模块。例如:
var app = angular.module('myApp', []);
app.config
app.config用于将注入提供者来配置应用程序,例如:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
});
结论
这只是AngularJS的一些基础知识。使用AngularJS,您可以掌握更高级的主题,例如路由,指令,DOM操作和测试。希望这份参考手册能帮助您了解更多有关AngularJS的知识,并构建出更加灵活、可维护的单页应用。