AngularJS配置路由ngRoute的使用

最新推荐文章于 2020-12-20 12:02:04 发布

原创最新推荐文章于 2020-12-20 12:02:04 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

Angularjs 专栏收录该内容

23 篇文章

订阅专栏

本文将详细介绍如何在AngularJS应用中配置和使用ngRoute模块进行页面路由管理，通过实例讲解ykml.html、mlks.css及select.html等文件在路由中的角色和集成方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ykml.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script src="../angular-1.5.5/angular-route.js"></script><!--配置AngularJS路由的包-->
    <script>
        var myapp=angular.module("myapp",["ngRoute"]);/*一定要注入ngRoute*/

          myapp.config(function ($routeProvider) {
            $routeProvider.when("/cart",{
                templateUrl:"views/cart.html",
                controller:"cartCtrl"
            }).when("/jiesuan",{
                templateUrl:"views/jiesuan.html",
                controller:"jsCtrl"
            }).when("/select",{
                templateUrl:"views/select.html",
                controller:"selectCtrl"
            }).otherwise("/cart",{
                redirectTo:"/cart"
            })
        })
        //写个service存数据，谁想要用就进行调用
        myapp.service("myservice",function () {
                this.hh={
                       categories:[{id:"101",category:"商品01"},
                        {id:"102",category:"商品02"},
                        {id:"103",category:"商品03"},
                        {id:"103",category:"商品04"}],
                    //商品明细
                    products:[
                        {category:"商品01",name:"鼠标",desc:"2016春季爆款",price:"501",imgsrc:"views/images/TB1_50x50.jpg"},
                        {category:"商品01",name:"键盘",desc:"2016夏季爆款",price:"600",imgsrc:"views/images/TB2_50x50.jpg"},
                        {category:"商品01",name:"显示器",desc:"2016春季爆款",price:"321",imgsrc:"views/images/TB1_50x50.jpg"},
                        {category:"商品01",name:"硬盘",desc:"2016夏季爆款",price:"601",imgsrc:"views/images/TB2_50x50.jpg"},
                        {category:"商品02",name:"主机",desc:"2015春季爆款",price:"400",imgsrc:"views/images/TB1_50x50.jpg"},
                        {category:"商品02",name:"音响",desc:"2015夏季爆款",price:"305",imgsrc:"views/images/TB2_50x50.jpg"},
                        {category:"商品04",name:"插线板",desc:"2013夏季爆款",price:"401",imgsrc:"views/images/TB2_50x50.jpg"}
                    ]
                };
                this.dd=[];

        });

    </script>
    <link rel="stylesheet" href="mlks.css">
    <script src="views/cart.js"></script>
    <script src="views/jiesuan.js"></script>
    <script src="views/select.js"></script>


</head>
<body ng-app="myapp">
<div class="div">
    <div id="title">
     <h2>成谋商城</h2>
 </div>
 <div id="div">
     <a href="#cart">购物车</a>
     <a href="#jiesuan">结算</a>
     <a href="#select">查询</a>
 </div>
<div id="dd">
    <ng-view>

    </ng-view>
</div>
</div>
</body>
</html>

mlks.css

*{
    margin: 0;
    padding: 0;
}
body{
    width:1000px;
    height: 1000px;

}
#title{
    width:100%;
    height: 150px;
    margin: 0 auto;
    background: blue;
}
h2{
    width:50%;
    height: 150px;
    color: white;
    text-align: center;

}
a{
    display: block;
    width: 50px;
    height: 20px;
    text-decoration: none;
    border: 1px solid blue;
    margin-top: 50px;
    margin-left: 20px;

}
#div{
    width: 15%;
    height: 100%;
    float: left;
}
#dd{
    width:70%;
    height:100%;
    float: right;

    border: 1px solid black;
}

cart.html

 <p>
    价格区间： <select ng-model="ss">
         <option>--请选择--</option>
         <option>300-400</option>
         <option>401-600</option>
    </select>
     <span>商品名称的查询：<input type="text" placeholder="请搜索商品" ng-model="goods" /></span>
 </p>

<ul>
    <li ng-repeat="item in data.products|filter:goods|filter:pricefilter" style="list-style: none">
        <table>
            <tr>
                <td>
                    <p>{{item.category+item.name}}</p>
                </td>
                <td rowspan="2" style="width: 400px;margin-bottom: 1px">
                    <p style="font-size: 10px">{{item.desc}}</p>
                </td>
                <td>{{item.price|currency:"￥"}}</td>

            </tr>
            <tr>
                <td><img src="{{item.imgsrc}}" style="width: 60px;height: 60px">
                </td>
                <td><button ng-click="add(item)">添加到购物车</button></td>
            </tr>
        </table>
    </li>

</ul>

