Question

我使用Angular已经有一段时间了，但是自从我上次使用它以来它发生了很大变化......我遇到了一些问题，因为我根本无法加载应用程序。

当我尝试加载单个网页时，我只获得基本HTML，但没有错误消息... [我正在使用括号中的实时预览选项加载它]

文件层次结构如下：

的index.html
bower_components
JS

- app.js

- ctrl

--- about.js

--- home.js

HTML

- home.html

- about.html

文件：

的index.html

<!DOCTYPE HTML>
<html lang="en" np-app="stagerite" ng-controller="indexCtrl">
<head>
    <!-- meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- title/icon -->
    <title>StageRite - {{ Page.title() }}</title>
    <link rel="shortcut icon" href="img/" />

    <!-- bower imports -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

    <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />

    <!-- local css -->

    <!-- local js -->
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/ctrl/index.js"></script>
    <script type="text/javascript" src="js/ctrl/home.js"></script>
    <script type="text/javascript" src="js/ctrl/about.js"></script>

    <!-- fonts -->
</head>

<body unresolved fullbleed>
    <div ng-view></div>
</body>
</html>

app.js

/*global angular, console, alert*/

(function () {
    'use strict';

    /* Initialize application. */
    var stagerite = angular.module('stagerite', [
        'ngRoute'
    ]);

    /* Set routes. */
    stagerite.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: '../html/about.html',
                controller: 'aboutCtrl'
            }).
            when('/home', {
                templateUrl: '../html/home.html',
                controller: 'homeCtrl'
            }).
            otherwise({
                templateUrl: '../html/home.html',
                controller: 'homeCtrl'
            });
    }]);

    /* Set page titles. */
    stagerite.factory('Page', function () {
        var title = 'Home';
        return {
            title: function () {
                return title;
            },
            setTitle: function (newTitle) {
                title = newTitle;
            }
        };
    });
}());

home.html的

<div ng-controller="homeCtrl">
</div>

index.js

/*global angular, console, $, alert*/
/*jslint plusplus: true*/

(function () {
    'use strict';

    var indexCtrl = angular.module('stagerite', []);

    indexCtrl.controller('indexCtrl', ['$scope', 'Page', function ($scope, Page) {
        $scope.Page = Page;
    }]);
}());

home.js

/*global angular, console, $, alert*/
/*jslint plusplus: true*/

(function () {
    'use strict';

    var homeCtrl = angular.module('stagerite', []);

    homeCtrl.controller('homeCtrl', ['$scope', 'Page', function ($scope, Page) {
        Page.setTitle('Home');
    }]);
}());

角度路由不起作用

0 个答案: