-
-
Save NguyenTungs/4a8068b7040b3f75e811cf3d872df29d to your computer and use it in GitHub Desktop.
Rendering angularjs app using ejs from node server and how to use a JS variable which is passed to ejs template for angular app.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //@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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }]); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // @ 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