Question

开始构建角度流星应用程序添加了urigo：角度流星添加了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>-->

加载后，浏览器控制台不显示任何错误，但页面上绝对没有显示任何错误。

查看页面源时，我看到所有库都已加载，但文档正文中没有任何内容。

主角度模块 - app.js位于client / lib下，正在正确加载。

以下是其内容：

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

我有什么可以让index.ng.html的内容显示在页面上？

Answer 1

尝试将index.ng.html重命名为index.html。我想我遇到了同样的问题，这就是解决方案另一个选择是分叉教程项目：https://github.com/Urigo/meteor-angular-socially，并将其用作应用程序的框架。

Answer 2

我认为角度流星的最佳方法是使用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

如何正确配置angular-meteor以使内容显示在页面上

2 个答案: