javascript - $state.go 没有获取模板

标签 javascript angularjs angular-ui-router

我是使用 angular.module methods 初始化 Angular 应用程序的新手。 。我没有收到任何错误消息,但是,链接到我的状态的模板未加载。

//APP.JS

var libraries = ['ui.router','layout'];
// DECLARATION
var opsManagement = angular.module('opsMgmt',libraries);
opsManagement.config(appConfig);
opsManagement.run(($state)=>{
    //FORCE STATE CHANGE
    $state.go('message');
    console.log($state.current); //message
    console.log($state.name); //message
    console.log($state.templateUrl); //template/messages/layout.html
});
angular.bootstrap(document,['opsMgmt']);

//CONFIG.JS

function appConfig($stateProvider){
    //DEFINE ROUTER
    $stateProvider
        .state('message',{
            url:'message',
            templateUrl: '/templates/messages/layout.html'
        })
};

//INDEX.HTML

<body>
    <main ui-view></main>
</body>

//布局.HTML

<div>
<!-- MESSAGE VIEW COMPONENT DIRECTIVE -->
    <message-item></message-item>
</div>

这里是 GitHub 上完整源代码的链接.

问题:为什么我的模板 templates/messages/layout.html 没有加载到页面中?

最佳答案

问题(可能)是您在文档加载之前尝试引导 Angular 应用。

这解决了它

angular.element(document).ready(() => {
  angular.bootstrap(document,['opsMgmt']);
})

http://plnkr.co/edit/QYklvwMLhJP524qWnfRa?p=preview

另一种方法是将脚本移至 <body> 的末尾标签。

<小时/>

我还清理了您的路线定义并删除了 .run调用

function appConfig($stateProvider, $urlRouterProvider){
    //DEFINE ROUTER
    $stateProvider
        .state('message',{
            url:'/message', // note the leading "/"
            templateUrl: 'templates/messages/layout.html',
            controller: function() {
              console.log('Got in here')
            }
        });
    $urlRouterProvider.otherwise('/message'); // default route defined here
}

关于javascript - $state.go 没有获取模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42015181/

相关文章:

javascript - 显示来自前端的 AngularJS 输入

javascript - 如何清除导致错误的搜索参数?

javascript - 如何在 Gutenberg 中使用序列化数据?

javascript - jQuery .append() 以错误的方式改变了页面布局

javascript - 使用 ocLazyLoad 在表中延迟加载

angularjs - Angular ui-router,:id. $stateParams 为空的路由问题

javascript - 为什么我的 jQuery 事件处理程序在附加到多个元素时会失败?

javascript - AngularJs - Canvas 上的图表未在 ng-repeat 中渲染

asp.net - 包装 StaticFileMiddleware 以重定向 404 错误

angularjs - 如何使用 $state.go toParams 和 $stateParams 发送和检索参数?