ui-router搭建的angularjs模板
阿新 • • 發佈：2019-01-09
目錄結構如圖
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'
},
' 頁面傳值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){
}]);