<!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. Uboot详细解析2

    1.第二阶段的主线函数位于u-boot-2010.06/arch/arm/lib/board.c. 第二阶段的功能: <1> 初始化本阶段要使用到的硬件设备. 设置时钟.初始化串口. bo ...

  2. 【HDU 6031]】 Innumerable Ancestors

    题意 有一棵有n个结点的树,这里有m个询问,每个询问给出两个非空的结点集合A和B,有些结点可能同时在这两个集合当中.你需要从A和B中分别选择一个节点x和y(可以是同一个结点)你的目标是使LCA(x,y ...

  3. 在线创建MongoDB免费集群（MangoDB Atlas）

    MongoDB Atlas是MongoDB的云服务,构建在亚马逊的AWS上,MongoDB允许用户在上面创建一个免费集群作为学习使用. 1. 注册MongoDB cloud账号: 访问www.mong ...

  4. jQuery--修改表单数据并提交

    目的: ​点击'编辑',弹出对话框,修改数据. 主要知识点: prevAll(),获取同级别本元素前面的所有元素. 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  5. 17.SQL 约束

    约束用于限制加入表的数据的类型. 可以在创建表时规定约束(通过 CREATE TABLE 语句),或者在表创建之后也可以(通过 ALTER TABLE 语句). 我们将主要探讨以下几种约束: NOT ...

  6. js加载页面使用execute_script选定加载位置

    #由于js逐步加载页面,存在未显示的网页无法加载源码 from selenium import webdriver driver = webdriver.Firefox() init_element ...

  7. 用JS实现省市二级联动

    一.需求分析 我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 二.技术分析 使用事件(onchange) 使用一个二 ...

  8. 【转】Android自定义控件（三）——有弹性的ListView

    原文地址:http://blog.csdn.net/a105865708/article/details/17959459 上一次我们试验了有弹性的ScrollView.详情 这一次,我们来试验有弹性 ...

  9. 求整数数组（长度为n），出现大于2/n次数的数字

    条件:时间复杂度是O(n),空间复杂度是O(1) 方法1:标记法 , , , , , , , , , , , , , }; int len = arr.Length; int[] c = new in ...

  10. SQL/T-SQL实例参考-2

    对多关联查询,查询多中的记录,但是返回一的结果集 子查询语法 --一对多关联查询,查询多中的记录,但是返回一的结果集 SELECT C.* FROM ( SELECT A.BasicID FROM [ ...