AngularJS - 跨多个控制器/ UI元素管理URL更改

Question

构建一个Angular应用程序,我喜欢使用ng-controller和自定义指令来构建应用程序,例如:

<nav ng-controller="NavController"></nav>
<date-picker></date-picker>

我喜欢这些模式,因为它们是声明性的,并且非常容易理解 - 您确切地知道在哪里寻找支持逻辑.

另一方面,使用ng-view,甚至ui-router插件(在我看来)抽象出一些功能并使其更难阅读.

但是,我的首选模式在以逻辑方式响应应用程序范围内的URL更改时给我一个问题.我希望UI的每个部分都能适当地响应URL更改,但我不知道在哪里放置代码.我假设我有两个选择:

1. 在每个控制器或指令中单独响应$ location更改
2. 将此封装在一些其他类或服务中,该类或服务负责监听URL更改

我不知道怎么做.

选项一让我完全控制,但我无法利用ng-route - 解析参数等.在检查URL更改时,我真的必须自己动手.

对于选项二,我无法引用任何控制器,因为它们已经被声明了!

更广泛地说,我担心的是,没有立即找到解决方案表明我必须正确地思考问题.这根本错了吗？

编辑:为了避免疑问,我非常谈论SPA,更具体地说,这是我正在尝试做的事情:

<nav ng-controller="NavController"><!-- more HTML here --></nav>
<div ng-controller="VideoController"><!-- more HTML here --></div>
<div ng-controller="CommentController" ng-show="Active"><!-- more HTML here --></div>

现在,假设我导航到:"/ video /:key /" - 我希望VideoController获取视频密钥,并执行加载视频所需的操作.我希望NavController突出显示哪个菜单项是活动的,等等.

如果我导航到"/ video /:videokey/comment" - 我希望VideoController加载视频,并使用NavController突出显示哪个是活动的,以及CommentController加载评论/显示在视频中等等.

这个想法我没有理解 - 响应两个控制器中的URL更改,每个控制器负责单页应用程序中UI的单独部分.

Answer 1

尝试 Angular-ui 路由器。它可以是您需要的库。Github 上的项目： https: //github.com/angular-ui/ui-router