堆叠有角度路由器添加控制器

Stack with angular router adding controller

本文关键字：路由器 添加 控制器      更新时间：2023-09-26

用一些相当简单的东西堆叠。我是第一次使用ngRoute，并面临这个问题。

我已经设法使html包含工作，但是，尝试添加控制器什么也没发生。

Js文件：

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"
  ]
})

和html文件（news.html）：

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

我收到的输出很像这样：

新闻

4

我试过用经典的方式连接控制器，但还是没有结果。我错过了什么？

我假设您已经在主html文件中包含了<ng-view>指令，这样NgRouter就可以用每个路由的模板替换它。

在您的示例中，您使用的是$scope。这意味着您可以直接从模板中引用控制器的属性。即：

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

另一方面，如果您要使用ControllerAs语法，您可以执行以下操作：

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

你只需要这样的东西：

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

和home模板：

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

请在此查看一个工作示例或此处。

我建议您查看John Papas风格指南，您可以制作这样的东西来工作

    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"
  ]
})

在html 中

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