angular-ui-route Demo

<!DOCTYPE html>
<html lang="en" ng-app="visitModule">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-ui-router.js"></script>
    <script type="text/javascript">
        var appName = 'visitModule';
        // 依赖模块列表
        var relModuleList = ['ui.router'];
        var appModule = angular.module(appName, relModuleList);

        appModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/inquiry');
            $stateProvider.state('inquiry', {
                url: '/inquiry'
                , templateUrl:'template/visit-inquiry.html'
                , controller: 'VisitInquiryCtrl'
            }).state('apply', {
                url: '/apply'
                , templateUrl:'template/visit-apply.html'
                , controller: 'VisitApplyCtrl'
            }).state('issuing', {
                url: '/issuing'
                , template: '<div visit-issuing=""></div>'
                , controller: 'VisitIssuingCtrl'
            });

        }]);

        appModule.controller('VisitCtrl', ['$scope','$state', '$stateParams',function ($scope,$state,$stateParams) {
            $scope.ext={};
            $scope.ext.name='father';

            $scope.Go=function(flag,parmas){
                var tt=$stateParams;
                $state.go(flag,parmas);
            }
        }]);

        appModule.controller('VisitInquiryCtrl', ['$scope', function ($scope) {

            $scope.Test=function(){
                $scope.ext.smallChild='small child';
            };
        }]);

        appModule.controller('VisitApplyCtrl', ['$scope', function ($scope) {

        }]);

        appModule.controller('VisitIssuingCtrl', ['$scope', function ($scope) {

        }]);
        appModule.directive('visitApply', ['$templateCache', function($templateCache){
            return {
                replace: true,
                template: $templateCache.get('visit-template-apply')
            }
        }]);

        appModule.directive('visitIssuing', ['$templateCache', function($templateCache){
            return {
                replace: true,
                template: $templateCache.get('visit-template-issuing')
                //templateUrl:'template/visit-issuing.html'
            }
        }]);
    </script>
</head>
<body>
<div ng-controller="VisitCtrl">
    <div>
        <span style="width:100px; border: 1px solid royalblue" ng-click="Go('inquiry',{'page':1})">Page-1</span>
        <span style="width:100px" ng-click="Go('apply')">Page-2</span>
        <span style="width:100px" ui-sref=".issuing">Page-3</span>
    </div>
    <div>
        <div ui-view=""/>
    </div>
</div>


<script type="text/ng-template" id="visit-template-issuing">
    <div >
        <h1>this is visit issuing</h1>
    </div>
</script>
</body>
</html>
posted on 2016-01-04 17:37 Herry彬阅读(294) 评论(0) 收藏举报