Angular JS注入路由问题

Angular JS Routing Issue with Injection

本文关键字：问题 路由 注入 JS Angular      更新时间：2023-09-26

我是Angular JS的新手，根据我得到的错误，我在注入方面遇到了问题。

错误在这里

我正在转换一个模板来进行一些练习。

我为菜单第一个建立了一个指令

 app.directive("bsnavbar", function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        templateUrl: "../components/navbar/Navbar.html",
        compile: function (element, attrs) {
            var li, liElements, links, index, length;
            liElements = $(element).find("#navbarul");
            if (attrs.currentTab === "Home") $(document.getElementById('homeLink')).addClass('active');
            if (attrs.currentTab === "About") $(document.getElementById('aboutLink')).addClass('active');
            if (attrs.currentTab === "Gallery") $(document.getElementById('galleryLink')).addClass('active');
            if (attrs.currentTab === "Contact") $(document.getElementById('contactLink')).addClass('active');
        }
    }
});

它本身运行良好。

然后，我添加了一些功能，使用从JSON文件读取数据的控制器使照片库更具动态性（导航时仍会移动到单独的页面gallery.html、gallery.1.html等）

var controllers = angular.module("controllers", []);
controllers.controller("GalleryPageCtrl", function GalleryPageCtrl($scope, $http, $stateParams) {
var gid = $stateParams.gid;
$scope.pageName = "Photography Gallery";
$scope.Description = "";
$http.get('/data/galleryItems.json')
                .then(function (response) { $scope.data = response.data.galleries });
});

这又很好用。

然后我决定精简为使用1个页面和html模板来使用UI路由器进行注入。一旦我这样做了，一切似乎都很好，然后我开始犯错误。

这可能与我如何使用HTML有关吗？

<body ng-app="navbarapp">
<div id="container">
    <header>
        <bsnavbar id="nbar" current-tab="Home"></bsnavbar>
    </header>

    <div ui-view>

    </div><!-- View End-->

</div> <!--Container End-->
.....
// Scripts and End body //

这是一个拖延时间的事件。我感谢你的帮助。

    <div class="preloader">
        <img alt="" src="images/preloader.gif">
    </div>

应用程序代码

"use strict";
(function () {
var app = angular.module("navbarapp", ["controllers","ui.router"]);
app.directive("bsnavbar", function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        templateUrl: "../components/navbar/Navbar.html",
        compile: function (element, attrs) {
            var li, liElements, links, index, length;
            liElements = $(element).find("#navbarul");
            if (attrs.currentTab === "Home") $(document.getElementById('homeLink')).addClass('active');
            if (attrs.currentTab === "About") $(document.getElementById('aboutLink')).addClass('active');
            if (attrs.currentTab === "Gallery") $(document.getElementById('galleryLink')).addClass('active');
            if (attrs.currentTab === "Contact") $(document.getElementById('contactLink')).addClass('active');
        }
    }
});

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('Home', {
            url: '/',
            controller: 'HomePageCtrl',
            controllerAs: 'home',
            templateUrl: 'components/index/index.html'
        });

    $stateProvider
        .state('GalleryIndex', {
            url:'Gallery',
            controller: 'GalleryViewControl',
            controllerAs: 'GalleryIndex',
            templateUrl: 'components/gallery/galleryIndex.html'
        });
}]);
}());

脚本

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="components/controllers/controllers.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.migrate.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="assets/simpletextrotator/jquery.simple-text-rotator.min.js"></script>
    <script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
    <script type="text/javascript" src="js/SmoothScroll.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

我调查了这个脚本，由于某种原因在本地使用它，我没有收到错误消息。所以我把它包括在项目中。我仍然有一个问题，路由不起作用。使用url，我得到一个404，并且模板没有显示在ui视图区域中。菜单在ui视图区域之外工作。

我已经尝试添加

$urlRouterProvider.otherwise('/home');

和更新的

app.config(['$stateProvider', function ($stateProvider, $urlRouterProvider)

我得到了注入错误。到目前为止，我发现的每一个讨论$urlRouterProvider的页面都声明它是UI路由器的一部分。这是否表明我的脚本仍然没有正确加载？

我将代码的编写方式更改为下面的，它运行良好。

angular.module('navbarapp').config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('home', {
        url: '/home',
        controller: 'HomePageCtrl',
        controllerAs: 'Home',
        templateUrl: 'components/index/index.html'
    })
    .state('GalleryIndex', {
        url: '/Gallery',
        controller: 'GalleryViewControl',
        controllerAs: 'GalleryIndex',
        templateUrl: 'components/gallery/galleryIndex.html'
    });
$urlRouterProvider.otherwise('/home');
});
相关文章：