<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>AngularJS 路由实例 - 菜鸟教程</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>

    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>

    <style>

        li{

            list-style: none;

        }

    </style>

</head>

<body ng-app='routingDemoApp'>

<h2>AngularJS 路由应用</h2>

<ul >

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

    <li><a href="#!/computers">电脑</a></li>

    <li><a href="#!/printers">打印机</a></li>

    <li><a href="#!/blabla">其他</a></li>

</ul>

<br>

<div ng-view></div>

<script>

    angular.module('routingDemoApp',['ngRoute'])

        .config(['$routeProvider', function($routeProvider){

            $routeProvider

                .when('/',{template:'这是首页页面'})

                .when('/computers',{template:'这是电脑分类页面'})

                .when('/printers',{template:'这是打印机页面'})

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

        }]);

</script>

</body>

</html>

注意事项： 路由机制是单独的，所以需要进行单独引入

通过路由进行点击，当点击相应的链接，在view区域会进行不同的展示

angularJs路由的使用的更多相关文章

  1. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  2. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  3. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  4. AngularJS路由和模板

    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...

  5. AngularJS路由跳转

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...

  6. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  7. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  8. AngularJS路由使用案例

    AngularJS路由使用案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. angularjs路由path方式实现原理探究

    angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相 ...

  10. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

随机推荐

  1. Vmware中的centos虚拟机克隆之后没有eth0

    克隆虚拟机之后,CentOS没有eth0的解决办法 我们常常需要从一台已经安装完成的虚拟机系统克隆出来一个新系统(克隆时候必须要改变网卡物理地址,这一点无需多说),但是新系统启动之后,会发现系统网络工 ...

  2. [转] const T、const T*、T *const、const T&、const T*& 的区别

    这里的T指的是一种数据类型,可以是int.long.doule等基本数据类型,也可以是自己类型的类型class.单独的一个const你肯定知道指的是一个常量,但const与其他类型联合起来的众多变化, ...

  3. 07-Location之正则匹配

    大网站专门有自己的图片服务器,起码也得单独放一个目录里面. 淘宝网有些图片开启了防盗链(即使是小图片,也不让你下载,真小气).163新闻可以下载. 用正则匹配uri中的image,就是说你的uri中到 ...

  4. MyGeneration代码生成工具

    使用MyGeneration 生成代码:转自http://www.cnblogs.com/jack-liang/archive/2011/08/18/2144066.html 我们经常用数据访问层和业 ...

  5. vim 的小幅移动

    1.操作符命令和位移 x --->删除一个字符,4x ---->删除4个字符. dw --->可以删除一个单词,d4w ---->删除4个单词. d$  ----> 删除 ...

  6. JSP页面使用EL表达式出现的问题：javax.el.PropertyNotFoundException: Property 'ID' not found on type java.lang.Str

    问题描述: 1. 后台返回到JSP前台的的list,在jsp页面使用EL表达式遍历时出现如下问题:javax.el.PropertyNotFoundException: Property 'ID' n ...

  7. Docker学习笔记_安装和使用Python

    一.实验目标 在Docker里安装Python3.5 二.准备 1.宿主机OS:Win10 64 2.虚拟机OS:Ubuntu18.04 3.操作账号:Docker 二.安装过程 1.搜索Python ...

  8. oracle数据库之分组查询

    本章内容和大家分享的是数据当中的分组查询.分组查询复杂一点的是建立在多张表的查询的基础之上,(我们在上一节课的学习中已经给大家分享了多表查询的使用技巧,大家可以自行访问:多表查询1  多表查询2)而在 ...

  9. UML类之间的关系

    原文:http://www.cnblogs.com/me115/p/4092632.html 下面详细介绍这六种关系: 类之间的关系 泛化关系(generalization) 类的继承结构表现在UML ...

  10. datebox 和 datetimebox 添加『清空』按钮

    需要引入 easyui-lang-zh_CN.js $(document).ready(function(){ var d_buttons = $.extend([], $.fn.datebox.de ...