AngularJS - 如果路由包含语言前缀(动态加载视图),则为Controller加载不同的视图

时间:2015-09-19 19:44:30

标签: angularjs mvvm multilingual angularjs-service angularjs-routing

我正在使用 Dan Wahlin的AngularJS 教程作为角度的种子项目。 代码可以在这里找到: https://github.com/DanWahlin/CustomerManager

我无法使其适用于两种不同的语言。 例如。当路线为:/en/customers/customers时,我想要显示customers.html文件夹中的/Views/视图,如果路线是/fr/customers我想要加载customers.html目录中的/Views/fr ng-view。 问题是路由在app.config中注册。注册路线后,如何更改它们以用于其他语言?

加载网站并向用户显示主页后,我有一个链接显示更改语言。点击链接后,我希望所有路线现在都有/fr/routeName而不是/routeName。我怎样才能做到这一点。 如何记住语言并将所有路由重新路由到/fr/routeName而不是默认/routeName。 一旦用户单击更改语言按钮,我尝试使用$location.search('lang','fr')附加查询字符串值。但每次单击链接时,查询字符串都会消失。即使我有查询字符串,从现在开始如何告诉Angular,仅使用/View/fr作为Views的基本目录而不是/Views,因为queryString包含lang=fr

早些时候,我曾经使用 Kendo的MVVM 框架制作MVVM应用程序,我曾经在/views/fr文件夹中添加fr视图,其中{{1}具有相同的名称和英文视图}} 目录。然后我在Viewmodel中检查了如果查询字符串包含fr,我从/Views文件夹编译fr模板,否则我从/View/fr文件夹加载模板。

*这是 app.js 文件,其中包含app.config: app.js

*这是 routeResolver 服务,它具有硬编码视图的基本目录: routeResolver.js

简而言之:

1)如何在用户点击链接或按钮后存储用户所选语言,是否可以查询出去的方式?或者,从那时起,我可以为控制器的每个请求设置默认路由指向/ fr吗? 2)如果queryString包含lang = fr,我如何告诉angular到/ Views / fr而不是/ Views来获取fr视图。

我是角色新手,与服务,工厂,提供商等混淆。配置中没有服务,我们必须使用提供商,虽然我没有运行块中的提供商,而是我们必须使用服务。在我掌握它之前需要时间。我将不胜感激任何帮助。您可以参考Dan Wahlin的git hub项目,请告诉我如何更改它以响应其他语言。目前,View目录在routeResolver.js中被硬编码为/Views。一旦应用程序加载,用户点击后如何将其设置为/ views / fr,用户选择法语为默认语言。

1 个答案:

答案 0 :(得分:2)

我非常喜欢角度翻译以实现国际化。它通过外部化字符串来工作,然后你只有一个视图,根据设置的语言替换字符串。你应该检查一下:https://angular-translate.github.io/