ui-router 是一个为 AngularJS 提供的状态管理库，主要用于构建单页应用（SPA）。它提供了一种机制来管理应用的不同状态，每个状态对应一个页面模板或者视图。
HTML5 是 HTML 的一个新标准，主要增加了一些新特性，比如画布（canvas）、地理位置（geolocation）、离线应用（offline applications）、多媒体支持等，同时也在性能上有所提升。
在 HTML5 移动 Web 开发中，我们可以使用 ui-router 来管理应用的状态。以下是一个简单的示例，展示如何在 AngularJS 应用中使用 ui-router：
- 首先，确保你已经在项目中包含了 AngularJS 和 ui-router 的库。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.28/angular-ui-router.min.js"></script>
- 接着，在你的 AngularJS 模块中配置 ui-router。
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
});
});
- 在 HTML 文件中，使用
<ui-view> 指令来表示状态的变化区域。
<body ng-app="myApp">
<ui-view></ui-view>
</body>
- 最后，创建对应的 HTML 模板文件，比如
home.html 和 about.html。
<!-- home.html -->
<div>
<h1>Welcome to the Home Page</h1>
</div>
<!-- about.html -->
<div>
<h1>Welcome to the About Page</h1>
</div>
这样，当用户点击不同的链接或使用地址栏输入不同的 URL 时，ui-router 会根据定义的状态（state）来加载相应的 HTML 模板。这是一个基本的 ui-router 使用示例，实际应用中可能需要更复杂的配置和逻辑。