0

angular-meteor アプリのビルドを開始します urigo:angular-meteor を追加しました urigo:angular-ui-router を追加しました ルートを作成しました:

angular.module("app").config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
    function($urlRouterProvider, $stateProvider, $locationProvider){

        $locationProvider.html5Mode(true);

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'client/views/index.ng.html',
                controller: 'DropDownCtrl'
            });

        $urlRouterProvider.otherwise("/home");
    }]);

index.ng.html を作成しました:

<html>
<head>
  <title>hello</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/ej.widgets.all.min.css" rel="stylesheet" />
    <link href="../css/default.css" rel="stylesheet" />
    <link href="../css/default-responsive.css" rel="stylesheet" />
    <link href="../css/responsive-css/ej.responsive.css" rel="stylesheet" />

    <script src="../js/jsrender.min.js"></script>
    <script src="../js/jquery.globalize.min.js"></script>
    <script src="../js/jsondata.min.js"></script>
    <script src="../js/ej.web.all.min.js"></script>
    <script src="../js/jsondata.min.js"></script>
    <script src="http://cdn.syncfusion.com/12.2/js/ej.widget.angular.min.js"></script>
    <!--<script src="client/js//properties.js" type="text/javascript"></script>-->
</head>

<body ng-app="app">
    <div ng-controller="DropDownCtrl">
      <h1>Welcome to Meteor!</h1>

        <div class="row">
            <div class="cols-sample-area">
                <div class="frame" style="width: 50%; height: 27px">
                    <span>Select a section</span>
                    <div>
                        <div id="control" style="float: left; width: 45%">
                            <input id="bookSelect" ej-dropdownlist e-datasource="dataList" e-value="value" />
                            <h6><span style="font-style: italic; font-weight: normal; position: absolute; margin-top: 4px;">Note:Two Way Angular Support</span></h6>
                        </div>
                    </div>
                    <div id="binding" style="float: right; margin: auto; width: 45%">
                        <input type="text" id="dropValue" class="input ejinputtext" ng-model="value" />
                    </div>
                </div>
            </div>
        </div>
}
</div>
<style type="text/css" class="cssStyles">
    .control {
        margin-left: 20px;
    }

    .ctrllabel {
        padding-bottom: 3px;
    }

    #dropValue {
        text-indent: 10px;
    }

    #control #bookSelect_input_wrapper {
        width: 70%;
    }

    .input {
        height: 26px;
        text-indent: 10px;
        width: 67%;
    }

</style>

</body>

</html>
  <!--<div class="container">-->
      <!--<div class="row">-->
          <!--<div class="cols-sample-area">-->
              <!--<div id="Grid" ej-grid e-datasource="obj" e-selectedrowindex="selectedRow"-->
                   <!--e-allowgrouping="true" e-pagesettings-pagesize="4" e-pagesettings-currentpage="page"-->
                   <!--e-allowsorting="true" e-allowpaging="true" e-actionbegin="actionBegin">-->
                  <!--<div e-columns>-->
                      <!--<div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>-->
                      <!--<div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>-->
                      <!--<div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div>-->
                      <!--<div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="90"></div>-->
                      <!--<div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="90"></div>-->
                      <!--<div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="90"></div>-->

                  <!--</div>-->
              <!--</div>-->
          <!--</div>-->
          <!--<div id="sampleProperties">-->
              <!--<div class="prop-grid">-->
                  <!--<div class="row">-->
                      <!--<div class="col-md-3">-->
                          <!--Selected Row-->
                      <!--</div>-->
                      <!--<div class="col-md-3">-->
                          <!--<input type="text" id="selectedRow" name="name" class="e-ejinputtext" value="" ej-numerictextbox e-value="selectedRow"  e-maxvalue="3" e-minValue ="-1" e-width="100px" />-->
                      <!--</div>-->
                  <!--</div>-->
                  <!--<div class="row">-->
                      <!--<div class="col-md-3">-->
                          <!--Current Page-->
                      <!--</div>-->
                      <!--<div class="col-md-3">-->
                          <!--<input type="text" name="name" class="e-ejinputtext" value="" ej-numerictextbox e-value="page"  e-maxvalue="4" e-minValue ="1" e-width="100px" />-->
                      <!--</div>-->
                  <!--</div>-->
              <!--</div>-->
          <!--</div>-->
      <!--</div>-->
  <!--</div>-->

読み込まれると、ブラウザー コンソールにエラーは表示されませんが、ページには何も表示されません。

ページ ソースを表示すると、すべてのライブラリが読み込まれているのがわかりますが、ドキュメントの本文には何も含まれていません。

メインの angular モジュール - app.js は client/lib の下にあり、適切にロードされています。

その内容は次のとおりです。

angular.module('app',['angular-meteor','ui.router',
    'ejangular']);

index.ng.html のコンテンツをページに表示するにはどうすればよいですか?

4

2 に答える 2

1

index.ng.htmlに名前を変更してみてくださいindex.html。私は同じ問題を抱えていたと思いますが、それが解決策でした。
もう 1 つのオプションは、チュートリアル プロジェクトhttps://github.com/Urigo/meteor-angular-sociallyをフォークし、これをアプリケーションのスケルトンとして使用することです。

于 2015-06-10T10:01:07.923 に答える
0

angular-meteor を実行する最善の方法は、npm モジュールを使用することだと思います。角度更新のために Urigo に依存する必要がないという利点があります。

角度のあるパッケージを削除し、

meteor npm install --save angular
meteor npm install --save angular-meteor
meteor npm install --save angular-ui-router

これは、コントローラーの上部で使用するコードです。

'use strict';
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';

@oshai が言ったように、*.ng.html の名前も *.html に変更します

于 2016-10-02T11:23:25.150 に答える