Question

我正在通过网站点ANGULARJS：NOVICE到NINJA的书。我坚持第4章的最后一个例子。在这个应用程序中，内置的角度ngRoute模块被更强大的Angular UI路由器模块取代。我似乎无法让它工作，我想知道我做错了什么。下面是索引页面以及view1.html和view2.html的代码。谢谢你的帮助。

 <!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <title ng-bind="title"></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
    <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
</head>

<body>
    <h3>Chapter 4 - App 15a - {{title}}</h3>
    <ul class="menu">
        <li><a ui-sref="view1">view1</a></li>
    </ul>
    <div ng-view></div>

<script>
'use strict';

angular.module('myApp', [
                            'myApp.controllers',
                            'ngRoute',
                            //This is the dependency on ui.router module
                            'ui.router' 
                        ]
);

// .run() gets called when all the modules are loaded
angular.module('myApp').run(
    function($rootScope){
        $rootScope.title = 'Angular Routing - The Angular UI Router';
    }
);

// $stateProvider and $urlRouterProvider are from ui.router module
angular.module('myApp').config(
    function($stateProvider, $urlRouterProvider, $locationProvider){ 
        $stateProvider
            .state('view1', {
                                url: '/view1',
                                controller:'Controller1',
                                templateUrl:'/partials/view1.html'
            })
            .state('view2', {
                                url: '/view2/:firstname/:lastname',
                                controller:'Controller2',
                                resolve:{
                                            names:  function(){
                                                        return ['Misko','Vojta','Brad'];
                                                    } 
                                },
                                templateUrl: '/partials/view2.html'
                            }
            );

    // when no route match found redirect to /view1
    $urlRouterProvider.otherwise('/view1'); 

    $locationProvider.html5Mode(true);
});

angular.module('myApp.controllers', [])
    .controller('Controller1', function($scope, $location, $state) {
        $scope.loadView2 = function() {
            // the following activates state view2
            $state.go('view2', {
                                    firstname: $scope.firstname,
                                    lastname: $scope.lastname
                                }
            );
        } 
    }
);

angular.module('myApp.controllers')
    .controller('Controller2', function($scope, $stateParams, names){
        $scope.firstname=$stateParams.firstname;
        $scope.lastname=$stateParams.lastname;
        $scope.names=names;
});

</script>
</body>
</html> 

<!-- Contents of view1.html -->

    <p>
        First name: <input type="text" ng-model="firstname" style="border:1px solid black;" /> <br/>
        <br/>
        Last name: <input type="text" ng-model="lastname" style="border:1px solid black;" /> <br/>
        <br/>
        <button ng-click="loadView2()">Load View2</button>
    </p> 


<!-- Contents of view2.html -->



    <p>
        From View2.
        <ul>
            <li>First name: {{firstname}}</li>
            <li>Last name: {{lastname}}</li>
        </ul>

        Our additional users are:
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li> 
        </ul>
    </p>

Answer 1

将http更改为https，它应该有效。 Here you go。相应地添加必要的观点。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>

UPDATE1

在<div ui-view></div>中添加index.html，之前它不存在。您有ng-view表示ngRoute而不是ui.router

ANGULARJS：NOJICE到NINJA第4章

1 个答案:

UPDATE1