<!DOCTYPE html>

<html lang="en" ng-app="myapp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/angularjs.js"></script>

    <script src="../js/angular-route.min.js"></script>

    <style type="text/css">

        body{

            font-size: 32px;

        }

        .show{

            background: #eeeeee;

            padding: 8px;

            width: 500px;

            margin:8px 0px;

        }

    </style>

</head>

<body>

<div>

    <div>

        <a href="#/">首页</a>

        <a href="#/book">图书</a>

        <a href="#/game">游戏</a>

    </div>

    <div ng-view></div>

</div>

</body>

<script>

    var app=angular.module('myapp',['ngRoute']);

    app.controller('sub1',function($scope){

        $scope.title="老王1";

    });

    app.controller('sub2',function($scope){

        $scope.title="老王2";

    });

    app.controller('sub3',function($scope){

        $scope.title="老王3";

    });

    app.config(function($routeProvider) {

        $routeProvider.when('/',{

            controller:"sub1",

            template:"<div class='show'>{{title}}</div>"

        })

        .when('/book',{

            controller:"sub2",

            template:"<div class='show'>{{title}}</div>"

        })

        .when('/game',{

            controller:"sub3",

            template:"<div class='show'>{{title}}</div>"

        })

        .otherwise({ redirectTo: '/' });

    })

</script>

</html>

angular-route.min.js是路由的插件

angular路由最基本的实例---简单易懂的更多相关文章

  1. hive基本的操作语句（实例简单易懂，create table XX as select XX）

    hive建表语句DML:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DDL#LanguageManualDDL-Cr ...

  2. 【转】JS回调函数--简单易懂有实例

    JS回调函数--简单易懂有实例 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...

  3. vue,react,angular三大web前端流行框架简单对比

    常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...

  4. Angular路由——路由基础

    一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置 ...

  5. 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换

    路由其实也可以很简单-------Asp.net WebAPI学习笔记(一)   MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...

  6. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  7. HashSet的实现原理，简单易懂

    HashSet的实现原理,简单易懂   答: HashSet实际上是一个HashMap实例,都是一个存放链表的数组.它不保证存储元素的迭代顺序:此类允许使用null元素.HashSet中不允许有重复元 ...

  8. angular路由配置以及使用

    一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...

  9. 用于实现tab页签切换页面的angular路由复用策略

    使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...

随机推荐

  1. 关联分析：FP-Growth算法

    关联分析又称关联挖掘,就是在交易数据.关系数据或其他信息载体中,查找存在于项目集合或对象集合之间的频繁模式.关联.相关性或因果结构.关联分析的一个典型例子是购物篮分析.通过发现顾客放入购物篮中不同商品 ...

  2. 使用HTML5地理位置定位到城市的方法及注意事项

    介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...

  3. hdu2444二分图最大匹配+判断二分图

    There are a group of students. Some of them may know each other, while others don't. For example, A ...

  4. poj2502最短路！

    have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of getting to ride ...

  5. 玩玩kafka1 单机安装

    今天主要来一遍kafka单机版的安装,比较简单易上手,关于kafka的介绍我就不贴了,大家可以自行搜索 1.首先将tgz包传到centos目录下(这里使用xftp工具) ok后查看一下tgz包是否已经 ...

  6. redis 编译安装（生产环境推荐）

    一.安装redis 1.下载redis包 wget http://download.redis.io/releases/redis-3.2.1.tar.gz 2.解压redis包到/opt下 tar ...

  7. MYSQL CASE WHEN THEN END 用法

    SELECT qr_cash_record.*,CASE WHEN cashrecord_type = 3 THEN (SELECT product_title FROM qr_fundsupport ...

  8. 添加Metasploit-payload到已有的Android项目中

    metasploit在写这篇文章之前,笔者可以说是对java一窍不通,也从来没有写过什么Android应用,在几天的摸爬滚打中终于实现了最终的目的,就是在已有Apk源码的情况下,用了比较另类的方式,添 ...

  9. Html标签，file方式，上传文件

    恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...

  10. 1-LPC1778建立工程

    先来建立一个工程模板,,,要比32简单的多,假设32是用库开发的话,,,,因为还要把那些和库相关的文件加到工程里.... LPC呢就只需要把设置系统和总线的时钟文件(system_LPC177x_8x ...