Question

我是AngularJS的新手。我跟着egghead.io我已经设置了一个控制器和模型来从输入组件中检索消息并显示它。我正在使用ui-router。

这是我的index.html

<!DOCTYPE html>
<html ng-app="app">
    <head lang="en">
        <meta charset="UTF-8">
        <title> </title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
        <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ui-view=""></div>
    </body>
</html>

这是我的app.js

angular.module('app',["ui.router"])

            .config([function($stateProvider) {
                $stateProvider
                    .state('index', {
                        url:"",                 
                        templateUrl:"templates/first.html",
                        controller:"FirstCtr as first"
                    });

            });

            .controller("FirstCtr", function FirstCtr() {
                var first = this;
                first.greeting = "First";

            });

这是我的templates / first.html

<input type="text" ng-model="first.greeting"/>
    <div ng-class="first.greeting">
        {{first.greeting}} {{"World"}}
    </div>

我转到http://localhost:8080后，它是空白并抛出此错误

请给我一些建议。

Answer 1

您的状态定义应该在controllerAs状态选项中声明为控制器别名，您需要从配置块结尾删除分号。

此外，您需要正确注入$stateProvider依赖项以避免错误。

<强>代码

angular.module('app', ["ui.router"])

//missed `'$stateProvider'` dependency here
.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      templateUrl: "templates/first.html",
      controller: "FirstCtr",
      controllerAs: "first"
    });
}]) //remove semicolon from here as you are appending app in chain

.controller("FirstCtr", function FirstCtr() {
  var first = this;
  first.greeting = "First";
});

Working Plunkr

AngularJS ui-router模板未加载

1 个答案: