ui-router 和 Angularjs 问题答案

【问题标题】：ui-router and Angularjs issueui-router 和 Angularjs 问题
【发布时间】：2015-04-14 03:49:14
【问题描述】：

https://thinkster.io/mean-stack-tutorial/ 问题几乎来自本教程。如有必要，请参阅“角度路由”部分。这是我的 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>

这是我的 index.html 的 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-router 工作不正常，或者可能只是控制器没有连接 - 有一次我确实有角码显示而没有实际运行，但现在我'当我运行 index.html 时，我只是得到一个空白页 - 任何帮助表示赞赏，只是不确定我缺少什么来让 ui-router 爱我。我通读了文档，但是......我想它只是还没有点击。谢谢！

【问题讨论】：

标签： javascript html angularjs angular-ui-router

【解决方案1】：

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

【讨论】：

非常感谢，在您的回答和 ui-router 的文档之间，我终于让这一切完美运行！你的回答真的很有帮助。小心！！！ :D