angularjs路由传值$routeParams

AngularJS利用路由传值,  

  1.导包

 <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>这是关于我们的信息h2>"
                templateUrl:"about.html"
            }).when("/cel",{
//                template:"<h2>请联系我们h2>"
                templateUrl:"cel.html",
//                controller:"celCtrl"
            }).when("/cel/:sub",{//传参数
                templateUrl:"cel.html",
                controller:"celCtrl"
            })
        });

  4.写cel的控制器

 myapp.controller("celCtrl",function ($scope,$routeParams) {
            //根据传过来的参数给输入框赋值
           var param = $routeParams["sub"];
           if(param=="a"){
               $scope.mname="我想提建议...";
           }else if(param=="b"){
               $scope.mname="我想购买..."
           }
        });

  5.通过about页面传值给cel页面

<p>About页面p>
    <ul>
        <li><a href="#cel/a">告诉我们a>li>
        <li><a href="#cel/b">询价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>我的站点p>
        <div>
            <a href="#home">主页a>
            <a href="#about">关于我们a>
            <a href="#cel">联系我们a>
        div>
    header>
    <div ng-view="" class="View">div>
body>

看看效果:

  angularjs路由传值$routeParams_第1张图片angularjs路由传值$routeParams_第2张图片

angularjs路由传值$routeParams_第3张图片

angularjs路由传值$routeParams_第4张图片

你可能感兴趣的:(angularjs路由传值$routeParams)