个人中心
gpt4 book ai didi

javascript - Angular 路由(教程)不工作

转载 作者：行者123 更新时间：2023-11-30 17:41:28 26 4
gpt4 key购买 nike

我正在关注谷歌的 Angular 教程日志(我需要的东西有不同的名称)，但我无法让路由在我的生活中正常工作。如果我从 hrefs 中取出 #，我会得到一个“无法获取”错误。有了 #，URL 会改变但什么也不会发生。

Controller .js

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

AppControllers.controller('homeCtrl', ['$scope', '$http',
    function($scope, $http){
  $http.get('javascripts/apprentices.json').success(function(data){
        $scope.apprentices = data;

  });
  $scope.orderProp = 'semester';
}]);

AppControllers.controller('apprenticeCtrl',['$scope', '$routeParams',
    function($scope, $routeParams) {
console.dir('hi');
      $http.get('javascripts/person.json').success(function(data) {
        // $scope.apprentices = data;
      });
    }]);

应用程序.js

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

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/apprentices', {
        templateUrl: 'views/apprentice.html',
        controller: 'apprenticeCtrl'
      }).
      otherwise({
        templateUrl:'../views/home/index.html',
                redirectTo: '/asfsfsf'
      });
  }]);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="javascripts/angular/angular.js"></script>
    <script src="javascripts/angular/angular-route.js"></script>
    <script src="javascripts/app.js"></script>
    <script src="javascripts/controllers.js"></script>
    <body>
      <div ng-app="App">
        <div ng-controller="homeCtrl">
          code
      </div>
      <div ng-view></div>
    </body>
  </head>
</html>

最佳答案

看起来您只需要将 ng-app 标签移至 body 元素即可。应用程序的范围在 ng-app 元素中定义，而不是它的兄弟元素:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="javascripts/angular/angular.js"></script>
    <script src="javascripts/angular/angular-route.js"></script>
    <script src="javascripts/app.js"></script>
    <script src="javascripts/controllers.js"></script>
    <body ng-app="App">
      <div>
        <div ng-controller="homeCtrl">
          code
      </div>
      <div ng-view></div>
    </body>
  </head>
</html>

如果需要，另一种选择是将 ng-view div 放在 ng-app div 中。

关于javascript - Angular 路由(教程)不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21009080/

26 4 0
文章推荐： c# - 在运行时更改 OwinContext dbContext
文章推荐： 涉及管道的c并行进程
文章推荐： c# - 列表框中部分可见的项目不会触发绑定(bind)命令
文章推荐： c - 在不更改堆栈的情况下获得 5 个最高值和 5 个最低值的更短方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com