堆栈与角度路由器添加控制器

Question

Stack with something rather simple.I am using ngRoute for the first time and faced this.

I've managed to get html includes working, but, attempting to add controller happens nothing.

Js file:

var app = angular.module('admin', ['ngRoute'])

// Router config
app.config(function($routeProvider){
  $routeProvider
    .when('/', {
      templateUrl:"partials/index.html"
    })
    .when('/news', {
      templateUrl:"partials/news.html",
      controller:"newsCtrl"
    })
    .when('/changelog', {
      templateUrl:"partials/changelog.html"
    })
    .when('/todos', {
      templateUrl:"partials/todos.html"
    })
    .when('/users', {
      templateUrl:"partials/users.html"
    })
    .when('/messages', {
      templateUrl: "partials/messages.html"
    })
    .otherwise({
       redirectTo: '/'
    });
})

// Sidebar directive
app.directive('sidebar', function() {
  return {
    restrict: "E",
    templateUrl: "partials/sidebar.html"
  }
})

/* News Controller */
app.controller('newsCtrl', function($scope) {
  $scope.greeting = "HI"

  $scope.news = [
    "news 1",
    "news 2",
    "news 3"
  ]
})

And the html file (news.html):

<h3>News list:</h3>
<div class="content-container">
  {{ newsCtrl.greeting }}
  {{2+2}}
  <li ng-repeat="item in newsCtrl.news">{{item}}</li>
</div>

The output I receive is pretty much like this:

News

4

I've tried attaching controller classical way - still no result. What am I missing?

Answer 1

All you need is sth like this:

var myApp = angular.module('myApp', ['ngRoute']);

myApp
.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController as homeCtl',
            templateUrl: 'partials/home.html'
        })
        .when('/about', {
            controller: 'AboutController as aboutCtl',
            templateUrl: 'partials/about.html'
        })
        .when('/contact', {
            controller: 'ContactController as contactCtl',
            templateUrl: 'partials/contact.html'
        })
        .otherwise({
            redirectTo: '/'
        });
})
.controller('HomeController', function() {
    var self = this;
    self.user = 'marios';
})
.controller('AboutController', function() {

})
.controller('ContactController', function() {

});

and the home template:

<div>
    <p>Hello {{homeCtl.user}}</p>
</div>

check here a working example or here .

Answer 2

I assume you have included the <ng-view> directive in your main html file, so that NgRouter can replace it with each route's template.

In your example you are using $scope . That means that you can refer to your controller's properties directly from your templates. ie:

<li ng-repeat="item in news">{{item}}</li>

On the other hand, if you are going to use the Controller As syntax, you would do something like this:

.when('/news', {
  templateUrl:"partials/news.html",
  controller:"newsCtrl",
  controllerAs: "vm"
})

---

app.controller('newsCtrl', function() {
  var vm = this;
  vm.greeting = "HI"

  vm.news = [
    "news 1",
    "news 2",
    "news 3"
  ]
})

---

<h3>News list:</h3>
<div class="content-container">
  {{ vm.greeting }}
  {{2+2}}
  <li ng-repeat="item in vm.news">{{item}}</li>
</div>

Answer 3

I recommend for you, to look the John Papas style guide, and you can make something like this to work

    var app = angular.module('admin', ['ngRoute']);

    app.config(routeConfig)
      .controller('newsCtrl', newsCtrl);
    // Router config
    routeConfig.$inject = ['$routeProvider'];
    function routeConfig($routeProvider){
      $routeProvider
        .when('/', {
          templateUrl:"partials/index.html"
        })
        .when('/news', {
          templateUrl:"partials/news.html",
          controller:"newsCtrl",
          controllerAs: "vm"
        })
        .when('/changelog', {
          templateUrl:"partials/changelog.html"
        })
        .when('/todos', {
          templateUrl:"partials/todos.html"
        })
        .when('/users', {
          templateUrl:"partials/users.html"
        })
        .when('/messages', {
          templateUrl: "partials/messages.html"
        })
        .otherwise({
           redirectTo: '/'
        });
    })

    // Sidebar directive
    app.directive('sidebar', function() {
      return {
        restrict: "E",
        templateUrl: "partials/sidebar.html"
      }

})

/* News Controller */
function newsCtrl () {
  var vm = this;

  vm.greeting = "HI"

  vm.news = [
    "news 1",
    "news 2",
    "news 3"
  ]
})

In html

<h3>News list:</h3>
<div class="content-container">
  {{ vm.greeting }}
  {{2+2}}
  <li ng-repeat="item in vm.news">{{item}}</li>
</div>