<!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>{{ message }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.message = 'Hello, AngularJS!';
});
</script>
</body>
</html>
在这个例子中：
1. 使用 ng-app 指令定义 AngularJS 应用程序的根元素。
2. 使用 ng-controller 指令将控制器关联到一个 HTML 元素。
3. 在控制器中，使用 $scope.message 定义了一个属性，该属性在模板中通过 {{ message }} 表达式绑定。
这是一个非常简单的例子，实际上，AngularJS 的静态模板可以包含更多的复杂结构，包括循环、条件语句等。以下是一个稍复杂一点的例子：
<div ng-controller="myCtrl">
<h2>{{ title }}</h2>
<ul>
<li ng-repeat="item in items">{{ item.name }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.title = 'My List';
$scope.items = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
});
</script>
在这个例子中，使用了 ng-repeat 指令来循环显示一个项目列表。
请注意，这些例子都是在 HTML 文件中内联的静态模板。在实际项目中，为了更好地组织和管理代码，通常会将模板放在单独的文件中，并使用 AngularJS 的路由或其他机制来加载它们。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4884/Angular