如何使用angularjs處理動態菜單?

場景是這樣的:用戶登錄後,根據不同的用戶角色,展示不同的菜單。但angular本身一般只做靜態的路由和controller,導致無法動態生成菜單和菜單對應的路由url以及url對應的子頁面。在網上查了很多解決方案,很多都是用requirejs加angular-ui-router,但都不完整。如何才能做到「動態發請求取到菜單信息,動態生成菜單dom,動態生成路由,點擊菜單後動態載入controller和模板頁面」?各位有什麼好辦法嗎?如果有案例的最好能提供一下github地址。如果沒有方案,是不是我這種思路有問題,這種場景是傳統的jQuery負責的,angular並不應該處理這種場景?

--------------------------------------

可能是我沒描述清楚。是這樣的,菜單對應url,指向一個頁面,這不就是路由應該處理的嗎?動態生成菜單意味著菜單的url對應的路由和頁面都得動態載入吧。


這個需求中,兩個關鍵點:

菜單所需代碼的動態載入

菜單路由的動態配置

這個地方,其實不是很有必要去按照ui-router或者什麼來配置路由,完全可以自己實現一個功能載入器:

$stateProvider
//動態菜單
.state("Menu", {
url: "/menu/:code",
templateUrl: "modules/menuloader.html"
});

然後這個menuloader.html裡面,只放一個ng-include,它的地址關聯到一個動態變數,這個變數根據傳入的那個code去讀取。

在這個state的resolve裡面,根據code獲取到菜單對應的html地址,js地址,然後用動態載入控制器的方式把js載入完成,然後把html地址賦值給上一段里提到的那個變數。

這樣,你就沒有定義多個路由,而是直接用一個路由的配置完成了所有的動態獲取過程,菜單以後可以任意無限加,不用改任何公共代碼。


1. 既然你使用了 ui-router,說明你的應用是 單頁程序,既然是單頁程序,首先要考慮動態路由是否有必要?只要根據用戶角色 顯示該角色可以訪問的菜單即可,在每次路由切換的時候判斷下是否有訪問此路由的許可權,沒有就跳轉到指定頁面即可;

2. 至於你說的動態載入 是想根據用戶角色動態返回指定角色的路由、模板、controller js嗎?一般項目把所有的js和模板都打包壓縮成一個js,反而效果更好;

3. 如果你非要想根據角色動態生成路由,可以在angular還沒有啟動的時候獲取該用戶角色的所有路由(也可以說菜單),然後循環菜單 通過 ui-router 動態加入即可;

4. 這樣只有路由是動態載入了,關於每個路由對應的js,如果你也想實現 動態載入的話,估計就需要使用類似 requirejs 的東西,比如 marcoslin/angularAMD · GitHub 或者 atian25/angular-lazyload · GitHub 或者自己寫一個也可以,原理就是在 路由的 resolve 中載入對應的js

5. 模板感覺就不需要動態載入了吧,因為使用ng,模板都是前端模板,如果要根據角色動態生成模板豈不是變成服務端渲染了。

說了這麼多 還是不建議使用 ng的時候採用動態載入技術,其中包括 動態載入js、模板、路由。

上面說的 3、4、5 我自己並沒有嘗試過,理論上應該是可以的,如果你非要做可以自己嘗試,想找完整的示例估計很難,因為很少人這麼做。


這個問題我遇到過 我來說說我的解決方案

首先我的項目採用angularJS +requireJS + ui-router

實現了 動態按需求載入html 和controller 以及動態配置路由

本人文筆有限 直接說我是怎樣實現的。

首先在 mian.js中初始化模塊

require(["domReady!",app],function( document){
angular.bootstrap(document, [myModule])
})

初始化模塊以後 需要重新註冊各項服務 關於為何要這樣 可以詳細看答案 各位大神已經詳細說明了

AngularJS按需動態載入template和controller?

AngularJS按需動態載入template和controller? - 前端開發框架和庫

var app = angular.module("myModule", [ui.router]);
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide,$stateProvider){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同樣的,這裡也可以保存directive/filter/service的引用
directive: $compileProvider.directive,
filter: $filterProvider.register,
service: $provide.service,
factory:$provide.factory,
stateProvider:$stateProvider
};

