下面是一个简单的 AngularJS 引导程序的示例:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 引导程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>{{ greeting }}</h2>
</div>
<script>
// 创建 AngularJS 模块
var app = angular.module('myApp', []);
// 在模块中定义控制器
app.controller('myCtrl', function ($scope) {
$scope.greeting = 'Hello, AngularJS!';
});
</script>
</body>
</html>
在这个例子中:
1. <html ng-app="myApp">:通过 ng-app 指令告诉 AngularJS 将应用程序引导到名为 myApp 的模块。
2. <div ng-controller="myCtrl">:通过 ng-controller 指令将控制器 myCtrl 关联到 <div> 元素。
3. var app = angular.module('myApp', []);:创建一个名为 myApp 的 AngularJS 模块。
4. app.controller('myCtrl', function ($scope) { /* 控制器逻辑 */ });:在模块中定义名为 myCtrl 的控制器,该控制器使用了 AngularJS 的依赖注入机制(通过 $scope)。
5. {{ greeting }}:使用表达式将 greeting 属性绑定到视图中,显示问候语。
当浏览器加载这个 HTML 文件时,AngularJS 将自动进行引导程序,初始化模块并执行控制器中的逻辑,最终在页面上显示问候语。
需要注意的是,上述示例使用的是 AngularJS 1.x 版本。如果你要学习 Angular(不再使用 "JS" 后缀)的新版本,如 Angular 2+,引导程序的概念会有一些不同。在 Angular 中,通常使用 AppModule 类和 platformBrowserDynamic().bootstrapModule(AppModule) 来进行引导。
转载请注明出处:http://www.pingtaimeng.com/article/detail/4883/Angular