angularJs routeProvider 问题

Question

我有下面提到的 Angular 使用配置和 routeProvider 的代码。 View1 和 View 2 也包含在内。

<!DOCTYPE html>
<html>
<head>
    <title>My test application</title>
</head>
<body ng-app="myApp">
    <div>
        <div ng-view></div>
    </div>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
min.js"></script>
    <script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
    <script>
        var myApp = angular.module('myApp', ['ngRoute']);  

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

        myApp.controller('SimpleController',SimpFunc);
        function SimpFunc($scope){
            $scope.customers = [
                {name:'Dave Smith', city:'New York'},
                {name:'Will Smith', city:'Phily'},
                {name:'Will Die', city:'Cincy'},
                {name:'Die till', city:'New Jersey'},
                {name:'Till What', city:'Cincy'}                
            ];
            $scope.addCustomer = function(){
                $scope.customers.push(
                    {
                        name: $scope.newCust.name, 
                        city: $scope.newCust.city
                    });
            };
        }
    </script>
</body>
</html>

View1.html

<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" />
<br />
<ul>
    <li ng-repeat="cust in customers | filter:filter.name">{{ cust.name 
}} - {{ cust.city }}</li>
</ul>
<br />
Customer Name:
<br />
<input type="text" ng-model="newCust.name" />
Customer City:
<br />
<input type="text" ng-model="newCust.city" />
<br />
<button ng-click="addCustomer()">Add customer</button>
<br />
<a href="#/view2">View 2</a>
</div>

查看 2

<div class="container">
<h2>View 2</h2>
City:
<br />
<input type="text" ng-model="filter.city" />
<br />
<ul>
    <li ng-repeat="cust in customers | filter:filter.city">{{ cust.name 
}} - {{ cust.city }}</li>
</ul>
</div>

我无法在页面中呈现视图 1 and/or 视图 2。我该怎么做？

Answer 1

you have some syntax error in your app.config, also you have to make ng-href instead href for example <a ng-href="#!/view2">View 2</a>, replace your codes with below codes.

also you miss define the controller in the Html

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

myApp.config(function ($routeProvider) {
    $routeProvider.when('/',
        {
            controller: 'SimpleController',
            templateUrl: 'partials/view1.html'
        })
        .when('/view2',
        {
            controller: 'SimpleController',
            templateUrl: 'partials/view2.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});
        
myApp.controller('SimpleController', function ($scope) {
    $scope.customers = [
        { name: 'Dave Smith', city: 'New York' },
        { name: 'Will Smith', city: 'Phily' },
        { name: 'Will Die', city: 'Cincy' },
        { name: 'Die till', city: 'New Jersey' },
        { name: 'Till What', city: 'Cincy' }
    ];

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

<div ng-app="myApp" ng-controller="SimpleController">
  <div ng-view></div>
</div>

Answer 2

您的脚本库 URL 出现 404 错误。

下面我用了

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js

SimpleController 后缺少逗号

 
.when('/view2',{
                    controller: 'SimpleController',

angularJs routeProvider 问题

angularJs routeProvider issue

angularjs

route-provider