javascript - AngularJS UI-Router 没有进入默认状态

标签 javascript angularjs angular-ui-router

在我的一生中,我无法在 index.html 的用户界面 View 中加载任何内容。我在另一个项目中使用 AngularJS/Ui-Router 并且它正在工作。这实际上就是我目前项目中的所有内容。

当我输入 ng-controller='ResumeCtrl' 时它起作用了在 <span> 上.

我在控制台中没有收到任何错误,但我确实看到了我的 App Loaded [ null ]控制台日志。

我已经看过至少 10 种不同的 ui-router 教程,并且我已经真正地简化了它并且没有得到任何地方。在过去的 12 小时里,我一直在看这个,我可能错过了一些非常小的东西,但在这一点上,我没有看到它。 :(

这是我的 JSFiddle:https://jsfiddle.net/L5csekpq/2/

index.html:

<body ng-app="wmApp">
    <h1>WM TEST</h1>

    <div><a href="#/resume">Resume</a></div>

    [<span ui-view></span>]

    <script type="application/javascript" src="/lib/lib.js"></script>
    <script type="application/javascript" src="/wm.js"></script>
</body>

lib.js是 bower 加载的 angular.js (1.5.5)/angular-ui-route.js (0.2.18) 的 grunt concat/minified。

这是我所有 JS 文件的 grunt concat,上面链接为 wm.js:

angular.module('wmApp', [
    'ui.router',
    'wmApp.wmConstants',
    'wmApp.ResumeController'
])

.run(['$rootScope', '$location', '$state', function (
    $rootScope,
    $location,
    $state
) {
    console.log ('App Loaded [', $location.state(), ']');
    $rootScope.$on("$stateChangeError", console.log.bind(console));
}])
;
angular.module('wmApp.wmStates', [])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('home', {
        url: '/home',
        template: '<h3>STATE SUCCESSFUL</h3>'
      })
      .state('resume', {
        url: '/resume',
        template: '<h3>{{ data }}</h3>',
        controller: 'ResumeCtrl'
      })
  ;

  $urlRouterProvider.otherwise('/home');
}])
.run(['$state', function($state) {
  console.log('Current State: ', $state.current);
}])
;


angular.module('wmApp.wmConstants', [])

.constant('wmConstants', {
  sample: {
    api: {
      url: 'http://api.sample.com',
      key: 'xxxxxx' 
    }
  }
});

angular.module('wmApp.ResumeController', [])

.controller('ResumeCtrl', ['$scope', 'wmConstants', function($scope, wmConstants) {
  console.log('ResumeCtrl', wmConstants.sample.api.url);

  $scope.data = 'omg data';
}]);

最佳答案

您的问题是您忘记将模块 wmApp.wmStates 声明为您的主应用程序模块所必需的。

这个:

angular.module('wmApp', [
    'ui.router',
    'wmApp.wmConstants',
    'wmApp.ResumeController'
])

应该是这样的:

angular.module('wmApp', [
    'ui.router',
    'wmApp.wmStates',
    'wmApp.wmConstants',
    'wmApp.ResumeController'
])

关于javascript - AngularJS UI-Router 没有进入默认状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37076986/

相关文章:

javascript - 将字符串拆分为数字和文本

javascript - 从 Angularjs REST 资源发送基于文件的虚拟数据

javascript - Angular Material md-toolbar 不粘连(md-scroll-shrink)

javascript - AngularJS ui 路由器 - 不显示嵌套的部分 View

javascript - 在现有应用程序中实现 `combineReducers` 的规范方法

javascript - 全日历叠加事件

javascript - NodeJS/Angular 无法删除对象

javascript - Ui.Router使用lazyLoad导入JS文件,但按钮失去功能

javascript - 如何跟踪不伦不类的 ueoe angularjs 错误

javascript - 如何使用nodejs将数据存储到aerospike中?