Question

我正在开发codeigniter和angualrJs的网站。

我尝试使用$state路由方法从codeigniter的controller-action加载 ui-view 中的视图。但我没有得到任何回应。需要使用http get方法。

以下是我的代码。 app.js

 (function () {
    "use strict";
    var app = angular.module("autoQuote",["common.services","ui.router"]);

    app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("step1", {
              url : "/",
              templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
            })

            .state("step2", {
              url : "/",
              templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
            })
    }
    );
}());

common.services.js

(function () {
    "use strict";

    angular
        .module("common.services",
                ["ngResource"])
}());

autoQuoteCtrl.js

(function(){
     "use strict";
     angular
     .model("autoQuote")
     .controller("prepareDTO","prepareDTO");

     function prepareDTO()
     {
         var vm = this;
         vm.postAutoQuoteObj = [];
     }

 });

HTML

    <script src="<?php echo $assetName; ?>/js/jquery-3.0.0.min.js"></script>
    <script src="<?php echo $assetName; ?>/js/angular.js"></script>
    <script src="<?php echo $assetName; ?>/js/angular-resource.js"></script>
    <script src="<?php echo $assetName; ?>/js/angular-mocks.js"></script>
    <script src="<?php echo $assetName; ?>/js/angular-ui-router.js"></script>
    <script src="<?php echo $assetName; ?>/js/bootstrap.js"></script>

    <!-- Application Script -->
    <script src="<?php echo $assetName; ?>/app/app.js"></script>

    <!-- services -->
    <script src="common/services/common.services.js"></script>

    <!-- Controllers -->
    <script src="<?php echo $assetName; ?>/app/ctrl/autoQuoteCtrl.js"></script>
</head>
<body ng-app="autoQuote">
<div ui-view></div>
</body>

如果我在这里错过了什么，请建议我。

Answer 1

我注意到在注入函数时有$ urlRouterProvider有额外的“e”

app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state("step1", {
          url : "/",
          templateURL : "http://dev.angauto.insurance.com/rc1/renderstep/step1"
        })

        .state("step2", {
          url : "/",
          templateURL : "http://dev.angauto.insurance.com/rc1/renderstep/step2"
        })
}
);

}（））;

Answer 2

有a working plunker

你几乎就在那里..只是UI-Router将vies放入名为 ui-view 的目标中，而不是 ng-view

//<div ng-view></div>
<div ui-view></div>

而且，要使用IoC数组，我们需要的数组甚至会封装函数（在函数之前检查已移除的]符号）

//app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){

app.config(["$stateProvider","$urlRouterProvider", function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state("step1", {
          url : "/",
          //templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
          templateUrl: "tpl.html"
        })

        .state("step2", {
          url : "/step2",
          //templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
          templateUrl: "tpl.html"
        })
}]

检查here

有another example

使用 templateUrl （而不是模板）但不使用 templateURL

    $stateProvider
        .state("step1", {
          url : "/",
          //templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
          templateUrl : "rc1/renderstep/step1.php"

        })

        .state("step2", {
          url : "/step2",
          //templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
          templateUrl : "rc1/renderstep/step2.html"
        })

Angular js：如何在ng-view中加载服务器响应

2 个答案: