Question

我有下一个项目结构：

enter image description here

我的应用程序托管在子目录/my-scripts/vk.plants中（这意味着，当我请求此URL时 - 它加载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的请求，此模板中没有显示任何内容：

enter image description here

我对角度路由感到困惑，因为顺便说一句，控制台中没有任何错误。有没有解释？

我需要的内容：当我打开http://my-url/my-scripts/vk.plants时，我想为此网址设置默认控制器和视图，其角度为home.controller和home.html。< / p>

Answer 1

好。根据你的路径看看你能做些什么。（我建议您将控制器名称从＆＃39; home.controller＆＃39;更改为'homeCtrl＆＃39;（为简单起见）（注意：你仍然可以使用home.controller，但最好遵循建议的方式）我带着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'
        });
});

}）（有角度的）;

结果如下：

enter image description here

$ routeProvider和子目录角度应用程序

2 个答案: