天天看點

ui-router是怎樣傳參的

今天碰到一個需求,同僚開發的業務中需要跳到我的業務中,并傳遞參數過來,這就需要将參數通過url路由傳遞過來。在angularjs中該怎樣做呢?

我們知道通常路由控制都是通過引用ui-router庫,調用$stateprovider和$urlrouterprovider服務來控制的,想要在路由中傳遞參數還是要找它們來解決。下面來分别說一下它們各自是怎麼工作的。

$urlrouterprovider一般處理在狀态配置中指定的url路由方式之外的 url 請求的路由方式。

這個東西能不能在路由過程中傳遞參數還沒有實踐過,等研究清楚了再來細說。

在$stateprovider中我們通常是這麼設定的:

這裡我們定義了一個路由search,裡面包含了ui-view需要加載的視圖和controller。現在我們給這個路由添加參數:

隻需要花括号裡面定義參數名就完成了,就是這麼簡單。而且不用花括号,使用冒号也是可以的:

兩種方式有什麼差別呢?簡單說就是花括号的形式功能更加強大,花括号裡面是可以添加正規表達式的:

甚至你還可以使用傳統的http的get方式添加參數:

很靈活很強大吧~接下來就是在到達頁面擷取到這些參數,這需要用到$stateparams服務。

如果url中沒有該參數,我們會得到undefined。