Community

Ajaykjain

@esteban-constante I'm not too good in js and am trying to plug in angular as frontend and use nodebb api for integrating with one of our existing applications. But angular scopes are not recognized in nodebb. Can you please suggest me some links/posts to get started with nodebb development? I'm not able to understand the flow of the application.

Ajaykjain

I'm trying to integrate angular 1.3 with NodeBB as we need are looking for options to integrate it with our angular application with some customization. However, angular controller objects are not recognized in tpl files and I'm guessing that it's looking for those objects in respective js files instead of looking at angular scopes.
I've included angular in header.tpl and tried to initialized ng-app on a div tag.

How to achieve this?

Code snippet -

<head>
	<title>{browserTitle}</title>
	<!-- BEGIN metaTags -->{function.buildMetaTag}<!-- END metaTags -->
	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
	<!-- IF bootswatchCSS --><link id="bootswatchCSS" href="{bootswatchCSS}" rel="stylesheet" media="screen"><!-- ENDIF bootswatchCSS -->
	<!-- BEGIN linkTags -->{function.buildLinkTag}<!-- END linkTags -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
	<script>
		


var RELATIVE_PATH = "{relative_path}";
	var config = JSON.parse('{{configJSON}}');
	var app = {
	template: "{template.name}",
	user: JSON.parse('{{userJSON}}')
};
	var myApp = angular.module('spicyApp1', []);

myApp.controller('SpicyController', ['$scope', function($scope) {
    $scope.spice = 'very';

    $scope.chiliSpicy = function() {
        $scope.spice = 'chili';
    };

    $scope.jalapenoSpicy = function() {
        $scope.spice = 'jalapeño';
    };
}]);
	</script>

	<script src="{relative_path}/assets/nodebb.min.js?{config.cache-buster}"></script>

	<!-- BEGIN scripts -->
	<script type="text/javascript" src="{scripts.src}"></script>
	<!-- END scripts -->

	<!-- IF useCustomJS -->
	{{customJS}}
	<!-- ENDIF useCustomJS -->
	<!-- IF useCustomCSS -->
	<style type="text/css">{{customCSS}}</style>
	<!-- ENDIF useCustomCSS -->
</head>

<body class="{bodyClass} skin-{config.bootswatchSkin}" ng-app="spicyApp1">
<div>
<div ng-controller="SpicyController">
{{SpicyController}}
</div>
</div>

Community

Ajaykjain

Posts