1

为了改进我的应用程序目录的结构，我安装了ngBoilerplate只是为了意识到我不了解如何使用该框架从头开始创建应用程序，所以我决定手动遵循模块模式（没有 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在浏览器中打开时，页面不显示视图主页（我正在测试的唯一视图）。控制台只是这样说：

在此处输入图像描述

我已经被困了一段时间了。有什么问题？

提前致谢！

编辑

这是一个笨蛋

4

2 回答 2

0

看来你是想太多了。

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

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

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

另请参阅此工作演示。

于 2014-04-25T19:30:59.760 回答
0

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

1-通过引导

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

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

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

如果您在“view-main”中使用/加载模块，例如在使用角度 $stateProvider 时，这会更灵活

于 2015-09-04T17:11:57.847 回答