AngularJS and Angular-Route-Segment

Question

I am new to AngularJS so any tips will be welcome as I'm still trying to wrap my head around how everything works.

The following controller houses other controllers inside of it, however I've shortened the code to replicate my problem without the inner segments (I'll have more bugs once I add that in).

This is my html section:

<div  ng-app="app">
<div class="ng-cloak" ng-controller="mainController">
    <a ng-class="{active: ('sectionHome' | routeSegmentStartsWith)}" href="#{{'sectionHome' | routeSegmentUrl}}">Home</a>

    <div id="content" style="">
        <div app-view-segment="0"></div>
    </div>

    <div id=loading class=alert ng-show="loader.show">Loading...</div>
</div> 
</div>

And the javascript:

var app = angular.module('app', ['ngRoute', 'ngAnimate', 'route-segment', 'view-segment']);

app.config(function($routeSegmentProvider, $routeProvider) {

$routeSegmentProvider.options.autoLoadTemplates = true;

$routeSegmentProvider    
    .when('/Home', 'sectionHome')
    .segment('sectionHome', {
        'default': true,
        templateUrl: '../templates/sHome.html',
        controller: 'mainController'})             

$routeProvider.otherwise({redirectTo: '/Home'}); 
}) ;

app.value('loader', {show: false});

app.controller('mainController', function($scope, $routeSegment, loader) {

$scope.$routeSegment = $routeSegment;
$scope.loader = loader;

$scope.$on('routeSegmentChange', function() {
    loader.show = false;
})
});

I'm either missing something conceptual or some other big thing, since when I inspect the link it appears that the scope bindings are not set in the html document and I remain with "ng-class="{active: ('sectionHome' | routeSegment...".

I've tried editing the code in jsFiddle (http://jsfiddle.net/3boccdu6/) however there I'm receiving an error "..[$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it.."

This would make sense but I'm really not sure what I'm doing wrong, I've been following this working example: http://angular-route-segment.com/src/example/#/section3

I'm going to try to rewrite from scratch without using the angular-route-segment module. Just the Angular route module. Still any comments would be welcome. — g3trans
– g3trans, Commented Feb 11, 2015 at 18:39
Hi, angular-route-segment's author here. Your jsfiddle is not working because of incorrect module dependencies. I've modified it here: jsfiddle.net/3boccdu6/1 Now you can demonstrate your issue based on this fiddle, so that it would be easier to help you. — artch
– artch, Commented Apr 10, 2015 at 8:37

Enamul Hassan · Accepted Answer · 2015-09-30 00:46:42Z

0

Adding the following to your html will resolve the issue.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-resource.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.4.0/angular-route-segment.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js">
</script>
<script src="app.js"></script>

edited Sep 30, 2015 at 0:46

Enamul Hassan

5,46323 gold badges45 silver badges61 bronze badges

answered Sep 29, 2015 at 23:55

Sushruth Reddy Gade

337 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS and Angular-Route-Segment

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related