gpt4 book ai didi

AngularJS 路由与 templateUrl

转载 作者:行者123 更新时间:2023-12-04 07:18:25 28 4
gpt4 key购买 nike

我的 AngularJS 路由有问题:我没有得到任何页面反馈。没有错误或 View 切换。

我检查了模块的实现,但它以正确的方式声明。然后我搜索了诸如templateURL之类的错别字。 ,但我没有找到。我也尝试使用 ng-href而不是 href在列表中,但随后链接不再可点击。

Here is my plunker.

我的代码:

  • 创建了我的导航:
    <body ng-app="Productportfolio">

    <ul>
    <li>
    <a href="#/home">Home</a>
    </li>
    <li>
    <a href='#/privat'>Log in</a>
    </li>
    </ul>

    <ng-view></ng-view>

    <!--own js -->
    <script src="app.js"></script>
    <!--Controller -->
    <script src="ProductCtrl.js"></script>
    <!--Services -->
    <!--Direktives-->
    </body>


  • 制作了模板:
    //home.html
    <div>
    <h1> Home </h1>
    </div>

    //private.html
    <div>
    <h1> Private</h1>
    </div>
  • 声明了一个 Angular 模块:
    angular.module('Productportfolio', ['ngRoute'])
  • 将 $routeProvider 添加到我的配置中:
    angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])

    .config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider

    .when('/home', {
    templateUrl: 'home.html',
    controller: 'ProductCtrl'
    })

    .when('/private', {
    templateUrl: 'private.html',
    controller: 'ProductCtrl'
    })

    .otherwise({
    redirectTo: '/home',
    controller: 'ProductCtrl'
    });

    $locationProvider.hashPrefix('!');

    }]);
  • 最佳答案

    在您的 Plunker 中,存在一些与导入相关的问题。为方便起见,我只是删除了两个 jQuery Bootstrap .我还将您的所有模块放在一个 中app.js 文件。

    您的 中有一些错误html :

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <!--AngularJS-->
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    </head>

    <body ng-app="Productportfolio">

    <ul>
    <li>
    <a ng-href="#home">Home</a>
    </li>
    <li>
    <a ng-href="#private">Private</a>
    </li>
    </ul>

    <ng-view></ng-view>

    <!--own js -->
    <script src="app.js"></script>
    </body>

    </html>
  • 进口 Angular之前 ngRoute或任何其他模块
  • 使用ng-href='#routeName'或者,否则

  • 在您的 js :
    var myApp = angular.module('Productportfolio', ['ngRoute']);

    myApp.controller('ProductCtrl', ['$scope',function ($scope) {
    var vm = this;
    }]);

    myApp.config(['$routeProvider', function ($routeProvider) {

    $routeProvider
    .when('/home', {
    templateUrl: 'home.html',
    controller: 'ProductCtrl'
    })

    .when('/private', {
    templateUrl: 'private.html',
    controller: 'ProductCtrl'
    })

    .otherwise({
    redirectTo: '/home',
    controller: 'ProductCtrl'
    });
    }]);
  • 您只需要在应用程序模块中注入(inject)外部模块,而不是所有 Controller 、服务等

  • 请注意,为了方便起见,我还删除了您的服务,因为您没有共享它并且它很有用。

    最后但同样重要的是,如果您想使用 $locationProvider.hashPrefix('!');使用 hashbangs ,您需要添加 <base href="/" />在您的 head 末尾.

    出于某种原因,plunker 不允许我这样做,但我相信你会让它在你的版本上工作。

    Here您可以找到重现您的应用程序的工作 plunker。

    希望我对您有所帮助。

    关于AngularJS 路由与 templateUrl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40635098/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com