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) {
//頁面選擇
$routeProvider.when("/home",{
// template:"<h2>這是主頁面</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.寫cel的控制器
myapp.controller("celCtrl",function ($scope,$routeParams) {
//根據(jù)傳過來的參數(shù)給輸入框賦值
var param = $routeParams["sub"];
if(param=="a"){
$scope.mname="我想提建議...";
}else if(param=="b"){
$scope.mname="我想購買..."
}
});
5.通過about頁面?zhèn)髦到ocel頁面
<p>About頁面</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頁面的輸入框的值
<p>顯示頁面</p> <ul> <li><input type="text" placeholder="sub" ng-model="mname"></li> <li><input type="text" placeholder="Message" ng-model="minfo"></li> </ul>
最后是頁面布局
<body ng-app="myapp"> <!--頁面布局--> <header> <p>我的站點(diǎn)</p> <div> <a href="#home" rel="external nofollow" >主頁</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>
看看效果:
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹AngularJS 過濾器,這里提供詳細(xì)了AngularJS 過濾器詳細(xì)資料,并提供簡單實(shí)例,有需要的朋友可以參考下2016-07-07
Renderer2 類是 Angular 提供的一個(gè)抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過代碼示例給大家講解的非常詳細(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 入門教程之HTML DOM實(shí)例詳解
本文主要介紹AngularJS HTML DOM,這里幫大家整理了詳細(xì)的資料,并附實(shí)例代碼詳細(xì)講解,有需要的小伙伴可以參考下2016-07-07
詳解Angular Karma測試的持續(xù)集成實(shí)踐
這篇文章主要介紹了詳解Angular Karma測試的持續(xù)集成實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
AngulaJS路由 ui-router 傳參實(shí)例
本篇文章主要介紹了AngulaJS路由 ui-router 傳參實(shí)例 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
ionic是一個(gè)垮平臺(tái)開發(fā)框架，可通過web技術(shù)開發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了AngularJS指令與指令之間的交互功能,結(jié)合實(shí)例形式分析了AngularJS指令交互操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12