Question

我找到了角度教程，超级简单，但它不起作用。当它应该改变观点时没有任何反应。这是代码：

这是主要的index.html

<!DOCTYPE html>
<html  data-ng-app="demoApp">
<head>
<title></title>

<script src="Scripts2/angular.min.js"></script>


</head>
<body >

<div >
    <div data-ng-view=""></div>
</div>

<script>

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

    demoApp.config(['$routeProvider', function ($routeProvider){
        $routeProvider
            .when('/view1',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View1.html'
                })
            .when('/view2',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View2.html'
                })
            .otherwise({ redirectTo: '/view1' });    
    }]);




    var controllers = {};
    controllers.SimpleController = function($scope){
        $scope.customers =[
            {name:'John', city:'Phoenix'},
            {name:'Jane', city:'Frisco'},
            {name:'Susan', city:'New York'}
        ];    

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



</script>

这些是2个观点：

view1.html：

<div class="container" >    
    <h1>View1</h1><br/>

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

    <ul>
        <li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'city'"> {{cust.name | uppercase}} - {{cust.city | lowercase}} </li>
    </ul>

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

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

    <br/>
    <button data-ng-click="addCustomer()" value="Create" />


    <br/>
    <a href="#/view2" >Go to View2</a>

</div>

和view2.html

<div class="container" >    
    <h1>View2</h1><br/>

    City: <input type="text" data-ng-model="city" /> 
    <br/>

    <ul>
        <li data-ng-repeat="cust in customers | filter: city | orderBy: 'city'"> {{cust.name | uppercase}} - {{cust.city | lowercase}} </li>
    </ul>

</div>

Answer 1

看来你已经找到了一个基于旧版Angular的教程。在以后的版本中，ngRoute已经分成了它自己的模块。

因此，您需要在应用中指定依赖项：

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

你需要download并在角度库之后加载脚本：

<script src="Scripts2/angular.min.js"></script>
<script src="Scripts2/angular-route.min.js"></script>

我认为这应该可以解决问题。

更新：确保您通过网络服务器运行代码，而不仅仅是静态地从计算机上的文件夹运行代码，否则您将收到“仅支持HTTP的交叉原始请求”错误。 http://plnkr.co/edit/适用于测试内容。只需选择新的 - ＆gt; AngularJS

更新2 ：链接到plunker测试：http://plnkr.co/edit/IxbB1zbo7fg9He7mJ97k?p=preview

视图或路由在Angular教程中不起作用

1 个答案: