ui-路由器和 Angularjs 问题

Question

https://thinkster.io/mean-stack-tutorial/ 问题几乎来自本教程。请参阅部分 - Angular 路由，如果需要的话。这是我的 index.html -

<html>
    <head>
        <title>My Angular App!</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="/Users/Taylor/WebstormProjects/thinkstertut/node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
    </head>

    <body ng-app="flapperNews">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <ui-view></ui-view>
            </div>
        </div>


    </body>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
</html>

那是我 HTML 的 index.html 代码。我也有我的 home.html 文件，但无论我是在 index.html 中使用脚本标记还是将其分离到它自己的文件 (home.html) 中，我都无法查看展示。这是我的 .js -

var app = angular.module('flapperNews', ['ui.router']);

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '/home.html',
                controller: 'MainCtrl'
            });
        $urlRouterProvider.otherwise('/home');
}]);

app.factory('posts', [function(){
    var o = {
        posts: []
    };
    return o;
}]);

app.controller('MainCtrl', ['$scope', 'posts',
    function($scope, posts) {
        $scope.posts = posts.posts;
        $scope.test = 'hello world';
        $scope.posts = [
            {title: 'post 1', upvotes: 4},
            {title: 'post 2', upvotes: 25},
            {title: 'post 3', upvotes: 14},
            {title: 'post 4', upvotes: 8},
            {title: 'post 5', upvotes: 5}
        ];

        $scope.addPost = function (){
            if( !$scope.title || $scope.title === '') {
                alert('must have title silly!');
                return;
            }
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: 0 });
            $scope.title = '';
            $scope.link = '';
        };

        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };
    }
]);

不确定是否...ui-路由器工作不正常，或者可能只是控制器没有连接 - 有一次我确实有 angular代码显示实际上没有运行ning，但现在当我运行 index.html 时我只是得到一个空白页 - 感谢任何帮助，只是不确定我缺少什么 [= =30=]-路由器爱我。我通读了文档但是......我想它只是没有点击。谢谢！

Answer 1

Here 是您的代码工作。你有 2 个问题，首先你在正文之外插入脚本标签，我认为这会导致解析错误，主要问题是你首先加载 angular-ui-router 库，首先加载 angularjs

ui-路由器和 Angularjs 问题

ui-router and Angularjs issue

html

javascript

angularjs

angular-ui-router