使用ui-router做动态路由
//controller app.controller('DynamicCtrl', function($scope, $stateParams) { $scope.include = 'tpl/'+$stateParams.code +""; });
//config ui-router $stateProvider .state('app.menu',{ url:'/menu/:code', controller:'DynamicCtrl', //template: '<div ng-include="include"></div>' templateUrl:'tpl/menuloader.html' });
menuloader.html
<div ng-include="include"></div>
menu
<a href="#/app/menu/menu.html">menu</a>
另外可以参考这里的回答
http://stackoverflow.com/questions/17157365/how-do-i-dynamically-load-a-template-based-on-parameters-in-a-route-registered-w
相关推荐
《AngularJS中的UI-Router详解:以angular-ui-route-v1.0.0-rc.1为例》 ...在实际项目中,结合`angular-ui-router.js`或`angular-ui-router.min.js`文件,可以快速集成并发挥UI-Router的强大作用。
Angular UI,现在通常被称为Angular Material或Angular UI Router,是AngularJS生态系统的一部分,提供了一系列可定制的UI组件,如按钮、表单、网格、导航菜单等。Angular Material是Google维护的官方UI组件库,适用...
2. **ui-router**: 虽然不是`angular-ui-utils`的一部分,但`angular-ui-router`是一个非常流行的可选路由插件,它提供了更强大的状态管理功能,如嵌套路由、命名视图等。 3. **ui-mask**: 这个模块提供了输入掩码...
对于更复杂的路由需求,如嵌套路由、命名视图和动态路由参数,Angular推荐使用ui-router库,它提供了更丰富的功能。 ### 2. UI-Router介绍 UI-Router是AngularJS的一个第三方路由库,适用于Angular 1.x。尽管...
现在回到Angular-ui-BootStrap组件,这个库包含了多种Bootstrap组件的Angular实现,例如模态框、下拉菜单、按钮组、警告、表单控件等。下面我们将详细讨论其中的`uib-tooltip`组件。 `uib-tooltip`是Angular-ui-...
**Angular Bootstrap UI** (ui-bootstrap) 是AngularJS版本的Bootstrap组件集,它允许开发者在AngularJS应用中直接使用Bootstrap的功能,如模态框、下拉菜单、按钮组等,无需引入jQuery。这使得开发过程更加轻量级,...
该示例应用程序的目的是展示如何在实际项目中设置和配置ui-router,以及如何与OnsenUI组件(如页面、侧滑菜单、模态对话框等)无缝协作。通过分析这个项目,开发者可以学习到以下关键知识点: 1. **安装和集成Onsen...
**Easy UI** 是基于jQuery的一款轻量级前端UI库,它为开发者提供了大量的预定义样式和组件,如表格、下拉菜单、按钮等,便于快速搭建美观的界面。Easy UI适用于那些需要快速原型设计或不希望深度定制UI的项目,它...
这个项目是Angular2-Tour-of-Heroes的源代码,它是一个典型的SPA示例,涵盖了从创建新项目到实现动态数据绑定、路由、服务、组件通信等关键特性。 **1. Angular2核心概念** Angular2的核心组件包括模块(Module)、...
Element UI是一个基于Vue.js的开源组件库,它提供了丰富的UI组件,如表格、按钮、提示、下拉菜单等,极大地提高了开发者的工作效率。而JavaScript库则是一组预定义的函数和对象,用于简化特定任务的编程,如数据处理...
现代前端框架,如React、Vue.js或Angular,可以与后端Java服务紧密集成,实现前后端分离的开发模式。 6. **数据管理**:后台系统往往需要处理大量数据,因此需要数据库支持。MySQL、Oracle或MongoDB等数据库管理...
3. **AngularUI**: AngularUI是AngularJS的一个扩展,提供了额外的UI组件,如Bootstrap和UI Router,增强了AngularJS的功能。 4. **响应式设计**: 响应式设计允许网站根据访问设备的屏幕大小和方向自动调整布局,...
对于树形结构,可以利用jQuery UI的Treeview插件,或者使用更现代的库如D3.js或Angular Material的Tree组件。这些库提供了丰富的API和事件处理,允许根据后端返回的数据动态生成和更新树形结构。 3. **SQL Server ...
- **Angular Router**:Angular 5中的路由器允许我们在不同的组件之间进行导航。在这个项目中,我们需要配置路由表,设置各个页面的路径,并在链接上使用`routerLink`指令进行导航。 4. **响应式布局和移动优化** ...
FINE NAVBAR指令该项目通过angular-ui / ui-router模块设置了FINE的菜单(位于顶部的导航栏):组件fine-navbar.html :包含HTML片段(HTML5 NAV元素,有关更多信息,请参见),并带有主菜单的占位符ui-navbar.js :...
1. **Angular核心库**:包含Angular框架的核心模块,如core、common、router等,这些是构建Angular应用的基础。 2. **Bootstrap样式和组件**:提供了丰富的预定义样式和可复用的UI组件,如导航栏、模态框、表格、...
Angular Material的核心是CSS样式、JavaScript逻辑以及SVG图标,通过模块化的方式集成到Angular应用中,方便开发者按需引入。 **Ng-Matero** 则是在Angular Material基础上进一步封装和扩展的框架,旨在提供更便捷...
6. **路由管理**:在多页面视图中,路由管理(如React Router或Angular Router)非常重要,它负责在不同视图间导航。 7. **异步操作**:处理如加载数据、保存更改等异步操作时,可以利用Promise、async/await或...
Angular桌面应用 这是使用AngularJS创建桌面应用程序的简单应用程序框架。 此应用程序使用node-webkit... 将项目迁移到angular-ui-router,这与管理复杂的UI状态更加契合,而富桌面应用程序则需要管理复杂的UI状态。
这些框架都有丰富的UI库,如Ant Design(与阿里云有关联)和Element UI,它们提供了现成的导航菜单组件,可以快速搭建出类似阿里云的菜单结构。 2. **路由管理**:对于一个多级菜单系统,路由管理至关重要。React ...