<!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. SQL注入详细介绍及如何防范SQL注入式攻击

    一. SQL注入攻击的简单示例. statement := "SELECT * FROM Users WHERE Value= " + a_variable + " 上面 ...

  2. php中print_r、var_dump和var_export几个函数的用法区别

    php中print_r.var_dump和var_export几个函数的用法区别

  3. Laravel 5.2 教程 - 数据填充

    一.简介 Laravel提供的填充类(seed),可以让大家很容易的实现填充测试数据到数据库.所有的填充类都位于database/seeds目录.填充类的类名完全由你自定义,但最好还是遵循一定的规则, ...

  4. yum 安装vim编辑器

    在我们使用的vi编辑器中没有配色不是很好用,我们安装一个vim富文本编辑器方便我们的文本编辑. [root@localhost ~]# yum install vim -y已加载插件:fastestm ...

  5. linux 下启动程序的时候会显示坏的解释器，或者没有那个文件

    又一次开发的时候在windowns上编写完的程序放到linux下运行的时候,比如:./start.sh的时候显示:"坏的解释器,没有那个文件"错误, 原因是windowns下写的s ...

  6. 对游览器遭到劫持的处理方案（RemoveAds Not By This Site）

    近期游览器一直被劫持 :火狐用不了,ie出毛病了,谷歌游览器也不好使了,已经快被逼疯!!! 但是事情总是向着美好的方向发展的么! 接下来就和大家一起分享一下我的解决经验! 首先用360杀毒(虽然大多数 ...

  7. GitExtensions-2.48安装详细教程

    在安装GitExtensions时你可能遇到如下问题,如果出现此提示,则先退出安装,去下载安装.NET Framework4.0之后,再启动GitExtension的安装. 开始进行安装: 安装完成, ...

  8. UEditor上传图片到七牛C#（后端实现）

    由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...

  9. CI Weekly #19 | 关于软件开发模型的思考，以及最新 CI/CD 实践分享

    五月一来,夏天便悄然而至.flow.ci 也带来了几个新的变化,帮你进一步优化开发工作流.一起来看看这几个重点功能: 支持 iOS 项目 Xcode8.3 构建 iOSer 们重点来了,flow.ci ...

  10. DDD理论学习系列（2）-- 领域

    DDD理论学习系列目录 1. 引言 领域一词,主要有以下两个意思: 一国主权所达之地. 学术思想或社会活动的范围. 不管是指国家的主权范围也好还是学术活动范围,都是在讲一个范围,一个界限. 比如我们常 ...