我正在使用Angular和ui-router创建一个响应式web应用。我需要不同的状态来加载取决于用户的浏览器窗口的大小是通过CSS媒体查询。
。对于主页状态，导航栏将根据活动的媒体查询包含不同的元素:
- 手机浏览器 (320px - 480px)导航栏包含2个按钮(搜索&图标标识)
- 平板电脑浏览器 (480px - 770px)导航栏包含4个按钮(搜索，完整标志，用户资料，设置/选项链接)
- 桌面浏览器 (770px和1500px)导航栏包含6个按钮(完整的logo，搜索，上传，用户资料，设置/选项，注销/登录)
所以我知道我可以只是加载所有6个按钮，只是隐藏某些手机和平板电脑浏览器通过CSS样式，但我正在寻求一个更优雅的方法。我想只加载每个窗口宽度(媒体查询)所需的内容。有没有办法在Angular和ui-router中做到这一点?
我很幸运，一个朋友给我看了这篇文章https://medium.com/opinionated-angularjs/adaptive-web-design-and-angularjs-78e0837fa92，这篇文章基本上可以让我做我需要的事情，但不是通过媒体查询，而是通过Modernizr进行特征检测。
这里是Github项目https://github.com/ghengeveld/angular-adaptive-templating