angularjs路由傳值$routeParams詳解
更新時(shí)間：2020年09月05日 10:46:41 作者：XJian
這篇文章主要為大家詳細(xì)介紹了angularjs路由傳值$routeParams的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
AngularJS利用路由傳值，供大家參考，具體內(nèi)容如下
1.導(dǎo)包
<script src="angular.min.js"></script> <script src="angular-route.js"></script>
2.依賴注入ngRoute
var myapp=angular.module("myapp",["ngRoute"]);
3.配置路由
myapp.config(function ($routeProvider) {
//頁(yè)面選擇
$routeProvider.when("/home",{
// template:"<h2>這是主頁(yè)面</h2>"
templateUrl:"home.html"
}).when("/about",{
// template:"<h2>這是關(guān)于我們的信息</h2>"
templateUrl:"about.html"
}).when("/cel",{
// template:"<h2>請(qǐng)聯(lián)系我們</h2>"
templateUrl:"cel.html",
// controller:"celCtrl"
}).when("/cel/:sub",{//傳參數(shù)
templateUrl:"cel.html",
controller:"celCtrl"
})
});
4.寫(xiě)cel的控制器
myapp.controller("celCtrl",function ($scope,$routeParams) {
//根據(jù)傳過(guò)來(lái)的參數(shù)給輸入框賦值
var param = $routeParams["sub"];
if(param=="a"){
$scope.mname="我想提建議...";
}else if(param=="b"){
$scope.mname="我想購(gòu)買..."
}
});
5.通過(guò)about頁(yè)面?zhèn)髦到ocel頁(yè)面
<p>About頁(yè)面</p> <ul> <li><a href="#cel/a" rel="external nofollow" >告訴我們</a></li> <li><a href="#cel/b" rel="external nofollow" >詢價(jià)</a></li> </ul>
修改cel頁(yè)面的輸入框的值
<p>顯示頁(yè)面</p> <ul> <li><input type="text" placeholder="sub" ng-model="mname"></li> <li><input type="text" placeholder="Message" ng-model="minfo"></li> </ul>
最后是頁(yè)面布局
<body ng-app="myapp"> <!--頁(yè)面布局--> <header> <p>我的站點(diǎn)</p> <div> <a href="#home" rel="external nofollow" >主頁(yè)</a> <a href="#about" rel="external nofollow" >關(guān)于我們</a> <a href="#cel" rel="external nofollow" >聯(lián)系我們</a> </div> </header> <div ng-view="" class="View"></div> </body>
看看效果:
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS 過(guò)濾器的簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 過(guò)濾器,這里提供詳細(xì)了AngularJS 過(guò)濾器詳細(xì)資料,并提供簡(jiǎn)單實(shí)例,有需要的朋友可以參考下2016-07-07
Renderer2 類是 Angular 提供的一個(gè)抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
Angular中ng?update命令force參數(shù)含義詳解
這篇文章主要為大家介紹了Angular中ng?update命令force參數(shù)含義詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了AngularJS表單驗(yàn)證功能,結(jié)合具體實(shí)例形式分析了AngularJS表單驗(yàn)證的操作步驟、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05
AngularJS 入門(mén)教程之HTML DOM實(shí)例詳解
本文主要介紹AngularJS HTML DOM,這里幫大家整理了詳細(xì)的資料,并附實(shí)例代碼詳細(xì)講解,有需要的小伙伴可以參考下2016-07-07
詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐
這篇文章主要介紹了詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
AngulaJS路由 ui-router 傳參實(shí)例
本篇文章主要介紹了AngulaJS路由 ui-router 傳參實(shí)例 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
ionic是一個(gè)垮平臺(tái)開(kāi)發(fā)框架，可通過(guò)web技術(shù)開(kāi)發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫(xiě)原生語(yǔ)法、頁(yè)面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了AngularJS指令與指令之間的交互功能,結(jié)合實(shí)例形式分析了AngularJS指令交互操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12