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. 我想我有同样的问题，这就是解决方案。
另一种选择是分叉教程项目：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 回答