cart.js

myapp.controller("cartCtrl",function ($scope,myservice) {
    $scope.data=myservice.hh;
    //实现添加的功能
      $scope.dd=myservice.dd;
    $scope.add=function (item) {

        $scope.has=false;   //判断性数组中的名字和要添加的物品名字是否相等，相等说明是同一件商品
        for(var i=0;i< $scope.dd.length;i++){
            //判断性数组中的名字和要添加的物品名字是否相等，相等说明是同一件商品
            if( $scope.dd[i].name==item.name){
                $scope.has=true;
                $scope.dd[i].num++;  //如果是同一件商品添加的时候就让数量加加
                break;
            }else{
                $scope.has=false;
            }
        }
        //判断$scope.has为false时说明是不一样的商品
        if($scope.has==false){
            $scope.dd.push({name:item.name,num:1,price:item.price,done: false});
            alert( $scope.dd.toString());
        }

    };
    //价格区间进行排序
    $scope.ss="--请选择--";
    $scope.pricefilter=function (item) {
        $scope.ff=$scope.ss;
        if($scope.ss!="--请选择--"){
            var arr=$scope.ff.split("-");//以“-”拆分字符串，得到数组 
            var min=arr[0];
            var max=arr[1];
            if(item.price<min||item.price>max){
                return false;
            }else{
                return true;
            }
        }else {
            return true;
        }
    }
    //  $scope.dj=function () {



});

jiesuan.html

<p>结算</p>
<table>
    <tr>
        <th><input type="checkbox" ng-model="qx" ng-click="xz()"/>全选</th>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>小计</th>
        <th>操作<button ng-click="delAll()">批量删除</button></th>
    </tr>
    <tr ng-repeat="item in dd">
        <td><input type="checkbox" ng-model="item.done" ng-click="fx()"/></td>
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
        <td>{{item.price}}</td>
        <td>{{item.price*item.num}}</td>
        <td><button ng-modle="item.done" ng-click="del($index)">删除</button></td>
    </tr>
</table>
<p>总价：<span>{{zongjia()|currency:"￥："}}</span></p>

jiesuan.js


myapp.controller("jsCtrl",function ($scope,myservice) {
    //调用服务
    $scope.dd=myservice.dd;

    //进行全选
    $scope.qx=false;
    $scope.xz=function () {
        if( $scope.qx==true){

            for(var i=0;i<$scope.dd.length;i++){

                $scope.dd[i].done=true;

            }
        } else if( $scope.qx==false){

            for(var i=0;i<$scope.dd.length;i++){

                $scope.dd[i].done=false;
            }
        }
    }

    //进行反选
    $scope.fx=function () {
         $scope.n=0;
        for(var i=0;i<$scope.dd.length;i++){

           if($scope.dd[i].done==true){

               $scope.n++;
           } 
        }
        if( $scope.n==$scope.dd.length){
            $scope.qx=true;
        }else{
            $scope.qx=false;
        }
    }




    //点击删除的事件
    $scope.del=function (index) {

        //判断数量如果数量大于等于2时让数量减减，否则就从数组中删除
        if($scope.dd[index].done==true) {

            if ($scope.dd[index].num >= 2) {

                $scope.dd[index].num--;

            } else {

                $scope.dd.splice(index, 1);
            }
        }
    }
    //批量删除

    $scope.delAll=function () {
        for(var i=0;i<$scope.dd.length;i++){
            if($scope.dd[i].done==true){
                $scope.dd.splice(i,1);
                i--;
            }

        }
    }

    //计算总价
    $scope.zongjia=function () {
        var zj=0;
        for(var i=0;i<$scope.dd.length;i++){
            zj+=$scope.dd[i].num*$scope.dd[i].price;
        }
        return zj;
    }

});

select.html


<span>天气预报查询：</span><input type="text" ng-model="sr" placeholder="请输入查询的城市" ng-click="cx(sr)" style="width:300px"/>
<ul>

    <li ng-repeat="item in data">
        <p>天气情况：{{data.HeWeather5[0].now.cond.txt}}</p>
        <p> 温度：{{data.HeWeather5[0].now.tmp}}℃</p>
        <p> 风速：{{data.HeWeather5[0].now.wind.spd}}</p>
        <p> 风向：{{data.HeWeather5[0].now.wind.dir}}</p>
    </li>

</ul>

select.js

myapp.controller("selectCtrl",function ($scope,$http) {

    $scope.sr="北京";
    $scope.cx=function (sr) {
        $http({
            url:"https://free-api.heweather.com/v5/weather?city="+sr+"&key=545d63e185fc48169a43cbabba6e74d2",
            method:"GET"
        }).then(function(data){

            $scope.data=data.data;
            alert($scope.data)
        })
    }

})