Search code examples
htmlangularjsangular-ui-routerpartials

Ui-Router for Angular - Partials html


there! I'm trying to use partials, but isn't working:

My html files are created and in place, I can't understand why it doesn't work!

I'm using angular 1.6.4 and ui-router 1.0.0-rc.1

Anyone can help me?

myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html",
controller: "HomeController",
});
$stateProvider
.state("about", {
url: "/about",
templateUrl: "about.html",
controller: "AboutController",
});
$stateProvider
.state("contact", {
url: "/contact",
templateUrl: "contact.html",
controller: "ContactController",
});
});
myApp.controller('HomeController', function($scope, $location) {
$scope.message = 'Home Controller!';
});
myApp.controller('AboutController', function($scope) {
$scope.message = 'About Controller.';
});
myApp.controller('ContactController', function($scope) {
$scope.message = 'Contact Controller';
});

And if I change to the this (below) it works just fine:

var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    template: '<h3>hello world!</h3>'
  }

  var aboutState = {
    name: 'about',
    url: '/about',
    template: '<h3>Its the UI-Router hello world app!</h3>'
  }

  $stateProvider.state(helloState);
  $stateProvider.state(aboutState);
});

Solution

  • For starters, check this piece of code for the correct syntax of $stateProvider

    app.config(function($stateProvider) {
      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'views/home.html'
        }) // no semicolon here
        .state('projects', {
          url: '/projects',
          templateUrl: 'views/projects.html'
        }) // no semicolon here
        // etc
    });
    

    You shouldn't have ; in between your states.

    Also, you should have them all together and not split up the $stateProvider

    Also, you should remove the extra , you have at the end of each controller declaration in your $stateProvider elements.

    Here is a working example.
    http://embed.plnkr.co/YKtubLucc5Qa4GwGI77V/