ui-router和Angularjs问题

Question

https://thinkster.io/mean-stack-tutorial/ Question comes from this tutorial pretty much. https://thinkster.io/mean-stack-tutorial/问题几乎来自于本教程。 See section - Angular Routing, if neccesary. 如有必要，请参见“角度布线”部分。 here's my index.html - 这是我的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>

That's my HTML code for index.html. 那是我的index.html的HTML代码。 I have my home.html file as well, but regardless if I use a script tag inside index.html or seperate it into it's own file (home.html), I'm having issues getting my view to display. 我也有我的home.html文件，但是无论我在index.html中使用脚本标签还是将其分隔到它自己的文件（home.html）中，在显示视图时都遇到了问题。 Here's my .js - 这是我的.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;
        };
    }
]);

Not sure if.... ui-router isn't working properly, or if perhaps it's simply the controller isn't linking up - at one point I did have the angular code display without actually running, but now I'm just getting a blank page when I run index.html - Any help appreciated, just not sure what piece I'm missing to get ui-router to love me. 不知道是否...。ui-router不能正常工作，或者可能仅仅是控制器未链接-有时我确实有角度代码显示而没有实际运行，但现在我只是运行index.html时显示空白页面-感谢您提供任何帮助，只是不确定要让ui-router爱我缺少什么。 I read through the docs but... I guess it's just not clicking yet. 我通读了文档，但是...我想还没有点击。 Thanks! 谢谢！

Answer 1

Here is your code working. 这是您的代码。 you have 2 issues, first you are inserting the script tags outside the body, that causes a parse error i think, and the main issue is that you are loading first the angular-ui-router library, load first angularjs 您有2个问题，首先是您将脚本标签插入体外，这会导致解析错误，我认为，主要问题是您首先加载了angular-ui-router库，首先加载了angularjs

ui-router和Angularjs问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-13 19:49:14

ui-router和Angularjs问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-13 19:49:14

解决方案1
1 已采纳 2015-04-13 19:49:14