angularjs路由小案例

最新推荐文章于 2020-12-20 12:02:03 发布
最新推荐文章于 2020-12-20 12:02:03 发布
阅读量707 收藏 1
点赞数
分类专栏： angularJS 文章标签： angularjs路由实现转发案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/irouduoduo/article/details/72811683
版权
本文介绍了一个AngularJS路由的小案例，展示了如何在点击不同导航链接时，利用路由原理（锚点）实现界面内容更换而无实际页面跳转。通过关键代码展示，帮助理解路由实现过程。
摘要由CSDN通过智能技术生成

一.点击不同导航链接显示不同的界面，但是不去页面跳转

   （路由的原理就是通过锚点来完成的）

效果图：（关键代码已用红色渲染）


代码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      
      .content {
      	width: 960px;
      	margin: 0 auto;
      }
      nav {
      	
      	height: 30px;
      	margin: 40px auto;
        background-color: black;
        border-radius: 8px;
      }
      li,a{
      	margin: 0;
      	padding: 0;
      	list-style: none;

      }
      li {
      	display: inline-block;
      }
      a {
      	display: block;
      	text-align: center;
      	width: 100px;
      	height: 30px;
      	line-height: 30px;
      	text-decoration: none;
      	color: white;
      }
      a:hover{
      	background-color: #aaa;
      }
      footer {
      	background-color: black;
      	width: 100%;
      	height: 200px;
      }
	</style>
</head>
<body ng-app="app">
	<nav class="content">
		<ul>
			<li><a href="#/index">主页</a></li>
			<li><a href="#/view">展示</a></li>
			<li><a href="#/login">登录</a></li>
		</ul>
	</nav>
	<div class="content">
		<div ng-view="">
    </div>

	</div>
	<script src=js/angular.min.js></script>
	<script src=js/angular-route.min.js></script>
	<script type="text/javascript">
       var app = angular.module('app',['ngRoute']);
       app.config(['$routeProvider',function($routeProvider){
       	$routeProvider.when('/index',{
           templateUrl:'tem.html',
           controller:'indexctrl'
       	}).when('/view',{
           template:'你好这是展示界面'
         }).when('/login',{
         	templateUrl:'s.html',//点击登录的跳转界面
         	controller:'loginctrl'//给s.html指定控制器
         }).otherwise({
            templateUrl:'tem.html'
         })
       	;
       }]);
        app.controller('indexctrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
           console.log($routeParams); 
       }]);
       app.controller('loginctrl',['$scope','$http',function($scope,$http){
           $http({
           	url:'stars.php',//去后台获取相关数据
           }).success(function(info){
           	   $scope.name = info[0].name;//处理返回的数据
           });
       }]);
	</script>
</body>
</html>


stars.php: 
<?php 
  $result =  file_get_contents('stars.json');
  echo $result;   
?>


stars.json: 

[
	{
		"name": "王力宏",
		"photo": "./images/wlh.jpg",
		"ablum": "<<改变自已>>",
		"age": 39,
		"sex": "男"
	},
	{
		"name": "王力宏",
		"photo": "./images/wlh.jpg",
		"ablum": "<<改变自已>>",
		"age": 39,
		"sex": "男"
	},
	{
		"name": "王力宏",
		"photo": "./images/wlh.jpg",
		"ablum": "<<改变自已>>",
		"age": 39,
		"sex": "男"
	},
	{
		"name": "王力宏",
		"photo": "./images/wlh.jpg",
		"ablum": "<<改变自已>>",
		"age": 39,
		"sex": "男"
	}
]


二:网易云音乐小案例

效果图:


index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音乐列表</title>
	<style type="text/css">
        body {
        	padding: 0;
        	margin: 0;
        }
        ol {
        	padding-top: 0;
        	margin: 0;
            min-height: 400px;
            border:1px solid #ccc;
        }
        ol li {
            line-height: 40px;
        }
        ol li:hover{
            background-color: #ccc;
        }
        .music {
        	width: 600px;
        	margin: 100px auto;

        }
        .music nav {
        	height: 40px;
        	background-color: #000;
        	display: flex;
        }
        .music nav a {
        	flex:1;
        	text-align: center;
        	line-height: 40px;
        	text-decoration: none;
            color:#fff;
        }
        .music nav a:hover {
            background-color: rgba(255,255,255,0.5);
        }
	</style>
</head>
<body ng-app="Music">
	
    <div class="music">
    	<nav>
        <!-- 后端会说明需要什么类型参数 -->
        <!-- 需要一个类型id 1，2，3，4 -->
        <!-- 1表示流行，2表示华语-->
    		<a href="#/1">流行</a>
    		<a href="#/2">华语</a>
    		<a href="#/3">欧美</a>
    		<a href="#/4">日韩</a>
    	</nav>
        <ol>
        	<div ng-view="">
                
            </div>
        </ol>
    </div>

	<script src="../../js/angular.min.js"></script>
	<script src="../../js/angular-route.min.js"></script>
	<script>
         var Music = angular.module('Music',['ngRoute']);
         Music.config(['$routeProvider',function($routeProvider) {
            //通过后台数据分析实现不同界面主要是通过传参
             $routeProvider.when('/:id',{
               templateUrl:'../views/list.html',
               controller:'musictrl'
             });
             
         }]);
         Music.controller('musictrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
            //
           var id = $routeParams.id;
           $http({
            url:'list.php',
            params:{
                pid:id  //后台需要pid,1或2或3或4
            }
           }).success(function(info){
            $scope.lists = info;
           });

         }]);
	</script>
</body>
</html>

list.php: 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音乐列表</title>
	<style type="text/css">
        body {
        	padding: 0;
        	margin: 0;
        }
        ol {
        	padding-top: 0;
        	margin: 0;
            min-height: 400px;
            border:1px solid #ccc;
        }
        ol li {
            line-height: 40px;
        }
        ol li:hover{
            background-color: #ccc;
        }
        .music {
        	width: 600px;
        	margin: 100px auto;

        }
        .music nav {
        	height: 40px;
        	background-color: #000;
        	display: flex;
        }
        .music nav a {
        	flex:1;
        	text-align: center;
        	line-height: 40px;
        	text-decoration: none;
            color:#fff;
        }
        .music nav a:hover {
            background-color: rgba(255,255,255,0.5);
        }
	</style>
</head>
<body ng-app="Music">
	
    <div class="music">
    	<nav>
        <!-- 后端会说明需要什么类型参数 -->
        <!-- 需要一个类型id 1，2，3，4 -->
        <!-- 1表示流行，2表示华语-->
    		<a href="#/1">流行</a>
    		<a href="#/2">华语</a>
    		<a href="#/3">欧美</a>
    		<a href="#/4">日韩</a>
    	</nav>
        <ol>
        	<div ng-view="">
                
            </div>
        </ol>
    </div>

	<script src="../../js/angular.min.js"></script>
	<script src="../../js/angular-route.min.js"></script>
	<script>
         var Music = angular.module('Music',['ngRoute']);
         Music.config(['$routeProvider',function($routeProvider) {
            //通过后台数据分析实现不同界面主要是通过传参
             $routeProvider.when('/:id',{
               templateUrl:'../views/list.html',
               controller:'musictrl'
             });
             
         }]);
         Music.controller('musictrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
            //
           var id = $routeParams.id;
           $http({
            url:'list.php',
            params:{
                pid:id  //后台需要pid,1或2或3或4
            }
           }).success(function(info){
            // console.log(info);
            $scope.lists = info;
           });

         }]);
	</script>
</body>
</html>
list.html: 

<li ng-repeat="x in lists">{{x.text}}</li>






