starting to build angular-meteor app added urigo:angular-meteor added urigo:angular-ui-router created routes:
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");
}]);
created 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>-->
When loaded, browser console shows no errors, however, absolutely nothing shows up on the page.
When viewing the page source, I see all libraries being loaded, but the document body has nothing in it.
The main angular module - app.js is located under client/lib, and is being loaded properly.
Here is its content:
angular.module('app',['angular-meteor','ui.router',
'ejangular']);
What can I ajust to have the contents of index.ng.html show up on the page?
try to rename
index.ng.html
toindex.html
. I think I had the same problem and that was the solution.Another option is to fork the tutorial project: https://github.com/Urigo/meteor-angular-socially , and use this as a skeleton for your application.