AngularJs路由单向传值

最新推荐文章于 2023-04-19 18:20:29 发布

李帅磊

最新推荐文章于 2023-04-19 18:20:29 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/lishuaileibo/article/details/78781641

版权

本文介绍了一个使用Angular框架实现的基本网页应用案例，重点展示了如何通过Angular的路由功能来组织不同的页面视图，并实现页面间的跳转。案例中包含了主页和一个名为“index”的页面，其中“index”页面展示了一段文字内容。通过配置路由，可以轻松切换不同页面并传递参数。

摘要由CSDN通过智能技术生成

index网页中的内容为｛｛name｝｝

<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">

<a href="#/">点我试试</a>
<a href="#/index">你好啊</a>

<div ng-view></div>
</body>
<script>
var app=angular.module("myapp",["ngRoute"]);
app.controller("mycr",function($scope){

/*给index网页里面的name传值*/
$scope.name="我爱你整整十年护你十年周全";

})

app.config(function($routeProvider){

/*我是主页为死值 templateUrl为网站的名字*/

$routeProvider.when("/",{template:"我是主页"})

/*controller:"mycr"为给网页里面name传值的方法名*/

.when("/index",{templateUrl:"index.html",controller:"mycr"});

/*如果需要传多个值需要定义多个app.controller("mycr",function($scope){
每个网页页面为一个方法同上
* /

})