Question

您好我已经开始学习角度几天了，我得说它是一条坎坷的道路。我对SPA应用程序并不陌生，过去一年我一直在使用Durandal的项目。

在两天内，我将不得不开始使用angular and angular-ui-router的项目。

出于某种原因，我似乎无法配置甚至在angular-ui-router docs上找到的最简单的例子：https://github.com/angular-ui/ui-router/wiki

截至目前，我有以下代码：

这是我的javascript代码：

<script>
   var codeArtApp = angular.module("codeArtApp", ['ui.router']);

   codeArtApp.controller('MyCtrl', function($state){
       $state.go('contacts')

   });

   codeArtApp.config(function($stateProvider){
        $stateProvider.state('contacts', {
            template: '<h1>{{title}}</h1>',
            resolve: { title: 'My Contacts' },
            controller: function($scope, title){
                $scope.title = 'My Contacts';
            },
            onEnter: function(title){
                console.log(title)
            },
            onExit: function(title){
                if(title){

                }
            }
        })
    });
</script>

这是我的HTML：

<body ng-app="codeArtApp">
<div ng-controller="MyCtrl">
    <section ui-view></section>
</div>
</body>

当我运行应用程序$ state.go（'contacts'）被执行但我没有被发送到联系人状态并且未加载html。

如果我尝试加载状态，则浏览器url /＃/ contacts仍然没有任何反应。

我做错了什么？

修改

我还绑定了$ stateChangeError事件，我看到我正在获得堆栈跟踪：

enter image description here

它似乎正在尝试解决“我的ContactsProvider”，但我将状态联系人命名为此处发生了什么？

Answer 1

有一个有效的plunker。我们必须做的改变是：

首先我们必须

声明url : '/'参数，属于任何州和
我们不会使用controller="..."设置，这不是使用ui-router评估状态的方式

其次，我们必须正确使用必须为doc says

resolve

解决

... resolve属性是一个地图对象。 map对象包含键/值对：

key - {string}：要注入控制器的依赖项名称       工厂 - {string|function}：


如果是字符串，则它是服务的别名。

否则，如果是函数，则将其注入，并将返回值视为依赖项。如果结果是一个promise，则在实例化控制器并将其值注入控制器之前解析它。

正如我们所看到的，在resolve对象中我们可以返回字符串，但作为服务名称

这是经过调整的and working脚本：

'use strict';

var codeArtApp = angular.module("codeArtApp", ['ui.router']);

// NOT NEEDED
// codeArtApp.controller('MyCtrl', function($state) {
//  $state.go('contacts')    
// });

codeArtApp.config(function($stateProvider) {
  $stateProvider.state('contacts', {
    url : "/",
    template: '<h1>{{title}}</h1>',
    resolve: {
      // title: 'My Contacts'
      title: function() { return 'My Contacts'; },
    },
    controller: function($scope, title) {
      $scope.title = 'My Contacts';
    },
    onEnter: function(title) {
      console.log(title)
    },
    onExit: function(title) {
      if (title) {

      }
    }
  })
});

这样我们就会触发默认状态

codeArtApp.config(['$urlRouterProvider',
  function($urlRouterProvider) {

    $urlRouterProvider.otherwise('/');
  }
]);

这是html模板：

  <body ng-app="codeArtApp">        
    <!--<div ng-controller="MyCtrl">
       <section ui-view></section>
    </div> -->        

    <section ui-view></section>    
  </body>

检查代码here

未加载Angular ui-router状态

1 个答案:

解决