Question

我一直在从Dan Wahlin的电子书中学习AngularJS。作者试图从第53页解释模块，路由和工厂。然后，我在index.html中编写了代码：

<div class="container" data-ng-app="demoApp">
<div>
    <h3>Adding Module Configuration and Routing</h3>
    <!-- ng-view handles loading partials into it based
         upon routes -->
    <div data-ng-view=""></div>
</div>
</div>


<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', []);

demoApp.config(function ($routeProvider) {
    $routeProvider
            .when('/view1',
            {
                controller: 'SimpleController',
                templateUrl: urlBase + 'View1.html'
            })
        //Define a route that has a route parameter in it (:customerID)
            .when('/view2',
            {
                controller: 'SimpleController',
                templateUrl: urlBase + 'View2.html'
            })
            .otherwise({ redirectTo: '/View1' });
});

demoApp.controller('SimpleController', function ($scope) {
    $scope.customers = [
        { name: 'Dave Jones', city: 'Phoenix' },
        { name: 'Jamie Riley', city: 'Atlanta' },
        { name: 'Heedy Wahlin', city: 'Chandler' },
        { name: 'Thomas Winter', city: 'Seattle' }
    ];
});

$scope.addCustomer = function () {
    $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city      });
}


</script>

然后我创建了两个html页面 - View1.html和View2.html，在View1.html中，我写道：

<div class="container">

    <h3>View 1</h3>

    Name<br />
    <input type="text" data-ng-model="filter.name" />
    <br />
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name">
            {{ cust.name }} - {{ cust.city }}
        </li>
    </ul>

    <br />Customer Name<br />
    <input type="text" data-ng-model="newCustomer.name" />
    <br />

    <br />Customer City<br />
    <input type="text" data-ng-model="newCustomer.city" />
    <br />

    <button data-ng-click="addCustomer()">Add Customer</button>
    <br />
    <a href="#/view2">View 2</a>

</div>

当我浏览http://localhost/angular/index.html#/view1时，我没有看到任何意味着没有输出的东西。我实际上不明白我做错了什么。

Answer 1

这里最大的问题是你不包括routing module，这是自Angular 1.2 +以来所必需的

<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>

<script type="text/javascript">

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

//Snip...

</script>

正如goutham in the comments所述，您还需要定义urlBase，而您似乎无处可行。

因为JavaScript确实为字符串连接键入了强制，所以最终会得到“未定义”这个词。附加到templateUrl。

console.log(undefined + "view1.html"); // 'undefinedview1.html'

无法在Angularjs路线

1 个答案: