Question

我使用Spring-boot连接AngularJS。 My Rest Controller在我的webApps文件夹中呈现index.html文件，但我没有呈现我设置的“主页”页面。

的index.html

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app/bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="app/bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="app/bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="app/bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="app/bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  Test Test Test

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src=""></script>
  <script src="app/bower_components/angular/angular.js"></script>
  <script src="app/bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>

  <script src="app/components/version/version.js"></script>
  <script src="app/components/version/version-directive.js"></script>
  <script src="app/components/version/interpolate-filter.js"></script>
  <script src="app/scripts/home/homeConfig.js"></script>
  <script src="app/scripts/home/homeController.js"></script>
</body>
</html>

app.js angular.module（'myApp'，[ 'ngRoute'， 'myApp.version' ]）;

homeConfig.js

angular.module('myApp')
    .config(['$stateProvider', function ($stateProvider) {

        $stateProvider
            .state('home',{
                parent: 'site',
                url: '/',
                data: {
                    roles: []
                },

                views: {
                    'content@:':{
                        templateUrl: 'app/scripts/home/home.html',
                        controller: 'HomeController'
                    }
                }

            });

}]);

HomeController.js

angular.module('myApp')
    .controller("HomeController",['$scope', function($scope){

        console.log("Inside the HomeController")

    }]);

home.html的

<div>
    <h2>You have landed on the home page!!!</h2>
</div>

我的后端有弹簧靴。

IndexController.java

@RestController
public class IndexController {

    @RequestMapping("/")
    public String index(){
        System.out.println("Looking in the index controller.........");
        return "index";
    }

}

目前是什么呈现它是在index.html上编写的“测试测试测试”。我正在寻找“你已登陆主页!!!”

控制台中显示完整错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider

----------------- SOLUTION ---------------

使用routeProvider而不是$ stateProvider

angular.module('myApp')
    .config(['$routeProvider', function ($routeProvider) {

        $routeProvider.when('/', {
            templateUrl: 'app/scripts/home/home.html',
            controller: 'HomeController'
        }).otherwise({redirectTo:'/'});

}]);

Answer 1

$stateProvider是ui-router的一部分，而不是原生的角度路由器。在您的情况下，您应该使用$routeProvider和$routeProvider.when语法而不是$stateProvider.state。 $routerProvider here上的文档。

由于以下原因无法实例化myApp模块：错误：[$ injector：unpr]未知提供者：$ stateProvider ..后端的Spring-boot

1 个答案: