angular路由的使用案例

xiaoxiao2021-02-28  16

首先,新建一个主页面,作为我们的开始页面,要引入下面两个文件,一个是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-route/1.3.13/angular-route.js”></script>

下面是主页面的代码,简单给了点样式:

<!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:用来控制页面之间跳转的

var app = angular.module(‘myApp’,[‘ngRoute’]);         app.config([‘$$routeProvider’, function($routeProvider){             $routeProvider             .when(‘/’,{             templateUrl:’./views/home.html’,                 controller:’homeCtrl’             })             .when(‘/home’,{             templateUrl:’./views/home.html’,                 controller:’homeCtrl’             })             .when(‘/leyuan’,{             templateUrl:’./views/leyuan.html’,                 controller:’leyuanCtrl’             })             .when(‘/card’,{             templateUrl:’./views/card.html’,                 controller:’cardCtrl’             })             .when(‘/mime’,{             templateUrl:’./views/mime.html’,                 controller:’mimeCtrl’             })             .otherwise({redirectTo:’/’});         }]);

下面三个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” }] }

转载请注明原文地址: https://www.6miu.com/read-850041.html

最新回复(0)