快捷導(dǎo)航

AngularJS利用Controller完成URL跳轉(zhuǎn)

更新時間：2016年08月09日 11:40:52 投稿：daisy

本文的主要內(nèi)容是介紹在AngularJS中怎樣利用Controller實現(xiàn)URL跳轉(zhuǎn)，本文給出了實例代碼，簡單明了，有需要的可以參考學(xué)習(xí)。

具體寫法舉例：

1.js定義一個controller

function MyCtrl($scope, $location) {

  $scope.jumpToUrl = function(path) {

    //TODO:add code here

  };

}

2.html里面應(yīng)用controller

<div ng-controller=‘MyCtrl'>

  <button ng-click="jumpToUrl('/signin')">signin</button>

</div>

3.controller里面TODO的位置填入

$location.path(path);

然后運行起來就可以看效果了。

假設(shè)當(dāng)前頁面的url是：http://127.0.0.1:8080/#/home

$location.path(path);執(zhí)行后就會跳到http://127.0.0.1:8080/#/signin

如果你發(fā)現(xiàn)頁面不能正常跳轉(zhuǎn)，可以在$location.path(path);后面再加上一句

var curUrl = $location.absUrl(); //用來顯示url全路徑

調(diào)試跟蹤頁面時查看curUrl的值到底變成多少，大概就能猜出問題出在哪了。

好了，以上就是在AngularJS利用Controller完成URL跳轉(zhuǎn)的全部內(nèi)容，希望本文對大家學(xué)習(xí)AngularJS有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS 控制器 controller的詳解
這篇文章主要介紹了AngularJS 控制器 controller的詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-10-10
詳解Angular動態(tài)組件
本文主要介紹了Angular動態(tài)組件，對此感興趣的同學(xué)，可以親自實驗一下。
2021-05-05
利用Angularjs和bootstrap實現(xiàn)購物車功能
在學(xué)習(xí)了如何簡單開始一個Angular程序之后，跟著網(wǎng)上的教程我也來實現(xiàn)一個購物車功能，為了減少頁面樣式設(shè)計我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。
2016-08-08
AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下
2016-11-11
AngularJS下對數(shù)組的對比分析
下面小編就為大家?guī)硪黄狝ngularJS下對數(shù)組的對比分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
深究AngularJS——ng-checked（回寫：帶真實案例代碼）
本篇文章主要介紹了深究AngularJS——ng-checked（回寫：帶真實案例代碼），具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Angular CLI 使用教程指南參考小結(jié)
這篇文章主要介紹了Angular CLI 使用教程指南參考小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
AngularJS基礎(chǔ) ng-cloak 指令簡單示例
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎(chǔ)資料,和簡單的代碼實例及效果圖,學(xué)習(xí)AngularJS指令的朋友可以參考下
2016-08-08
Angular應(yīng)用程序的Hydration基本概念詳解
這篇文章主要為大家介紹了Angular應(yīng)用程序的Hydration基本概念詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
使用AngularJS對路由進(jìn)行安全性處理的方法
這篇文章主要介紹了使用AngularJS對路由進(jìn)行安全性處理的方法,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下
2015-06-06