這個文件返回 app 對象, 在另外一個文件中單獨返回app.register , 這樣 其他需要使用這些服務的 就不用寫 app.register.controller("balabala 反正我是這樣寫的 。

define(["app"],function(app){

return app.register;

})

在另一個文件中寫了一個公共方法 作為ui-router 配置的公共調用方法

代碼如下

這裡return 了一個routerState 方法 ,外部可以調用這個方法對其傳參 這個方法可以實現自動配置路由

關鍵是調用這個方法 這個是在register 裡面配置了的app.stateProvider.state()

define(["config/appregister"],function(app) {
return {
routerState:function(state,url,ctrl,params) {
if(!angular.isString(state)||!angular.isString(url) || !angular.isString(ctrl)){
return
}
var strurl = ctrl;
var ctrlName = strurl.substring(strurl.lastIndexOf(/)+1);
//todo 字元串匹配校驗待做!
app.stateProvider.state(state,{
url:"/"+ state,
controller: ctrlName,
templateUrl: url,
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//非同步載入controller/directive/filter/service
require([
ctrl
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
}
}

})

這樣 寫好了公共文件 。現在加入我的業務分成幾個模塊

我要實現 當用戶 點擊具體模塊的時候再 載入器對應的模塊下的路由配置

看到這裡其實就講完了 下面的嘮叨可以不看了 `-` `-` `-` `-` `-` `-` `-` `-` `-` `-` `-`

下面在業務模塊中寫了個方法具體來調用上面的方法 實現路由配置

我做的demo 目錄大概是這樣的

下面這個文件是我一個業務的模塊的主文件, 在載入這個主文件的時候 , 先調用上面的方法生成該業務下的路由 。

代碼如下:

先調用上面的routerState 方法 對其傳參 ,執行完以後就配置好了 。

define([config/routerconfig],function(router){
router.routerState("routertest","app/business/home/partials/routertest.html","business/home/controllers/routertestCtrl");
})

在配置好了以後 點擊上面配置的路由 可以跳轉到剛配好的路由上去

define(["business/home/config/routerconfig",config/appregister],function(routercongfig,app){
app
.controller(localCtrl,function($scope,$state){
$scope.str = 作為主文件同時配置home 業務模塊下的細分模塊;
$scope.state = function(){
$state.go("routertest");
}

})

})

先寫到這兒 ,現在項目才立項 ,剛好昨天實現了這個 後面有優化方案 再來填坑吧

------------------------------------2016/8/13

補充一點 ,

1 之前有朋友下載了我的demo 打包出現問題 解釋一下 ,因為angularJS控制器裡面是注入服務多數情況下不是嚴格的 ["$scope",function($scope){

}] 按照這種方式來寫的 ,二是直接寫成 app.controller(function($scope,$q,balabala){}) , 這種推斷注入在項目運行時框架內可以識別 但是打包後 都變成 a ,b , c 了 所以最後會報注入錯誤, 項目打包的時候需要先用ngAnnotate 處理一下注入問題,

我是用的 gulp 工具做的處理 方法如下

var gulp = require(gulp);

var ngAnnotate = require(gulp-ng-annotate);

gulp.task(default, function () {

return gulp.src(dashboard/app/**/*.js)

.pipe(ngAnnotate())

.pipe(gulp.dest(dist));

});

通過這個任務流處理以後 就可以將原來推斷注入全部轉換成顯式注入

然後呢 ,就可以愉快的打包了 。

2 ,項目後期可以做通過控制路由來配置角色許可權 以及其他操作

$rootScope.$on($stateChangeStart, function(event, toState, toParams, fromState, fromParams) {
$rootScope.routerToStateName = toState.name;
if(toState.name =="login"){
auth.setFormState(fromState.name);
}
if(fromState.name.indexOf("search")&>-1toState.name.indexOf("search")&<0){ $rootScope.GLOBALKEYWORD = "" } //鑒別當前角色是否具有路由訪問許可權 if( !auth.isAccessUrl(toState.name)){ $state.go("indexCtrl"); event.preventDefault(); } 。。。

我把代碼貼到我的github上面去了 歡迎交流GitHub - yangfan0095/angularJs-uiRouter-RequireJsDemo: angularJs-uiRouter-RequireJs demo 實現模塊按需求載入 路由配置 按需求載入 歡迎交流。


如果動態菜單數量可控,可以用不同的頁面,然後登錄時候跳轉到相應頁面。這對緩存有好處


動態生產菜單我有個例子 https://github.com/hjzheng/angular-cuf-nav ,至於路由的話是提前配置好的,當然你可以用gulp插件生產配置。


這個跟路由有什麼關。。。

你居然問如何才能做到動態發請求取到菜單信息,難道不是ajax請求取得數據嗎?既然取得數據了,你居然還問,如果動態生成dom,你需要生成dom嗎?你都有數據了,ng-repeat不會嗎?你不是在用angular嗎?


這種生成的動態菜單,可以點擊展開和收起嗎?使用了ng-repeat後,數據全部取到,但是無法跳轉,再問一個問題,如何在ng-repeat載入數據時,添加樣式,比如class名???


@小豬 同意你的說法呀。感覺完全沒必要麼。


ui-router提供傳入參數的,不能用參數來作區分嗎,一定要在路由的層面去解決?


推薦閱讀:

angular中控制器之間的傳值該怎麼實現?
關於ng-click中this的指向問題?
angularjs中不同頁面controller中數據傳遞的問題?
angularJS適不適合做互聯網金融產品?

TAG:前端開發 | 前端工程師 | 前端開發框架和庫 | AngularJS |