AngularJS 是一个流行的前端框架,用于构建单页面应用(SPA)。在本章中,我们将探讨如何创建和组织 AngularJS 应用。
创建 AngularJS 应用
要创建一个 AngularJS 应用,首先需要引入 AngularJS 库文件。可以通过 CDN 或下载本地文件的方式引入。接下来,我们需要在 HTML 文件中定义一个 ng-app 指令,这将告诉 AngularJS 在哪里启动应用。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
{{ greeting }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});
</script>
</body>
</html>在上面的示例中,我们创建了一个名为 "myApp" 的 AngularJS 应用,并定义了一个名为 "MyController" 的控制器。控制器负责处理页面上的逻辑和数据绑定。
组织 AngularJS 应用
为了更好地组织 AngularJS 应用,我们可以将控制器、服务、过滤器等功能分别放在不同的模块中。这样可以使代码更易于维护和扩展。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
{{ greeting }}
</div>
<script>
var app = angular.module('myApp', ['myControllers']);
var controllers = angular.module('myControllers', []);
controllers.controller('MyController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});
</script>
</body>
</html>在上面的示例中,我们将控制器放在一个名为 "myControllers" 的模块中,并在主应用模块中引入该模块。这样可以更好地组织代码。
总结
在本章中,我们学习了如何创建和组织 AngularJS 应用。通过定义控制器、服务等组件,我们可以构建出一个功能强大的单页面应用。在接下来的章节中,我们将深入探讨 AngularJS 的其他功能和用法。