首先,新建一个主页面,作为我们的开始页面,要引入下面两个文件,一个是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” }] }