Question

尝试改进我的app目录的结构，我安装ngBoilerplate只是为了意识到我不懂如何使用该框架从头开始创建应用程序，所以我决定只是遵循模块模式< em>手动（不含ngBoilerplate）。

在将我的应用程序迁移到模块化结构之前，我采取了以下步骤：

我创建了这个目录。

src
|--app
|   |--home
|   |  |--home.js
|   |  |--home.html
|   |--about
|   |  |--about.js
|   |  |--about.html
|   |--app.js
|--assets
|--common
|  |--ui-router.js
|  |--ui-bootstrap.js
|--styles
|  |--stylesheet.css
|  |--bootstrap.css
|--index.html

我设置了index.html

<html ng-app="app" ng-controller="appCtrl">
<head>
<title ng-bind="pageTitle"></title>    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="common/ui-router-0.2.10.min.js"></script>
<!--Bootstrap-UI-->
<script src="common/ui-bootstrap-0.10.0.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<!-- The App -->
<script src="app/app.js"></script>
<script src="app/home/home.js"></script>
</head>
<body>
<!-- The view -->
<div class="container" ui-view="main"></div>  
</body>
</html>

然后，我设置了第一个视图...

<div class="thumbnail">
<div class="caption">
    Just setting up...
<br>
<buttom class="btn btn-info btn-sm">Hello</buttom>
</div>
</div>

..有自己的模块。

angular.module('app.home', [
'ui.router',
'firebase'
])
.config('config', ['$stateProvider', function($stateProvider) { 
    $stateProvider // States configuration.
        .state('home', {
            url: '/home',
            views: {
                'main': {
                    controller: "homeController",
                    templateUrl: "app/home/home.html"
                }
            },
            data: {
                pageTitle: 'Home'
            }
    }); 
}])
.controller('homeController', ['$scope', '$firebase', function($scope, $firebase) {}]);

最后是应用程序（基本上是ngBoilerplate示例应用程序的副本）。

angular.module('app', [
'ui.router',
'ui.bootstrap',
'app.home'
])
.config('config', ['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { // If you want "delay until everything is ready" use 'resolve' on states.
    $urlRouterProvider.otherwise('home');
}])
.run( function run () {
})
.controller( 'appCtrl', function AppCtrl ( $scope, $location ) {
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if ( angular.isDefined( toState.data.pageTitle ) ) {
  $scope.pageTitle = toState.data.pageTitle;
}
});
});

当我在浏览器中打开index.html时，该页面不会显示视图 home （我正在测试的唯一视图）。控制台只是说this：

enter image description here

我已经坚持了一段时间。可能有什么不对？

先谢谢！

修改

这是a plunker

Answer 1

好像你一直在思考这个。

这是一个简单的错误：
您已将错误的参数传递给.config。

// This is WRONG
.config('config', ['$stateProvider', function($stateProvider) {

// This is RIGHT (no String as 1st argument)
.config(['$stateProvider', function($stateProvider) {

另请参阅此 working demo 。

Answer 2

有两种方法可以使用自定义构建的模块：

1-bootstrapping

angular.bootstrap(document.getElementById("MODULE-DIV-ID"), ['MODULE-NAME']);

2 - 主模块上的显式定义，如：

var mainApp = angular.module('mainApp', ['ngRoute', 'ngResource', 'ui.router', 'MODULE-NAME']);

如果你在'view-main'中使用/加载模块时更灵活，例如在使用angular $ stateProvider时

当我遵循模块模式结构（没有ngBoilerplate）时，AngularJS应用程序不显示任何视图

2 个答案: