AngularJS ui-路由器模板未加载

Question

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

这是我的 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-路由器模板未加载

AngularJS ui-router template does not loading

javascript

url-routing

angularjs

angularjs-routing

angular-ui-router