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

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

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

具體寫(xiě)法舉例：

1.js定義一個(gè)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);

然后運(yùn)行起來(lái)就可以看效果了。

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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