$routeProvider 和子目录 Angular 应用程序

问题描述 投票：0回答：2

我有下一个项目结构：

enter image description here

我的应用程序托管在子目录中

/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
的请求未得到处理，并且此模板中没有显示任何内容：

enter image description here

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

我需要什么：当我打开

http://my-url/my-scripts/vk.plants
时，我想将此网址的角度设置为默认控制器和视图，如
home.controller
和
home.html
。

javascript angularjs
2个回答
1
投票

好吧。根据你的路径看看你能做什么。 （我建议您将控制器名称从“home.controller”更改为“homeCtrl”（为了简单起见） （注意：您仍然可以使用 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 你可以做很多你现在可能不知道的事情。但这会对你有很大帮助。请按照此操作，如果它不起作用或控制台给您任何错误，请告诉我。

1
投票

我已经决定接下来的问题：

  1. 将 

    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>

  2. 像这样更改模块配置：

     (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'
         });
 });
 })(angular);

这是结果：

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.