Angular UI 路由器不工作 [英] Angular UI router not working

问题描述

**这个ui路由器的js文件是否正确.显示的错误是错误:未知提供者:来自 routerApp 的 $stateProvider"

此js文件已加载到Html文件中.

**

var routerApp = angular.module('routerApp', ['ui.router']);routerApp.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/template1');$stateProvider//主状态和嵌套视图 ========================================.state('template1', {网址:'/temp1'，templateUrl: 'templates/template1.html'})//关于页面和多个命名视图 ==================================.state('template2', {//我们稍后会讲到这个});});<!-- 主要内容--><div class="容器"><!-- 我们将在这里注入我们的内容 ============================== --><div ui-view></div>

</html>

请帮忙.提前致谢

解决方案

请看这里:http://plnkr.co/edit/FYxpaHpKgvpEu6f1TZ7l?p=preview

var routerApp = angular.module("routerApp", ["ui.router"]);routerApp.config(["$stateProvider", "$urlRouterProvider",功能($stateProvider，$urlRouterProvider){$urlRouterProvider.otherwise("/template1");$stateProvider.state(模板1"，{网址:/模板1"，templateUrl: "template1.html",控制器:tmp1Controller"}).state("template2", {网址:/模板2"，templateUrl: "template2.html",控制器:tmp2Controller"});}]);routerApp.controller("mainCtrl", ["$scope",功能($范围){}]);routerApp.controller("tmp1Controller", ["$scope",功能($范围){}]);routerApp.controller("tmp2Controller", ["$scope",功能($范围){}]);

**This js file for the ui router is proper or not.The error displaying is "Error: Unknown provider: $stateProvider from routerApp"

this js files have been loaded in the Html file.

**

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

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/template1');

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('template1', {
        url: '/temp1',
        templateUrl: 'templates/template1.html'
    })

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
    .state('template2', {
        // we'll get to this in a bit       
    });

});


<!-- MAIN CONTENT -->
<div class="container">

<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>

</div>

</body>
</html>

Please help.Thanks in advance

解决方案

please see here : http://plnkr.co/edit/FYxpaHpKgvpEu6f1TZ7l?p=preview

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



routerApp.config(
  ["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise("/template1");

      $stateProvider
        .state("template1", {
          url: "/template1",
          templateUrl: "template1.html",
          controller: "tmp1Controller"
        })
        .state("template2", {
          url: "/template2",
          templateUrl: "template2.html",
          controller: "tmp2Controller"
        })



      ;

    }
  ]);

routerApp.controller("mainCtrl", ["$scope",
  function($scope) {

  }
]);
routerApp.controller("tmp1Controller", ["$scope",
  function($scope) {

  }
]);

routerApp.controller("tmp2Controller", ["$scope",
  function($scope) {

  }
]);

这篇关于Angular UI 路由器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！