AngularJS中Route例子

简介:

代码:https://files.cnblogs.com/files/xiandedanteng/angularJSRouteSample.rar

点击‘首页’后:

点击‘电脑’后:

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS 路由实例 - 菜鸟教程</title>
    </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>
         
        <div ng-view></div>
    </body>
</html>

<script src="angular1.4.6.min.js"></script>
<script src="angular-route_1.3.13.js"></script>
<script>
    angular.module('routingDemoApp',['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
    }]);
</script>   
复制代码

 













本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7424877.html,如需转载请自行联系原作者


相关文章
|
4月前
|
UED
深入了解 AngularJS 路由的原理和使用技巧
深入了解 AngularJS 路由的原理和使用技巧
59 0
|
5月前
|
JavaScript 前端开发
AngularJS ng-if使用方法详解
AngularJS ng-if使用方法详解
|
7月前
从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。
41 0
|
7月前
|
网络架构
关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
26 0
Angular路由里的canActivate用法
Angular路由里的canActivate用法
217 0
Angular路由里的canActivate用法
Angular路由开发的一个实际例子
Angular路由开发的一个实际例子
Angular路由开发的一个实际例子
Angular应用的router-outlet使用一个例子
Angular应用的router-outlet使用一个例子
85 0
Angular应用的router-outlet使用一个例子
Angular 路由时如何在 Component 之间传递参数
Angular 路由时如何在 Component 之间传递参数
340 0
Angular 路由时如何在 Component 之间传递参数