您的位置：首页 > Web前端 > AngularJS

ui-router搭建的angularjs模板

2016-03-29 15:28 573 查看

目录结构如图

index.html文件

<!DOCTYPE html>
<html ng-app="shopApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="plugin/bootstrap-3.0.0/css/bootstrap.my.min.css"/>
<link rel="stylesheet" href="public/css/base.css"/>
<script src="plugin/js/angular-1.3.0.js"></script>
<script src="plugin/js/angular-ui-router.js"></script>
<script src="public/js/app.js"></script>
<script src="public/js/controllers.js"></script>
<script src="public/js/controllers1.js"></script>
<script src="public/js/directives.js"></script>
<script src="public/js/filters.js"></script>
<script src="public/js/services.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>

app.js
var shopApp = angular.module('shopApp', [
'ui.router',
'shopControllers',
'shopFilters',
'shopDirectives',
'shopServices'
]);

var shopApp = angular.module('shopApp1', [
'ui.router',
'shopControllers',
'shopFilters',
'shopDirectives',
'shopServices'
]);
shopApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider.state('index', {
url: "/index",
views: {
'': {
templateUrl: 'tpls/index.html'
},
'nav@index': {
templateUrl: 'tpls/public_nav.html'
},
'main@index': {
templateUrl: 'tpls/index_home.html'
}
}
}).state('index.search', {
url: '/search',
views: {
'main@index': {
templateUrl: 'tpls/index_search.html'
}
}
}).state('index.shoping', {
url: '/shoping',
views: {
'main@index': {
templateUrl: 'tpls/index_shoping.html'
}
}
}).state('index.my', {
url: '/my',
views: {
'main@index': {
templateUrl: 'tpls/index_my.html'
}
}
}).state('datails', {
url: '/datails/:id',
templateUrl: 'tpls/datails.html'
})
}]);

页面传值index_home.html页面进入详情页
<div class="box" ng-controller="commodityListCtrl">
<div class="por_list line_bottom" ng-repeat="vo in commodity">
<a ui-sref="datails({id:{{vo.id}}})">
<div class="list_box">
<div class="por_img">
<img ng-src="{{vo.img}}">
</div>
<div class="por_name">
{{vo.title}}
</div>
</div>
</a>
</div>
</div>
<div class="clearfix"></div>

controllers.js

var shopControllers = angular.module('shopControllers', ["qqqCtrl"]);
//列表页
shopControllers.controller('commodityListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('json/pro.json').success(function (data) {
$scope.commodity = data;
});
}
]);
//详情页
shopControllers.controller('datailsCtrl', ['$scope','$stateParams', '$http',
function ($scope,$stateParams, $http) {
$http.get('json/'+$stateParams.id+'.json').success(function (data) {
$scope.commodity = data;
});
}
]);

directives.js
var shopDirectives = angular.module("shopDirectives",[]);

shopDirectives.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there</div>',
replace: true
};
});

filters.js

var shopFilters = angular.module('shopFilters', []);

shopFilters.filter('checkmark1', function() {
return function(input) {

};
});

services.js
var shopServices = angular.module('shopServices', []);

shopServices.factory('Phone', ['$resource',
function($resource){

}]);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航