当我遵循模块模式结构时，AngularJS应用程序不显示任何视图(没有ngBoilerplate)
当我遵循模块模式结构时，AngularJS应用程序不显示任何视图(没有ngBoilerplate)
提问于 2014-04-25 16:09:36
为了改进我的应用程序目录的结构，我安装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>..with自己的模块。
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时，页面不会显示主视图(我正在测试的唯一视图)。控制台上写着这
我被困在这上面有一段时间了。有什么不对的？
感谢先进的！
编辑
这是柱塞
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-25 19:30:59
看来你想得太多了。
这是一个简单的错误：
您一直在向.config传递错误的参数。
// This is WRONG
.config('config', ['$stateProvider', function($stateProvider) {
// This is RIGHT (no String as 1st argument)
.config(['$stateProvider', function($stateProvider) {看，还有，这个工作演示。
Stack Overflow用户
发布于 2015-09-04 17:11:57
有两种使用自定义构建模块的方法：
1-通过引导
angular.bootstrap(document.getElementById("MODULE-DIV-ID"), ['MODULE-NAME']);2.对主要模块的明确定义，如：
var mainApp = angular.module('mainApp', ['ngRoute', 'ngResource', 'ui.router', 'MODULE-NAME']);如果您使用/加载模块在“视图-主”中，例如在使用角$stateProvider时，这是更灵活的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23298074
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号