基本介绍

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';

?>

Angular——单页面实例的更多相关文章

  1. Angular——单页面与路由的使用

    单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...

  2. 解决angular单页面页面底部跳转到新页面滚动条不在顶部的问题

    以上jquery,下面js this.router.events.subscribe((event) => { document.body.scrollTop=0; }); 另一种写法 impo ...

  3. phantomjs和angular-seo-server实现angular单页面seo

    1.下载phantomjs,并配置环境变量为   eg:E:\phantomjs-2.1.1-windows\bin 2.下载angular-seo-server 3.windows下:cmd eg: ...

  4. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  5. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  6. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  7. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  8. angular（3）服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...

  9. MVC route 和 Angular router 单页面的一些方式

    直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...

随机推荐

  1. seajs入门使用

    使用 Sea.js 进行模块化开发还能够带来非常多优点: 模块的版本号管理. 通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理. 提高可维护性.模块化能够让每一个文件的职责单一,很有利 ...

  2. hdu1025 Constructing Roads In JGShining&#39;s Kingdom（二分+dp）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1025 Problem ...

  3. label显示不同颜色的字体

    NSString *contentSrt = [NSString stringWithFormat:@"%@ (%@)",categoryModel.categoryName, c ...

  4. 自己动手写Android数据库框架

    前言 相信不少开发人员跟我一样,每次都非常烦恼自己写数据库,并且那些数据库语句也经常记不住.当然网上也有非常多非常好的数据库框架,你能够直接拿来用,可是 非常多时候我们的项目.特别是一个小型的Andr ...

  5. openstack-glance-api.service start request repeated too quickly, refusing to start

    问题描写叙述 openstack J版 centos7部署 重新启动服务时起不来,日志也不报错.以glance服务为例,例如以下: # systemctl start openstack-glance ...

  6. UTF-8 的中文檔案名上傳問題

    在上传文件后,一般都会用 move_uploaded_file() 进行文件移动改名.但是 move_uploaded_file() 并不支持 UTF-8 编码,如果含有,那么函数就会执行失败,但是这 ...

  7. BestCoder Round #56/hdu5463 Clarke and minecraft 水题

    Clarke and minecraft 问题描述 克拉克是一名人格分裂患者.某一天,克拉克分裂成了一个游戏玩家,玩起了minecraft.渐渐地,克拉克建起了一座城堡. 有一天,克拉克为了让更多的人 ...

  8. FFmpeg解码视频帧为jpg图片保存到本地

    FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635

  9. 如何配置MYSQL的MASTER---SLAVE复制备份？

    如何配置MYSQL的MASTER---SLAVE复制备份? 一.配置一个mysql服务器做master:     在配置文件my.ini中添加如下内容: log-bin=matster-binlog- ...

  10. 一位ACMer过来人的心得（转）

    刻苦的训练我打算最后稍微提一下.主要说后者:什么是有效地训练? 我想说下我的理解.很多ACMer入门的时候,都被告知:要多做题,做个500多道就变牛了.其实,这既不是充分条件.也不会是必要条件. 我觉 ...