Question

我是使用angular.module methods初始化角度应用的新手。我没有收到任何错误消息，但是，我的状态链接到我的州并没有加载。

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

//的layout.html

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

以下是GitHub上完整源代码的链接。

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

Answer 1

问题是（可能）您在文档加载之前尝试引导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 }

$ state.go没有获得模板

1 个答案: