帶注入的Angular JS路由問題

Question

我對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 });

});

再次這很好。

然后，我決定簡化為使用UI路由器使用1頁和html模板進行注入。 一旦這樣做，一切似乎都很好，然后我開始出現錯誤。

這可能與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視圖區域中顯示。 菜單在用戶界面區域之外工作。

我嘗試添加

$urlRouterProvider.otherwise('/home');

並更新

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

並出現注射錯誤。 到目前為止，我發現討論$ urlRouterProvider的每個頁面都聲明它是UI-Router的一部分。 這是否表明我的腳本仍無法正確加載？

Answer 1

我將代碼的編寫方式更改為以下內容，並且工作正常。

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');
});

帶注入的Angular JS路由問題

問題描述

1 個解決方案

解決方案1
0 2015-12-11 07:10:22

帶注入的Angular JS路由問題

問題描述

1 個解決方案

解決方案1 0 2015-12-11 07:10:22

解決方案1
0 2015-12-11 07:10:22