步骤 1: 引入 AngularJS 1.5
在你的 HTML 文件中引入 AngularJS 1.5 的库：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 1.5 教程</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
</head>
<body>
<!-- AngularJS 应用将在这里运行 -->
<script>
// AngularJS 1.5 模块定义
var app = angular.module('myApp', []);
</script>
</body>
</html>
步骤 2: 创建控制器
定义一个简单的控制器，负责处理页面上的逻辑：
<script>
// 在模块中定义控制器
app.controller('myCtrl', function ($scope) {
$scope.message = 'Hello, AngularJS 1.5!';
});
</script>
步骤 3: 使用控制器和表达式
在页面上使用刚才创建的控制器和表达式：
<body ng-controller="myCtrl">
<h2>{{ message }}</h2>
</body>
步骤 4: 添加路由
引入 ngRoute 模块，使用路由配置不同的视图：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-route.min.js"></script>
<script>
// 在模块中配置路由
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/'
});
});
</script>
步骤 5: 创建模板
在项目中创建模板文件 home.html 和 about.html：
<!-- home.html -->
<h2>{{ message }}</h2>
<!-- about.html -->
<h2>About Us</h2>
步骤 6: 定义控制器
为每个视图定义相应的控制器：
<script>
app.controller('HomeController', function ($scope) {
$scope.message = 'Welcome to the Home Page!';
});
app.controller('AboutController', function ($scope) {
$scope.message = 'This is the About Us Page.';
});
</script>
这是一个简单的 AngularJS 1.5 教程，涉及到了模块、控制器、表达式、路由等基本概念。请注意，由于 AngularJS 1.x 已经不再是主推版本，建议在新项目中使用 Angular 2 及更高版本。如果需要更详细的内容，建议查阅 AngularJS 1.5 官方文档。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4879/Angular