尝试使用视图模型传输对象时出错

时间:2016-07-20 09:14:44

标签: javascript angularjs routing mean-stack

每当用户使用vm(视图模型)点击“home”按钮时,我都会尝试显示用户名“bacon”,以便传输包含属性userName的对象用户,但是我收到以下错误。

  

app.js:1未捕获的SyntaxError:意外的令牌<   index.controller.js:1未捕获的SyntaxError:意外的标记<

该项目具有以下层次结构:

project hierarchy

以下是位于父文件夹 ./ app

index.html
<!DOCTYPE html>
<html>
<head>
 <title>MEAN Stack User Registration and Login Example Application</title>
</head>
<body class="container">
    <!-- header -->
    <header>
        <ul class="nav nav-tabs">
            <li ng-class="{active: activeTab === 'home'}"><a ui-sref="home">Home</a></li>

        </ul>
        <div class="flash-message" ng-if="flash">
            <div class="{{'alert alert-' + flash.type}}" ng-bind="flash.message"></div>
        </div>
    </header>

    <!-- main -->
    <main ui-view></main>

    <!-- footer -->
    <footer></footer>

    <!-- external scripts -->


    <!-- application scripts -->


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="app.js"></script>
    <script src="home/index.controller.js"></script>
    <!--<script src="app-services/user.service.js"></script>
    <script src="app-services/flash.service.js"></script>-->
    <!-- <script src="account/index.controller.js"></script>-->
</body>
</html>

以下是位于父文件夹 ./ app

app.js
 (function () {
        'use strict';

        angular
            .module('app', ['ui.router'])
            .config(config)
            .run(run);

        function config($stateProvider, $urlRouterProvider) {
            // default route
            $urlRouterProvider.otherwise("/");

            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'home/index.html',
                    controller: 'Home.IndexController',
                    controllerAs: 'vm',
                    data: { activeTab: 'home' }
                })

        }

        function run($http, $rootScope, $window) {
            // add JWT token as default auth header
            $http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;

            // update active tab on state change
            $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                $rootScope.activeTab = toState.data.activeTab;
            });
        }

        // manually bootstrap angular after the JWT token is retrieved from the server
        $(function () {
            // get JWT token from server
            $.get('/app/token', function (token) {
                window.jwtToken = token;

                angular.bootstrap(document, ['app']);
            });
        });
    })();

以下是位于 ./ app / home

文件夹中的 index.html
<h1>Hi {{vm.user.firstName}}!!</h1>

这是我的 index.controller.js ,位于 ./ app / home

文件夹中
(function () {
    'use strict';

    angular
        .module('app')
        .controller('Home.IndexController', Controller);

    function Controller() {
        var vm = this;

        vm.user = null;

        initController();

        function initController() {
            var user;
            user.firstName = "bacon";
            vm.user = user;
            // get current user
            //UserService.GetCurrent().then(function (user) {
            //    vm.user = user;
            //});
        }
    }

})();

0 个答案:

没有答案