Fatal编程技术网
  • javascript/
  • Javascript Angular JS:未调用路由提供程序控制器方法？

Javascript Angular JS:未调用路由提供程序控制器方法？

javascript angularjs

Javascript Angular JS:未调用路由提供程序控制器方法？,javascript,angularjs,Javascript,Angularjs,我刚刚开始学习Angular，当我尝试使用Route provider时： var App1 = angular.module('App1',['ngRoute']); App1.config(function($routeProvider){ //alert("pre-config"); $routeProvider. when('/', { template: '<h1>main page</h1>',

我刚刚开始学习Angular，当我尝试使用Route provider时：

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

App1.config(function($routeProvider){
    //alert("pre-config");
    $routeProvider.
        when('/', {
            template: '<h1>main page</h1>',
            controller: 'heroCtrl'
        }).
        when('/:heroName', {
            template: '<h1>Hello!</h1>',
            controller: 'detailCtrl'
        }).otherwise({
            redirectTo: '/'
        });
    //alert("post-config");
});

App1.controller('heroCtrl',function($scope){
    $scope.heroes = [
     {"name":"Yan Xu", "Role":"Ranger", "Metamorphosis":"Ancient Dragon","desc":"Main Hero"},
     {"name":"Sandria Dettorox", "Role":"Mage", "Metamorphosis":"Diviner","desc":"Main Heroine"},
     {"name":"Schneider Lain", "Role":"Necromancer","Metamorphosis":"None","desc":"Main Villain"}
    ];

    $scope.sortField = 'name';
});

App1.controller('detailCtrl',function($scope, $routeParams){
    console.log("called");
    console.log($routeParams);
});

var-App1=angular.module（'App1'，['ngRoute']）；
App1.config（函数（$routeProvider）{
//警报（“预配置”）；
$routeProvider。
当（“/”{
模板：'主页'，
控制器：“heroCtrl”
}).
当（“/：heroName”{
模板：“你好！”，
控制器：“detailCtrl”
}).否则({
重定向到：'/'
});
//警报（“后配置”）；
});
App1.控制器（'heroCtrl'，函数（$scope）{
$scope.heros=[
{“名字”：“严旭”，“角色”：“游侠”，“变形”：“古代龙”，“描述”：“主要英雄”}，
{“姓名”：“桑德里亚·德托罗斯”，“角色”：“法师”，“变形”：“占卜师”，“描述”：“主要女主角”}，
{“姓名”：“施耐德·莱恩”，“角色”：“亡灵巫师”，“变形术”：“无”，“描述”：“主要反派”}
];
$scope.sortField='name'；
});
App1.控制器（'detailCtrl'，函数（$scope，$routeParams）{
控制台日志（“调用”）；
控制台日志（$routeParams）；
});
我用第一个正常工作的控制器实现了一些列表排序。 然而，当我试图从index.html#/heroName访问路由时，它没有显示模板，没有发出警报，也没有在控制台中记录信息。有人能告诉我这里有什么问题吗？我的角度版本是1.4.7

编辑： HTML代码：

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></</script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body ng-view>
    <h1>Angular Test</h1>

    <div id="Module1" ng-app="App1" class="col-sm-12">
        <form action="">
            <div ng-controller="heroCtrl">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Role</th>
                            <th>Metamorphosis</th>
                            <th>Character</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="hero in heroes | filter:filter | orderBy:sortField">
                            <td>{{hero.name}}</td>
                            <td>{{hero.Role}}</td>
                            <td>{{hero.Metamorphosis}}</td>
                            <td>{{hero.desc}}</td>
                        </tr>

                    </tbody>
                </table>
                <input name="filter" ng-model="filter"></input><br/>
                <a class="btn" ng-click="sortField='name'">Sort By Name</a>
                <a class="btn" ng-click="sortField='Metamorphosis'">Sort By Morph</a>
                <p>Current sort field: {{sortField}}</p>
            </div>
        </form>

    </div>


    <div id="Module2">


    </div>
    <script src="Angular/frontPage.js"></script>
</body>
</html>


在此处插入标题

可能是错误的，因为主页不在描述中，但我猜在主页中，您缺少
ng view
指令

因此模板不能被注入。你应该有这样的东西：


<body ng-view></body>



你能说出“当我试图从index.htm#/heroName访问路由时”是什么意思吗？您尝试从浏览器地址栏向地址？@MichaelP.Bazos添加准确的字符串
#/heroName
，是的，我就是这么做的。我在浏览器地址栏中键入：index.html#/heroNametry index.html/#/heroName@curiousgeek我试过了，但它会导致“找不到页面”错误。@Griffith我认为这与此无关。html只是一个显示heroCtrl中数据的表。谢谢，原来它缺少ng视图。：）看到编辑，您应该删除
ng视图
下的所有内容。无论如何，它都会被路由器取代。谢谢，刚刚换了。

<body>
    <div ng-view></div>
    ...
</body>