无法使用Angular Routing重定向页面

时间:2017-04-02 07:25:30

标签: javascript angularjs angular-routing

我正在尝试学习Angular,但坚持使用路由问题。我试过看其他问题但找不到答案。

这是我的索引页

<?php
$e='<a class="ui small interactive circular label" style="background-color:#4bbedd;vertical-align:middle;" data-reactid=".0.1.1.1.3.0.0.1.1.1.1.0.$Aquatic Blue">';
echo $var=  explode(":",explode(";",$e)[0])[1];

路由问题是每当我点击view2链接时,它都不会路由到View2.html页面。我该如何解决?

View1页面

 <!DOCTYPE html>
 <html data-ng-app = 'myFirstApp'>
 <head>
      <title>View</title>
 </head>

 <body>
 <div>
     <div ng-view></div>
 </div>
 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/angular-route.min.js"></script>

 <script>
     var demoApp = angular.module('myFirstApp', ['ngRoute']);

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

     demoApp.controller('SimpleController', function($scope){
        $scope.customers = [
            {name:'A F', city:'M'},
            {name:'D D', city:'B'},
            {name:'S J', city:'I'}
        ];
        $scope.addCustomer = function(){
            $scope.cutomers.push(
                {
                    name: $scope.newCustomer.name,
                    city: $scope.newCustomer.city
                }
            );
        };
     });
 </script>
 </body>
 </html>

并查看2页

<div class="container">
    <h2>View 1</h2>
    Name:
    <br>
    <input type="text" data-ng-model="filter.name">
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">
            {{ cust.name }} - {{ cust.city }}
        </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()">Add Cutomer</button>
    <br>
    <a href="#/view2.html">View 2</a>
</div>

请检查图像一次。

页面的正常视图:https://s15.postimg.org/3jrg76nsb/image.png

点击view2后:https://s7.postimg.org/7xazbqqij/image.png

2 个答案:

答案 0 :(得分:2)

view1.html中的view2应该是路径的名称

 <a href="#/view2">View 2</a>

<强> DEMO

答案 1 :(得分:1)

href更新为路线名称

<a href="#/view2">View 2</a>