$ routeProvider和子目錄角度應用

Question

我有下一個項目結構：

在此處輸入圖片說明

我的應用程序托管在子目錄/my-scripts/vk.plants （這意味着，當我請求此/my-scripts/vk.plants時，它將加載layout.html並返回給用戶）。

layout.html具有下一個代碼：

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>   
        <script src="/my-scripts/vk.plants/public/static/scripts/angular.js"></script>
        <script src="/my-scripts/vk.plants/public/static/scripts/angular-route.js"></script>

        <script src="/my-scripts/vk.plants/public/static/scripts/angular/app/app.js"></script>
        <!-- include controllers and services -->
    </head>

    <body>
        <h1>Angular Layout!!</h1>

        <div ng-view></div>
    </body>
</html>

app.js包含以下內容：

(function(angular) {
    'use strict';

    var app = angular.module('app', ['ngRoute']);

    app.config(function($routeProvider) {
        $routeProvider
            .when('/my-scripts/vk.plants', {
                controller: 'home.controller',
                templateUrl: '/my-scripts/vk.plants/public/static/scripts/angular/app/templates/home.html'
            });
    });
})(angular);

當我嘗試打開http://my-url/my-scripts/vk.plants我收到來自layout.html消息，但對我的templates/home.html請求未得到處理，並且此模板中的任何內容均未顯示：

在此處輸入圖片說明

我真的對角度路由感到困惑，因為順便說一句，控制台中沒有任何錯誤。 有什么解釋嗎？

我需要什么：當我打開http://my-url/my-scripts/vk.plants我想設置默認控制器，並以角度將這個URL查看為home.controller和home.html 。

Answer 1

好的。 看看您可以根據自己的路徑做什么。 （為簡單起見，我建議您將控制器名稱從“ home.controller”更改為“ homeCtrl”（注意：您仍然可以使用home.controller，但最好遵循建議的方式）。控制器...

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>   
        <script src="/my-scripts/vk.plants/public/static/scripts/angular.js"></script>
        <script src="/my-scripts/vk.plants/public/static/scripts/angular-route.js"></script>

        <script src="/my-scripts/vk.plants/public/static/scripts/angular/app/app.js"></script>


           //INCLUDE starCtrl.js (you have to create this)
           //include home.controller.js 


        <!-- include controllers and services -->
    </head>

    <body   ng-controller="startCtrl">     // initialize startCtrl here
        <h1>Angular Layout!!</h1>

        <div ng-view></div>
    </body>
</html>

startCtrl.js

app.controller('startCtrl',function(){
     $location.url('home')     //startCtrl gets initialized and it redirects you to home (it will check for defined routes
}) ;

現在，到您的app.js

(function(angular) {
    'use strict';

    var app = angular.module('app', ['ngRoute']);

    app.config(function($routeProvider) {
        $routeProvider
            .when('/home', {                 //home route found
                controller: 'home.controller',   //controller will be applied
                templateUrl: '/my-scripts/vk.plants/public/static/scripts/angular/app/templates/home.html'  // user will be redirected to this page.
            });
    });
})(angular);

我希望這會起作用。 在這里，使用startCtrl可以執行許多您現在可能不知道的事情。 但這對您有很大幫助。 請遵循此n告訴我它是否不起作用，或者控制台給您任何錯誤。

Answer 2

我已經決定要解決的問題了：

將base元素追加到layout.html ：

 <base href="/my-scripts/vk.plants/" /> <script src="public/static/scripts/angular.js"></script> <script src="public/static/scripts/angular-route.js"></script> <script src="public/static/scripts/angular/app/app.js"></script>

更改模塊配置，如下所示：

 (function(angular) { 'use strict'; var app = angular.module('app', ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/', { controller: 'home.controller', templateUrl: 'public/static/scripts/angular/app/templates/home.html' }) .when('/factor', { controller: 'factor.controller', templateUrl: 'public/static/scripts/angular/app/templates/factor.html' }); });

}）（角度）;

結果如下：

在此處輸入圖片說明

$ routeProvider和子目錄角度應用

問題描述

2 個解決方案

解決方案1
1 2014-07-26 12:11:10

解決方案2
1 2014-07-26 12:49:41

$ routeProvider和子目錄角度應用

問題描述

2 個解決方案

解決方案1 1 2014-07-26 12:11:10

解決方案2 1 2014-07-26 12:49:41

解決方案1
1 2014-07-26 12:11:10

解決方案2
1 2014-07-26 12:49:41