Angular——单页面实例

最新推荐文章于 2022-07-09 21:42:18 发布

weixin_30699831

最新推荐文章于 2022-07-09 21:42:18 发布

阅读量470

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/wuqiuxue/p/8482442.html

版权

基本介绍

1、引入的route模块可以对路由的变化做出响应

2、创建的控制器中依然需要$http向后台请求数据

3、php中二维数据的遍历用的是foreach

4、php中$arr=array()，$arr[] 可以被自动补充所缺失的索引

5、在ng-repeat中，如果数据相同的话会报错（ngRepeat:dupes），解决办法是后面添加track by $index===》list in lists track by $index

基本使用

html

<!DOCTYPE html>
<html lang="en" ng-app="Music">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ol,li{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            margin: 50px auto;
        }
        nav{
            display: flex;
            height: 40px;
            border: 1px solid #000;
        }
        nav a{
            flex: 1;
            height: 40px;
            text-decoration: none;
            color: #000;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        nav a:after{
            content: '';
            width: 0;
            height: 35px;
            border-left: 1px solid #000;
            position: absolute;
            top: 2.5px;
            right: 0;
        }
        nav a:last-child:after{
            visibility: hidden;
        }
        ol{
            border: 1px solid #000;
            border-top: none;
            min-height: 300px;
            padding-left: 40px;
        }
        ol li{
            line-height: 40px;
        }
    </style>
</head>
<body>
<div class="wrap" ng-controller="IndexController">
    <nav>
        <a href="#/1">摇滚</a>
        <a href="#/2">民族</a>
        <a href="#/3">民谣</a>
        <a href="#/4">公路</a>
    </nav>
    <ol>
        <div ng-view=""></div>
    </ol>
</div>
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-route.js"></script>
<script>
    var Music=angular.module('Music',['ngRoute']);
    Music.config(['$routeProvider',function ($routeProvider) {
        $routeProvider.when('/:id',{
            templateUrl:'./list.html',
            controller:'IndexController'
        }).otherwise({
            redirectTo:'/1'
        });
    }]);
    Music.controller('IndexController',['$scope','$http','$routeParams',function ($scope,$http,$routeParams) {
        var type=$routeParams.id;
        $http({
            url:'./music.php',
            method:'get',
            params:{id:type}
        }).success(function (info) {
            $scope.lists=info;
        });
    }]);
</script>
</body>
</html>

模板页

<li ng-repeat="list in lists track by $index">{{list.text}}</li>

php

<?php
    $pid=$_GET['id'];
    $list = array(
            array('id'=>1, 'pid'=>2, 'text'=>'我很丑可是我很温柔'),
            array('id'=>2, 'pid'=>2, 'text'=>'浦公英的约定'),
            array('id'=>3, 'pid'=>2, 'text'=>'你我的约定'),
            array('id'=>4, 'pid'=>3, 'text'=>'pretty boy'),
            array('id'=>5, 'pid'=>3, 'text'=>'See You Again'),
            array('id'=>6, 'pid'=>2, 'text'=>'甜甜的'),
            array('id'=>7, 'pid'=>1, 'text'=>'再见 我的爱人'),
            array('id'=>8, 'pid'=>2, 'text'=>'心中的日月'),
            array('id'=>8, 'pid'=>3, 'text'=>'Let It Go'),
            array('id'=>10, 'pid'=>1, 'text'=>'不要说再见'),
            array('id'=>11, 'pid'=>3, 'text'=>'Rise'),
            array('id'=>12, 'pid'=>2, 'text'=>'再见'),
            array('id'=>13, 'pid'=>1, 'text'=>'追梦人'),
            array('id'=>14, 'pid'=>2, 'text'=>'不能说的秘密'),
            array('id'=>15, 'pid'=>4, 'text'=>'고속도로 로맨스'),
            array('id'=>16, 'pid'=>1, 'text'=>'昨日重现'),
            array('id'=>17, 'pid'=>3, 'text'=>'Love Me Like You Do'),
            array('id'=>18, 'pid'=>2, 'text'=>'好久不见'),
            array('id'=>19, 'pid'=>1, 'text'=>'独角戏'),
            array('id'=>20, 'pid'=>2, 'text'=>'K歌之王'),
            array('id'=>21, 'pid'=>1, 'text'=>'往事随风'),
            array('id'=>22, 'pid'=>2, 'text'=>'光辉岁月'),
            array('id'=>23, 'pid'=>3, 'text'=>'Just Like Fire'),
            array('id'=>24, 'pid'=>4, 'text'=>'涙の物语'),
            array('id'=>25, 'pid'=>4, 'text'=>'江南Style'),
            array('id'=>26, 'pid'=>4, 'text'=>'ガラガラ'),
            array('id'=>27, 'pid'=>1, 'text'=>'海阔天空'),
            array('id'=>28, 'pid'=>4, 'text'=>'天空之城'),
            array('id'=>29, 'pid'=>4, 'text'=>'사랑이었다'),
            array('id'=>30, 'pid'=>3, 'text'=>' Good Time'),
            array('id'=>31, 'pid'=>1, 'text'=>'不再犹豫'),
            array('id'=>32, 'pid'=>4, 'text'=>'さよならの夏 ～コクリコ坂から～'),
            array('id'=>33, 'pid'=>3, 'text'=>' Heart And Soul'),
            array('id'=>34, 'pid'=>4, 'text'=>'넘버나인 '),
            array('id'=>35, 'pid'=>1, 'text'=>'往事只能回味'),
            array('id'=>36, 'pid'=>3, 'text'=>'Bang Bang'),
            array('id'=>37, 'pid'=>4, 'text'=>'君が好きだと叫びたい'),
            array('id'=>38, 'pid'=>3, 'text'=>'Same Old Love'),
            array('id'=>39, 'pid'=>4, 'text'=>'君をのせて'),
            array('id'=>40, 'pid'=>1, 'text'=>'恋恋风尘')
        );
    $result=array();

    foreach($list as $key=>$value){
        if($value['pid']==$pid){
            $result[]=$value;
        }
    }

    echo json_encode($result);


//    $arr=array();
//    $arr[]='a';
//    $arr[]='b';
?>