`
Notebookdong
  • 浏览: 122306 次
社区版块
存档分类
最新评论

angular js ui router 动态菜单

 
阅读更多

 使用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

分享到:
评论

相关推荐

    angular-ui-route-v1.0.0-rc.1

    《AngularJS中的UI-Router详解:以angular-ui-route-v1.0.0-rc.1为例》 ...在实际项目中,结合`angular-ui-router.js`或`angular-ui-router.min.js`文件,可以快速集成并发挥UI-Router的强大作用。

    前端项目-angular-ui.zip

    Angular UI,现在通常被称为Angular Material或Angular UI Router,是AngularJS生态系统的一部分,提供了一系列可定制的UI组件,如按钮、表单、网格、导航菜单等。Angular Material是Google维护的官方UI组件库,适用...

    angular-ui-utils:angular-ui-utils的编译版本

    2. **ui-router**: 虽然不是`angular-ui-utils`的一部分,但`angular-ui-router`是一个非常流行的可选路由插件,它提供了更强大的状态管理功能,如嵌套路由、命名视图等。 3. **ui-mask**: 这个模块提供了输入掩码...

    Angular 路由demo

    对于更复杂的路由需求,如嵌套路由、命名视图和动态路由参数,Angular推荐使用ui-router库,它提供了更丰富的功能。 ### 2. UI-Router介绍 UI-Router是AngularJS的一个第三方路由库,适用于Angular 1.x。尽管...

    详解Angular-ui-BootStrap组件的解释以及使用

    现在回到Angular-ui-BootStrap组件,这个库包含了多种Bootstrap组件的Angular实现,例如模态框、下拉菜单、按钮组、警告、表单控件等。下面我们将详细讨论其中的`uib-tooltip`组件。 `uib-tooltip`是Angular-ui-...

    angular-gulp-boilerplate:具有ngResource,UI路由器,Angular Bootstrap UI,SASS和Gulp的Boilerplate Angular应用程序(无jQuery)

    **Angular Bootstrap UI** (ui-bootstrap) 是AngularJS版本的Bootstrap组件集,它允许开发者在AngularJS应用中直接使用Bootstrap的功能,如模态框、下拉菜单、按钮组等,无需引入jQuery。这使得开发过程更加轻量级,...

    OnsenUI-router:带有ui-router的OnsenUI示例应用程序

    该示例应用程序的目的是展示如何在实际项目中设置和配置ui-router,以及如何与OnsenUI组件(如页面、侧滑菜单、模态对话框等)无缝协作。通过分析这个项目,开发者可以学习到以下关键知识点: 1. **安装和集成Onsen...

    Angular Vue Easy UI ExtJS前端框架视频教程.zip

    **Easy UI** 是基于jQuery的一款轻量级前端UI库,它为开发者提供了大量的预定义样式和组件,如表格、下拉菜单、按钮等,便于快速搭建美观的界面。Easy UI适用于那些需要快速原型设计或不希望深度定制UI的项目,它...

    angular2-tour-of-heroes-master

    这个项目是Angular2-Tour-of-Heroes的源代码,它是一个典型的SPA示例,涵盖了从创建新项目到实现动态数据绑定、路由、服务、组件通信等关键特性。 **1. Angular2核心概念** Angular2的核心组件包括模块(Module)、...

    js库在element ui中能用到

    Element UI是一个基于Vue.js的开源组件库,它提供了丰富的UI组件,如表格、按钮、提示、下拉菜单等,极大地提高了开发者的工作效率。而JavaScript库则是一组预定义的函数和对象,用于简化特定任务的编程,如数据处理...

    三级菜单后台系统ui框架模板.zip

    现代前端框架,如React、Vue.js或Angular,可以与后端Java服务紧密集成,实现前后端分离的开发模式。 6. **数据管理**:后台系统往往需要处理大量数据,因此需要数据库支持。MySQL、Oracle或MongoDB等数据库管理...

    前端项目-angular-foundation-6.zip

    3. **AngularUI**: AngularUI是AngularJS的一个扩展,提供了额外的UI组件,如Bootstrap和UI Router,增强了AngularJS的功能。 4. **响应式设计**: 响应式设计允许网站根据访问设备的屏幕大小和方向自动调整布局,...

    Java动态树形权限菜单JavaScript+SqlServer2005

    对于树形结构,可以利用jQuery UI的Treeview插件,或者使用更现代的库如D3.js或Angular Material的Tree组件。这些库提供了丰富的API和事件处理,允许根据后端返回的数据动态生成和更新树形结构。 3. **SQL Server ...

    基于angular50仿饿了么APP

    - **Angular Router**:Angular 5中的路由器允许我们在不同的组件之间进行导航。在这个项目中,我们需要配置路由表,设置各个页面的路径,并在链接上使用`routerLink`指令进行导航。 4. **响应式布局和移动优化** ...

    FINE_NavbarDirective:可以建立FINE菜单的Angular指令

    FINE NAVBAR指令该项目通过angular-ui / ui-router模块设置了FINE的菜单(位于顶部的导航栏):组件fine-navbar.html :包含HTML片段(HTML5 NAV元素,有关更多信息,请参见),并带有主菜单的占位符ui-navbar.js :...

    inspinia admin 2.7.1 Angular

    1. **Angular核心库**:包含Angular框架的核心模块,如core、common、router等,这些是构建Angular应用的基础。 2. **Bootstrap样式和组件**:提供了丰富的预定义样式和可复用的UI组件,如导航栏、模态框、表格、...

    NgMatero基于AngularMaterial搭建的中后台管理框架

    Angular Material的核心是CSS样式、JavaScript逻辑以及SVG图标,通过模块化的方式集成到Angular应用中,方便开发者按需引入。 **Ng-Matero** 则是在Angular Material基础上进一步封装和扩展的框架,旨在提供更便捷...

    商业编程-源码-Outlook式样界面菜单和页面控制.zip

    6. **路由管理**:在多页面视图中,路由管理(如React Router或Angular Router)非常重要,它负责在不同视图间导航。 7. **异步操作**:处理如加载数据、保存更改等异步操作时,可以利用Promise、async/await或...

    angular-desktop-app:这是使用AngularJS创建桌面应用程序的简单应用程序框架。 此应用程序使用node-webkit作为我们的桌面主机,bower安装了node-webkit支持的客户端库以及普通的npm模块

    Angular桌面应用 这是使用AngularJS创建桌面应用程序的简单应用程序框架。 此应用程序使用node-webkit... 将项目迁移到angular-ui-router,这与管理复杂的UI状态更加契合,而富桌面应用程序则需要管理复杂的UI状态。

    仿阿里云菜单,一级到三级

    这些框架都有丰富的UI库,如Ant Design(与阿里云有关联)和Element UI,它们提供了现成的导航菜单组件,可以快速搭建出类似阿里云的菜单结构。 2. **路由管理**:对于一个多级菜单系统,路由管理至关重要。React ...

Global site tag (gtag.js) - Google Analytics