CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Larsmanson
Larsmanson

Reputation: 413

Angular from ng-Route to Ui.Router

I'm trying to go from ng-Route to ui.router, but I can't seem to get it working. It keeps giving me an error and my app keeps crashing.

This is how I've setup my app.js:

var app = angular.module("loodgietersApp", ["ui.router"]);

app.config(function($stateProvider, $urlRouterProvider, $locationProvider,$animateProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'partials/home.html'
        })

        .state('24-uur-loodgieter-service', {
            url: '/24-uur-loodgieter-service',
            templateUrl: 'partials/24-hour-service.html'
        });
$locationProvider.html5Mode(true);
});

This is the jade index file:

script(type="application/javascript" src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js")

body

div(class="nav-bar")
 ul
  li
   a(href="/24-uur-loodgieter-service")

div(class="box")
    div(class="animate-box page" ui-view my-scroll)

    div(ng-include="'partials/includes/brands.html'")

    div(ng-include="'partials/includes/specialisations.html'")

    div(ng-include="'partials/includes/footer.html'")

Upvotes: 0

Views: 49

Answers (1)

Jenish Rabadiya
Jenish Rabadiya

Reputation: 6766

While specifying the url link you should use ui-sref directive and also specify the element where the partial views will be loaded using element directive ui-view as I have mentioned below:

body

div(class="nav-bar")
 ul
  li
   a(ui-sref="24-uur-loodgieter-service")

div(class="box")
    ui-view

    div(class="animate-box page" ui-view my-scroll)

    div(ng-include="'partials/includes/brands.html'")

    div(ng-include="'partials/includes/specialisations.html'")

    div(ng-include="'partials/includes/footer.html'")

Upvotes: 1

Related Questions