ui-router搭建的angularjs模板

最新推荐文章于 2019-02-07 21:54:00 发布

抽象思维

最新推荐文章于 2019-02-07 21:54:00 发布

阅读量1k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/ldc726/article/details/51006343

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目录结构如图

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){

  }]);

抽象思维

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ui-router搭建的angularjs模板

目录结构如图index.html文件 app.jsvar shopApp = angular.module('shopApp', [ 'ui.router', 'shopControllers', 'sho
复制链接

扫一扫