up vote 1 down vote favorite
1

I am pretty new to Angular JS and am having an issue with injection according to the error I am getting.

Error is here

I am converting a template to get some practice.

I built a directive for the menu first 

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

By itself it worked fine.

I then added some features to make a photo gallery more dynamic using controllers that read data from JSON files (this was still moving to separate pages gallery.html, gallery-1.html, etc when navigating)

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

});

again this worked fine.

Then I decided to condense down to using 1 page and html templates for injection using UI router. Once I did this everything seemed to be fine and then I started to get an error.

Could this have something to do with how I have the 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 //

This is one of those hold ups that eats time. I appreciate any help.

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

App Code

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

}]);

}());

Scripts

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

I investigated the script and for some reason using it locally i do not get that error message. So i included it in the project. I am still having an issue with the routing not working. Using a url i get a 404 and the templates are not being displayed in the ui-view area. The menu is working outside of the ui-view area.

I have tried adding 

$urlRouterProvider.otherwise('/home');

and updated

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

and am getting the injection error. Every page I have found that discusses $urlRouterProvider so far states that it is a part of UI-Router. Could this be an indication that my script is still not loading correctly?

share|improve this question
    
Are you setting up a .config block with your states setup? – Daniel Lizik Dec 10 '15 at 18:30
    
Can you post app.js code? – Shaohao Lin Dec 10 '15 at 18:45
    
I am. I updated my post as well with the app code. – Bob Robertson Dec 10 '15 at 19:29
    
Include the script tags in the HTML - obviously the ui.router module cannot be found... Did you include it? – Michael Rose Dec 10 '15 at 20:16
    
yes, I am following step by step through a pluralsite class online as i am doing this. Unfortunately the videos works and mine does not. – Bob Robertson Dec 10 '15 at 20:27
up vote 0 down vote

I changed how I wrote the code to below and it works fine. 

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');
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.