姑娘的代码
关注
专栏目录
angularjs简单的路由跳转
qq_43688916的博客
07-05 2271
创建路由： 首先创建一个带路由的项目 创建需要的组件 在根模块里引入组件（用命令创建的组件会自动引入到根模块） 配置路由: import {HomeComponent } from './components/home/home.component'; //在路由模块里引入组件 {path: 'home',component:HomeComponent}, //并在routes里配置...
Angular ngRoute路由例子
03-23
一个ngRoute路由的简单例子。
AngularJS 路由实例
weiyangmeng的博客
02-25 244
charset="utf-8" />       ng-app='routingDemoApp'>       AngularJS 路由应用     <a href="#/">首页   <a href="#/computers">电脑   <a href="#/printer
AngularJS路由使用案例
学亮编程手记
12-27 471
AngularJS路由使用案例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS路由使用案例</title> <script type="text/javascript" src="../js/angular.min.js"></script>
angularjs路由例子
Sid的专栏
10-02 472
自己做了一个angularjs路由机制例子，需要tomcat服务器启动 下载地址： http://pan.baidu.com/s/17GIU6
AngularJS路由实例(uiRoute、ngRoute)
安人多梦的博客
04-03 5843
AngularJS的路由功能使得它能够在一个页面中呈现不同的视图页面。它的做法是将视图分解成布局和模板视图，并且根据用户当前访问的URL来展示对应的视图。AngularJS 为我们封装好了一个路由工具 ngRoute ,它的实现是对URL进行匹配后去驱动视图页面显示。它也为我们封装了一个独立的路由模块 uiRouter ,它是一种靠状态 state 来驱动视图页面。
带有经典ASP.NET MVC应用程序的Angularjs路由配方
04-07
**标题解析：**“带有经典ASP.NET MVC应用程序的Angularjs路由配方” 这个标题指出我们要讨论的是一个结合了AngularJS路由和经典ASP.NET MVC框架的应用程序。AngularJS路由是客户端JavaScript库AngularJS的一个核心...
AngularJS基础入门视频课程
06-12
本课程讲解的是 AngularJS 1.5版本本课程以通俗易懂的方式讲解AngularJS技术，课程内容包括：1. AngularJS简介2. AngularJS组成3. 模块4....路由教学全程采用笔记+代码案例的形式讲解，通俗易懂！！！
angularjs分页实例
08-08
1. **模块和依赖注入**: 在AngularJS中，我们首先需要创建一个模块，并注入`ngRoute`和`ngResource`等依赖，以处理路由和与服务器的数据交互。 2. **分页控制器**: 创建一个专门处理分页逻辑的控制器。在这个控制器...
AngularJS之页面跳转Route实例代码
12-10
1.除了引用AngularJs.js外，还要引用路由JS, “~/Scripts/angularjs/angular-route.js” 2.通过$routeProvider定义路由，示例 var testModule = angular.module('testModule', ['ngRoute']); testModule.config(['$...
Angular配置路由Demo
05-23
AngularJS 配置路由 相关文档：http://blog.csdn.net/u013360850/article/details/72667801
angular路由的使用案例
愛夓的博客
11-02 463
首先，新建一个主页面，作为我们的开始页面，要引入下面两个文件，一个是angularjs的，一个是angular路由的文件，之接拷过去就行。 <script src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js”></script> <script src=”http://apps.bdimg.com/libs/angular-
angularjsl路由_AngularJS 路由详解和简单实例
weixin_39542477的博客
12-20 405
AngularJS 路由本章节我们将为大家介绍 AngularJS 路由。AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用(single page web application，SPA)。通常我们的URL形式为http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # +...
angular的路由例子
weixin_30639719的博客
06-05 87
app.routing.module.ts里面，关键部分 const routes: Routes = [ { path: '', redirectTo : 'c3/c2/mmc', pathMatch: 'full'}, { path: 'c3', component: C3Component, children: [ { path: 'c2/:name...
angularJs路由操作实例（一）
泠泠似水
06-12 910
一、初始化定义路由<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../org/angular.min.js"></script> <!--引入包--> <script src="../org/angular-ui-router.min.js"></script>
angularjs路由_AngularJS路由示例– ngRoute，$ routeProvider
从零开始的教程世界
07-07 355
angularjs路由Today we will look into AngularJS Routing example using ngRoute module and $routeProvider. Earlier we looked into AngularJS Modules and AngularJS Controllers. 今天，我们将研究使用ngRoute模块和$ routePro...
angular的小实例
weixin_30537391的博客
12-21 132
主要是使用了angular的指令。 学习地址:http://www.runoob.com/angularjs/angularjs-tutorial.html 1. 效果： 输入数据剩余字数会相应减少，点击保存弹出已保存提示信息，点击清空输入数据为空。 <!DOCTYPE html> <html lang="en"> <head> ...
angular前端框架简单小案例
diaona1404的博客
08-09 631
一、angular表达式 <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <!-- 如果要使用angular 1、必须先引入相关的框架...
AngularJS入门级小案例
崔振凯的博客
10-25 265
一个简单的AngularJS入门小案例 知识点:双向数据绑定 控制器作用 &lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="HelloApp"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" cont
精通AngularJS：实战指南
4. 路由与导航：如何利用AngularJS的路由功能来管理应用程序的不同状态和页面导航。 5. 服务：理解各种内置服务如$http用于与服务器通信，$q用于异步操作，以及如何创建自定义服务。 6. 模板和表达式：学习如何在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值