路由when()方法中映射AngularJs组件

Question

我正在尝试创建我的第一个 AngularJS 应用程序。但是我不明白为什么我的路由不能正常工作（我认为我的 when() 方法和目录结构有问题）。这是我的目录结构（我遵循 AngularJS 标准命名约定）。 Directoty Structure

-Home
--sidebar
---sidebar.component
---sidebar.template
--home.component
--home.template
--home.module
-menu
--menu.module
--menu-list
---menu-list.component
---menu-list.template
-app.js

app.js

    angular.module('myApp', [
  'ngRoute',
  'menu',
  'home'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider
  .when('/menu-list', {
    template: '<menu-list></menu-list>'
  })
  .when('/home', {
    template: '<home></home>'
  })
  .when('/sidebar', {
    template: '<sidebar></sidebar>'
  })
  .otherwise('/home');
}]);

menu.module.js

angular.module('menu',[]);

菜单-list.component.js

angular.module('menu')
.component('menu-list', {
    templateUrl: 'menu/menu-list/menu-list.html',
    controller: [
        function MenuListController() {
            alert("MenuListController Called");
        }
    ]
});

Answer 1

自从我尝试使用 ngRoute 以来已经有很长一段时间了，但这是我的 'otherwise' 声明与您的不同之处：

.otherwise({
    redirectTo: '/home'
  });

不同之处在于我传入了一个带有属性 'redirectTo' 的对象。您也可以查看此 article。

Answer 2

问题是我没有正确命名组件。在 angularJS 中，要在 html 中包含视图，我们需要在 camelCase 中命名组件，它将被 hyphen-case[=30] 包含=]

Component name: 'phoneList' View name: '<phone-list></phone-list>'

示例来自 AngularJS-Tutorial

app/index.html:

<html ng-app="phonecatApp"> <head> ... <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> <script src="phone-list.component.js"></script> </head> <body>  <phone-list></phone-list> </body> </html>

app/phone-list.component.js:

// Register `phoneList` component, along with its associated controller and template angular. module('phonecatApp'). component('phoneList', { template:'phone-list.html', controller: function PhoneListController() { //... } });

注：如有错误或写得不好欢迎编辑

路由when()方法中映射AngularJs组件

Mapping AngularJs component in routing when() method

javascript

angularjs

angularjs-routing