gpt4 book ai didi

javascript - 路由和多 View 不显示在 AngularJS 中?

转载 作者:行者123 更新时间:2023-12-03 11:46:19 24 4
gpt4 key购买 nike

嗨,我尝试在我的 anguar js 代码中显示路由和多个 View ,但没有显示,你可以帮我看看问题是什么以及如何解决它。请帮助我。

我的代码是这样

HTML 文件索引.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<title>New Page Angular</title>
<script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>

<div ng-view></div>

</body>
</html>

App.js 代码

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


phonecatApp.config(['$routeProvider',

function($routeProvider){

$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phone'
});
}

]);

Controller .js代码

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

phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){

$http.get('phones.json').success(function(data){
$scope.computers = data;
});

}]);


phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){

$scope.phoneId = $routeParams.phoneId;

}]);

<强> To complete code is here Plunker

最佳答案

你错过了 在你的index.html中,你有几个拼写错误phones而不是phone ...

请在此处查看固定版本 http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview

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


phonecatApp.config(['$routeProvider','$locationProvider',

function($routeProvider,$locationProvider){

$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'phoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'phoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}

]);

phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){

$http.get('phones.json').success(function(data){
$scope.computers = data;
});

}]);


phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){


$scope.phoneId = $routeParams.phoneId;

}]);

关于javascript - 路由和多 View 不显示在 AngularJS 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26032137/

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