在AngularJS中，breadcrumb是一种常见的UI元素，用于展示用户在应用程序中的导航路径。它通过显示当前页面相对于根页面的位置，帮助用户理解他们在网站或应用的哪个层级。在本篇文章中，我们将深入探讨如何在AngularJS中添加breadcrumb功能，并且实现国际化（i18n）支持。
我们需要了解AngularJS的基础知识。AngularJS是一个MVC（模型-视图-控制器）框架，用于构建动态Web应用。它提供数据绑定、依赖注入、指令系统等特性，使得开发者可以轻松地创建交互式的前端界面。
1. **安装AngularJS**: 在开始之前，确保你的项目已经安装了AngularJS库。如果还没有，可以通过npm或CDN来引入：
```
npm install angular
```
2. **创建Breadcrumb服务**: 创建一个AngularJS服务，用于管理面包屑的生成和更新。服务是可注入的，可以在应用的不同组件之间共享状态。例如，我们可以创建一个名为`breadcrumbService`的服务：
```javascript
app.factory('breadcrumbService', function() {
var breadcrumbs = [];
return {
addBreadcrumb: function(title, link) {
breadcrumbs.push({title: title, link: link});
},
getBreadcrumbs: function() {
return breadcrumbs;
}
};
});
```
3. **实现Directive**: AngularJS的指令可以扩展HTML的功能。在这里，我们将创建一个`breadcrumb`指令，用于渲染面包屑：
```javascript
app.directive('breadcrumb', function(breadcrumbService) {
return {
restrict: 'E',
template: '<ol><li ng-repeat="crumb in breadcrumbs"><a ng-if="crumb.link" href="{{crumb.link}}">{{crumb.title}}</a><span ng-if="!crumb.link">{{crumb.title}}</span></li></ol>',
link: function(scope) {
scope.breadcrumbs = breadcrumbService.getBreadcrumbs();
}
};
});
```
4. **添加到路由配置**: 当用户导航到新的页面时，更新面包屑。这通常在路由配置中完成，使用`$routeChangeSuccess`事件：
```javascript
app.run(function($rootScope, breadcrumbService) {
$rootScope.$on('$routeChangeSuccess', function(event, currentRoute) {
// 更新面包屑，这里假设当前路由对象有title和link属性
breadcrumbService.addBreadcrumb(currentRoute.title, currentRoute.link);
});
});
```
5. **国际化支持**: 要实现翻译功能，可以使用AngularJS的`ng-i18next`插件或其他类似的库。安装`ng-i18next`：
```
npm install ng-i18next --save
```
接下来，在HTML中引入`ng-i18next`，并在`breadcrumb`指令中使用它：
```html
<ol><li ng-repeat="crumb in breadcrumbs"><a ng-if="crumb.link" href="{{crumb.link}}" ng-i18next="{{crumb.i18nTitle}}"></a><span ng-if="!crumb.link" ng-i18next="{{crumb.i18nTitle}}"></span></li></ol>
```
然后，确保你的项目包含不同语言的翻译文件（如`en.json`, `zh.json`等），并配置`ng-i18next`以加载正确的语言包。
6. **切换语言**: 添加一个用于切换语言的按钮，触发`$i18next.changeLanguage`方法：
```html
<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('zh')">中文</button>
```
在你的控制器中定义`changeLanguage`方法：
```javascript
app.controller('AppController', function($scope, $i18next) {
$scope.changeLanguage = function(lang) {
$i18next.changeLanguage(lang);
};
});
```
通过以上步骤，我们成功地在AngularJS应用中实现了具有国际化支持的面包屑导航。这个功能不仅提供了用户友好的导航体验，还能适应多种语言环境，使你的应用更具全球化视野。在实际开发中，你可能需要根据具体需求进行调整，但上述方法提供了一个良好的起点。
