angular路由的使用案例

最新推荐文章于 2024-08-13 11:15:51 发布

Strugglexia

最新推荐文章于 2024-08-13 11:15:51 发布

阅读量463

点赞数

分类专栏： angularjs相关文章

angularjs相关文章专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先，新建一个主页面，作为我们的开始页面，要引入下面两个文件，一个是angularjs的，一个是angular路由的文件，之接拷过去就行。

下面是主页面的代码，简单给了点样式：

<!DOCTYPE html>
<html ng-app=”myApp”>
<head>
<meta charset=”UTF-8”>
<title>Document</title>
<!–引入两个文件，一个是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-route/1.3.13/angular-route.js”></script>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
font-size: 0;
position: fixed;
left:0;
right:0;
bottom: 0;
}

ul li{
box-sizing: border-box;
display: inline-block;
width:25%;
font-size: 14px;
text-align: center;
height:40px;
line-height: 40px;
background-color: #dfdfdf;
}

a{text-decoration: none;}

</style>

</head>
<body>
<div ng-view></div>
<ul>
<li><a href=”#/home”>首页</a></li>
<li><a href=”#/leyuan”>乐园</a></li>
<li><a href=”#/card”>乐享卡</a></li>
<li><a href=”#/mime”>我的</a></li>
</ul>

<script src=”./js/app.js”></script>
<script src=”./js/services.js”></script>
<script src=”./js/filters.js”></script>
<script src=”./js/controllers.js”></script>
</body>
</html>

下面分别是上面引入的四个js文件的代码，app作为我们的路由接口文件：

app.js：用来控制页面之间跳转的

下面三个js文件是针对每一个页面中具体功能的，

services.js：

app.value(‘defaultValue’,”html5”);

app.factory(‘testFactory’,function(){

function a(){
return 100;
}

return {
add:function(x,y){
return x+y+a();
}
}
});

app.service(‘testService’,function(){

function a(){
return 100;
}

this.add = function(x,y){
return x+y+a();
}

})

app.factory(‘swiper’,function(){

return {
init:function(selector){
//new Swiper(selector)
}
}
})

filters.js：过滤器文件

app.filter(‘tc’,function(){
return function(element){
return element*2;
}
})

.filter(“four”,function(){
return function(ele){
return ele.toFixed(4); //过滤保留四位小数
}
})

controllers.js：控制器，所有页面的控制器写在这里，可以连写，这里就把四个页面的控制器都写在这里了

app

.controller(‘homeCtrl’,function($scope){
$scope.quantity = 1; $scope.price = 19.992; }) .controller(‘leyuanCtrl’,function($ scope,$http,defaultValue,testFactory,swiper,testService){

$scope.number = defaultValue;

$scope.test1 = function(x,y){
return testFactory.add(x,y);
}

$scope.test2 = function(x,y){
return testService.add(x,y);
}

$http.get(‘/test.json’).success(function(res){
$scope.data = res;
swiper.init(‘#id’);
});

})

.controller(‘cardCtrl’,function($scope){
$scope.names = [
{name:’xm’,country:’China’},
{name:’tc01’,country:’American’},

{name:’tc02’,country:’FBmerican’},
{name:’xm02’,country:’YCmerican’},
{name:’bd02’,country:’Dmerican’},
{name:’qh02’,country:’Emerican’}
];
})

.controller(‘mimeCtrl’, function( $scope) {$ scope.firstName = “John”,
$scope.lastName = “Doe”$ scope.myVar = false;
$scope.toggle = function() {$ scope.myVar = !$scope.myVar;
};
});

下面是html页面的代码

card.html页面：

<div>
<p>
<input type=”text” ng-model=”test”>
</p>
<div>
<p ng-repeat=”x in names| filter:test | orderBy:’country’”>
{{x.name + “,” + x.country}}
</p>
</div>
</div>

home.html页面：

<div >

<input type=”number” ng-model=”quantity”>
<input type=”number” ng-model=”price”>

<p>总价 = {{ (quantity * price) |tc |four |currency }}</p>

</div>

leyuan.html页面：

<div >
<h3>{{data.title}} {{number}}</h3>
<div>
<div ng-repeat=”x in data.list”>
<p>{{x.name}}</p>
<p>{{x.address}}</p>
</div>
</div>
<h3>{{data.title}}</h3>
<div>
<div ng-repeat=”x in data.slider”>
<p>{{x.name}}</p>
<p>{{x.address}}</p>
</div>
</div>
<p>{{test1(19.5678,1.76543)}}</p>
<p>{{test2(19.5678,1.76543)}}</p>
</div>

mime.html页面:

<div >

<button ng-click=”toggle()”>隐藏/显示</button>

<p ng-hide=”myVar”>
名: <input type=”text” ng-model=”firstName”><br>
姓名: <input type=”text” ng-model=”lastName”><br>
<br>
Full Name: {{firstName + ” ” + lastName}}
</p>

</div>

下面是test.json的代码：

{
“title”:”这是一个测试”,
“list”:[{
“name”: “tc”,
“age”: 0,
“address”: “wumei”,
“student”: “2000”
},
{
“name”: “tc”,
“age”: 0,
“address”: “wumei”,
“student”: “2000”
}],
“slider”:[{
“name”: “1111”,
“age”: 0,
“address”: “wumei”,
“student”: “2000”
},
{
“name”: “2222”,
“age”: 0,
“address”: “wumei”,
“student”: “2000”
}]
}