个人中心
gpt4 book ai didi

javascript - 如何将此代码从 UI Route 更改为核心 ng-Route

转载 作者：行者123 更新时间：2023-11-28 00:09:55 25 4
gpt4 key购买 nike

我从wrapbootrap购买了一个模板，但是那里提供的代码使用了UI Route插件。 ui 路线非常好，因为您可以拥有状态、 View 、嵌套 View 。但是，它不适用于用于 Azure 身份验证的 ADAL 身份验证库。

以下代码是主题提供的代码:

配置.js

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider, adalAuthenticationServiceProvider, $httpProvider) {

    // Configure Idle settings
    IdleProvider.idle(5); // in seconds
    IdleProvider.timeout(120); // in seconds

    $urlRouterProvider.otherwise("/dashboards/dashboard_1");

    $ocLazyLoadProvider.config({
        // Set to true if you want to see what and when is dynamically loaded
        debug: false
    });

    $stateProvider

        .state('dashboards', {
            abstract: true,
            url: "/dashboards",
            templateUrl: "views/common/content.html",

        })
        .state('dashboards.dashboard_1', {
            url: "/dashboard_1",
            templateUrl: "views/dashboard_1.html",
            requireADLogin: true,
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {

                            serie: true,
                            name: 'angular-flot',
                            files: ['js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
                        },
                        {
                            name: 'angles',
                            files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
                        },
                        {
                            name: 'angular-peity',
                            files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
                        }
                    ]);
                }
            }
        })

index.html

<!DOCTYPE html>
<html ng-app="inspinia">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page title set in pageTitle directive -->
    <title page-title></title>

    <!-- Font awesome -->
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Main Inspinia CSS files -->
    <link href="css/animate.css" rel="stylesheet">
    <link id="loadBefore" href="css/style.css" rel="stylesheet">


</head>

<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used in Inspinia theme on diferent view -->
<body ng-controller="MainCtrl as main">

<!-- Main view  -->
<div ui-view></div>

<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- MetsiMenu -->
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>

<!-- SlimScroll -->
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Peace JS -->
<script src="js/plugins/pace/pace.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>

<!-- Main Angular scripts-->
<script src="js/angular/angular.min.js"></script>
<script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="js/angular-translate/angular-translate.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
<script src="https://code.angularjs.org/1.2.25/angular-route.js"></script>
<script src="js/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="js/plugins/angular-idle/angular-idle.js"></script>

<!--
 You need to include this script on any page that has a Google Map.
 When using Google Maps on your own site you MUST signup for your own API key at:
 https://developers.google.com/maps/documentation/javascript/tutorial#api_key
 After your sign up replace the key in the URL below..
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQTpXj82d8UpCi97wzo_nKXL7nYrd4G70"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="js/adal/adal.min.js"></script>
<script src="js/adal/adal-angular.js"></script>

<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/translations.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>

</body>
</html>

和content.html

<!-- Wrapper-->
<div id="wrapper">

    <!-- Navigation -->
    <div ng-include="'views/common/navigation.html'"></div>

    <!-- Page wraper -->
    <!-- ng-class with current state name give you the ability to extended customization your view -->
    <div id="page-wrapper" class="gray-bg {{$state.current.name}}">

        <!-- Page wrapper -->
        <div ng-include="'views/common/topnavbar.html'"></div>

        <!-- Main view  -->
        <div ui-view></div>

        <!-- Footer -->
        <div ng-include="'views/common/footer.html'"></div>

    </div>
    <!-- End page wrapper-->

    <!-- Right Sidebar -->
    <div ng-include="'views/common/right_sidebar.html'"></div>

</div>
<!-- End wrapper-->

但是，由于 UI 路由无法与 ADAL 很好地配合，我更改了 config.JS，现在我使用 azure 的身份验证工作完美。

function config($routeProvider, $httpProvider, adalAuthenticationServiceProvider){

    $routeProvider.when("/dashboard_1", {
        controller: "MainCtrl",
        templateUrl: "/views/dashboard_1.html",
        requireADLogin: true,
        resolve: {
                        loadPlugin: function ($ocLazyLoad) {
                            return $ocLazyLoad.load([
                                {

                                    serie: true,
                                    name: 'angular-flot',
                                    files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
                                },
                                {
                                    name: 'angles',
                                    files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
                                },
                                {
                                    name: 'angular-peity',
                                    files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
                                }
                            ]);
                        }
                    }
    }).otherwise({ redirectTo: "/dashboard_1" });

    adalAuthenticationServiceProvider.init(
       {
           instance: 'https://login.microsoftonline.com/',
           tenant: 'mysaasapp.onmicrosoft.com',
           clientId: '33e037a7-b1aa-42ab-9693-6c22d01ca338',
           extraQueryParameter: 'nux=1'
           //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
       },
       $httpProvider
       );    
}
angular
    .module('inspinia')
    .config(config)
    .run(function($rootScope, $state) {
        $rootScope.$state = $state;
    });

问题是我不知道如何使用嵌套 View 或布局页面与核心 NG Route，我应该如何重写我的 index.html/content.html 以适应此更改。

这导致我渲染了内容，但左侧导航栏或顶部栏没有渲染。

最佳答案

在你的index.html中将uiview更改为ng-view。由于 ng-route 不允许嵌套 View ，因此您应该将指向 content.html 的路由作为另一种状态包含在路由提供程序中。

关于javascript - 如何将此代码从 UI Route 更改为核心 ng-Route，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30991771/

25 4 0
文章推荐： javascript - 如何在放置事件后获取实际图像宽度和高度
文章推荐： javascript - 为什么使用 data() 将函数存储在元素上？
文章推荐： HTML 和 CSS 布局
文章推荐： javascript - 如何有效调试动画代码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com