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

カスタム ビルド モジュールを使用するには、次の 2 つの方法があります。

1-by ブートストラップ

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

2-メインモジュールの明示的な定義、次のように:

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

これは、角度のある $stateProvider を使用している場合など、「view-main」内でモジュールを使用/ロードしている場合により柔軟です

于 2015-09-04T17:11:57.847 に答える
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 に答える