Javascript ANGULARJS：忍者新手第4章_Javascript_Angularjs

Javascript ANGULARJS：忍者新手第4章

javascript angularjs

Javascript ANGULARJS：忍者新手第4章,javascript,angularjs,Javascript,Angularjs,我正在通过sitepoint ANGULARJS：忍者新手手册进行学习。我被第四章的最后一个例子困住了。在这个应用程序中，内置的angular ngRoute模块被更强大的angular UI路由器模块所取代。我似乎无法让它工作，我想知道我做错了什么。下面是索引页以及view1.html和view2.html的代码。谢谢你的帮助 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charse

我正在通过sitepoint ANGULARJS：忍者新手手册进行学习。我被第四章的最后一个例子困住了。在这个应用程序中，内置的angular 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>


第4章-附录15a-{{title}

视图1

"严格使用",；
角度.module（'myApp'[
“myApp.Controller”，
"ngRoute",，
//这是对ui.router模块的依赖关系
“ui.router”
]
);
//.run（）在加载所有模块时被调用
angular.module（'myApp'）。运行(
函数（$rootScope）{
$rootScope.title='角度路由-角度UI路由器'；
}
);
//$stateProvider和$urlRouterProvider来自ui.router模块
angular.module（'myApp'）.config(
函数（$stateProvider、$urlRouterProvider、$locationProvider）{
$stateProvider
.state（'view1'{
url:“/view1”，
控制器：'Controller1'，
templateUrl:“/partials/view1.html”
})
.state（'view2'{
url:“/view2/：firstname/：lastname”，
控制器：'Controller2'，
决心：{
名称：函数（）{
返回['Misko'、'Vojta'、'Brad']；
} 
},
templateUrl:“/partials/view2.html”
}
);
//未找到路由匹配时，重定向到/view1
$urlRouterProvider。否则（'/view1'）；
$locationProvider.html5Mode（true）；
});
angular.module（'myApp.controllers'，[]）
.controller（'Controller1'，函数（$scope、$location、$state）{
$scope.loadView2=函数（）{
//以下操作将激活状态视图2
$state.go（'view2'{
firstname:$scope.firstname，
lastname:$scope.lastname
}
);
} 
}
);
angular.module（'myApp.controllers'）
.controller（'Controller2'，函数（$scope，$stateparms，names）{
$scope.firstname=$stateParams.firstname；
$scope.lastname=$stateParams.lastname；
$scope.names=名称；
});

名字：



姓氏：



加载视图2


从视图2。

名字：{{firstname}}
姓氏：{{lastname}

我们的其他用户包括：


{{name}}

将

http

更改为

https

，它应该可以工作。相应地添加必要的视图

<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>

更新1

在

index.html

中添加了

，之前它不在那里。您有

ng视图

，该视图用于

ngRoute

而不是

ui.router

你好，Shashank，谢谢您的想法，但这似乎并不能解决问题。一切都没有改变。彼得Mingione@Did你检查了我的弹夹了吗？您在控制台.log中遇到了什么错误？分享截图。嗨，Shashank，我看了一下plunkr。它似乎也不起作用。我在那里看不到查看页面。view1.html和view2。html@PeterMingione：请检查我的答案，我提到了

。相应地添加必要的视图。

。让我补充一下，并更新答案。您可以在

控制台中查看并修复html文件的404
错误

谢谢Shashank。你是个天才。成功了。书上没有。我需要将其发送到SitePoint。