Skip to content

Instantly share code, notes, and snippets.

@DanisHack

DanisHack/app.js

Last active August 16, 2023 10:40
Show Gist options
  • Save DanisHack/8913490 to your computer and use it in GitHub Desktop.
Save DanisHack/8913490 to your computer and use it in GitHub Desktop.
Download ZIP
Rendering angularjs app using ejs from node server and how to use a JS variable which is passed to ejs template for angular app.
Raw
app.js
//@server in express js file
var data = {};
data.title = "My First APP";
data.arr=[{x:1, y:1}, {x:2, y:2}, {x:3, y:4}];
res.render('/ejsFile', data);
Raw
controller.js
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/setup");
$stateProvider
.state('index', {
url: "/index",
templateUrl: "/html/index.html",
controller: function($scope, $http){
$scope.dataArr = $scope.$parent.arr;
$scope.title = $scope.$parent.title;
}
})
});
app.controller('MainCtrl',['$scope', '$http', '$state', function($scope, $http, $state){
$scope.arr = window.arr;
$scope.title = window.title;
}]);
Raw
ejsFile.ejs
<!DOCTYPE>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- CSS file -->
<link href="../stylesheets/style.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body class='container'>
<div class="span12" id="rightPanel" ng-controller="MainCtrl">
<script>title="<%=title%>";arr="<%-JSON>stringify(arr)%>";</script>
<div ui-view></div>
</div>
<!--jquery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<!-- UI-Router -->
<script src="../libs/AngularUIrouter/angular-ui-router-release.min.js"></script>
<!-- Controller -->
<script src="../javascripts/controller.js"></script>
</body>
</html>
Raw
index.html
// @ angular app in ng-view (ui router)---index route
<div>
<span>{{title}}</span>
<div ng-repeat="elem in dataArr track by $index">x:{{elem.x}}, y:{{elem.y}}</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment