Angular templating with Dustjs - javascript

I'm a beginner in the AngularJS environmnent. In the interest of my company, I would like to combine the power of the Angular framework with the Dustjs templating engine.
The problem is : Dustsjs is compiling files to .js files (I have a Grunt task which is doing that for me in my public folder), not in .html. And, in the documentation of $routeProvider, the 'templateUrl' or 'template' parameters are looking for .html templates.
My app.js :
var app = angular.module('myApp', []);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
template: 'views/myView.js',
controller: 'HomeController'
});
}]);
As you can imagine, I have a weird result since my .js is injected without being parsed.
http://i.stack.imgur.com/5JkRx.jpg
So, my two questions are :
- Am I doing it right to put the .js file path inside the template of routeProvider, or is there another way to get and correctly display the view? In short, what did I do wrong?
- Are there any best practices for combining these two technologies?

Am I doing it right to put the .js file path inside the template of routeProvider, or is there another way to get and correctly display
the view? In short, what did I do wrong?
No you are not right in putting the .js file path. Angular expects it to a HTML markup.
template: '<div>content</div>',
and
templateUrl : 'views/myview.html'
would be acceptable values.
Are there any best practices for combining these two technologies?
One of the ways to go would be to use dust templates as the outer template and let angular routeProvider take care of rendering the dynamic content to be parsed by angular. For example,
home.dust
<html>
<head>
<title>{page_title}</title>
</head>
<body ng-app="myApp">
{>header/}
<div ng-view></div>
{>footer/}
</body>
</html>
header.dust
<div id="menu">Menu</div>
footer.dust
<div id="copyright">Footer</div>
view/myView.html
<div id="content">Hi ((username))</div>
app.js
var app = angular.module('myApp', []);
app.config(['$routeProvider', '$interpolateProvider', function ($routeProvider, $interpolateProvider) {
//This is required as dust templates also '{' and '}' for interpolation
$interpolateProvider.startSymbol('((').endSymbol('))');
$routeProvider.when('/', {
templateUrl: 'views/myView.html',
controller: 'HomeController'
});
}])
.controller('HomeController', function($scope){
$scope.username = "John Doe";
});

Related

Multiple directives asking for template on

Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on:
(On console)
Inside index.html
<script src="js/dashboard/dashboard.module.js"></script>
<script src="js/dashboard/dashboard.component.js"></script>
<script src="js/dashboard/statbox.component.js"></script>
Inside dashboard.module.js
var dashboardModule = angular.module('dashboard', ['ngRoute']);
Inside dashboard.component.js
angular.module('dashboard').component('dashboard', {
templateUrl: 'templates/dashboard/dashboard.template.html',
controller: ['$scope', '$routeParams', '$http', '$rootScope', '$log', function DashboardController($scope, $routeParams, $http, $rootScope, $log) {
...stuff NOT REFERENCING STATBOX by any means...
}]
});
Inside statbox.component.js
angular.module('dashboard').component('statbox', {
templateUrl: 'templates/dashboard/statbox.template.html',
controller: ['$http', '$rootScope', '$log', function StatboxController($http, $rootScope, $log) {
... some random get request ...
}]
});
And inside app.js
var app = angular.module('buttonMasher', ['ngRoute', 'dashboard', ...]);
Inside dashboard.template.html
... stuff ...
<div id="history">
... stuff ...
<p><b>Statbox</b></p>
<statbox></statbox>
</div>
Inside statbox.template.html
<div id="statbox">
<p>{{$ctrl.statboxText}}</p>
What am I doing wrong and why do I get this multiple directives error?
Whenever I comment out <script src="js/dashboard/statbox.component.js"></script>
from the index.html everything works but statbox controller is not getting loaded.
(Full project is here: Github: carloworks/masher - One can clone and run spring with profile "dev" enabled.)
Error: [$compile:multidir] Multiple directives [statbox, statbox]
asking for template on
Most likely it's because you included the .js twice in your index.html and the compiler at the time of binding the directive doesn't know which template to choose.
you should check:
the compiled html page to see if you included twice statbox.js
make sure you don't have multiple spots in your code where you
define the same .component('statbox',{})
Late to the party here but in my case it happened because I stupidly named the directive the same thing as the variable that was being passed into it so when the directive was being used it was trying to recursively include itself!
I had this issue with Typescript. I renamed some ts files and visual studio (2015) kept the old generated js files. Somehow, angular used both new and old js files, and I ended up with this error. I did a clean (which deletes all generated js files), build and it worked!

AngularJS 1.5 Controllers in Separate Files

I have a hard time understanding this. I'm attempting to put controllers in separate files so that they only deal with 1 thing, ideally, a partial view
My folder structure is like this...
My app.js file is like this.
angular.module('mikevarela', ['ui.router', 'mikevarela.controller.home', 'mikevarela.controller.about', 'mikevarela.controller.audio'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '../partials/home.partial.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: '../partials/about.partial.html',
controller: 'AboutController'
})
.state('audio', {
url: '/audio',
templateUrl: '../partials/audio.partial.html',
controller: 'AudioController'
});
});
and my controllers each have a module like this...
angular.module('mikevarela.controller.home', [])
.controller('HomeController', ['$scope', function($scope) {
$scope.title = 'Mike Varela Home Page';
}]);
My issues comes with the intial app declaration. I don't want to have to inject all the controllers in the main array app definition, that would be cumbersome and long winded. Isn't there a way to define the controller at the controller file. Kind of like this
angular.module('mikevarela', []).controller('HomeController', ['$scope', function($scope) {
// stuff here
}]);
Use angular.module('mikevarela').controller..... in subsequent files.
angular.module('mikevarela',[]).controller.....
is equivalent to redefining your app. The second param is requires array.
Quoting official angular.module docs
requires
(optional)
!Array.=
If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.
About your Controllers...
I think you're loading the controllers incorrectly.
You don't need to declare controllers as a dependency. Rather stating module.controller('yourController)` makes that controller available throughout the module.
If your controllers are in separate files, all you need to do to make it available is load it in with a script tag. e.g.
<script src="app.js"></script>
<script src="controller1.js"></script>
<script src="controller2.js"></script>
About your Application Structure...
This is not related to your question, but just coming from someone who's developed using Angular, I'd recommend not grouping your application by controllers/ by rather by feature. See: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

AngularJS ngRoute - Rendering template along with Angular Controller the $routeProvider is pointing

I'm rendering template using ngRoute - $routeProvider and I'm trying to render respective controller along with the template. $routeProvider is pointing to that controller and so it gives me an error controller is undefined because I think the App is trying to call the controller before it receives the template.
The templateCtr definition is in the separate JS file.
app.js
...
$routeProvider
.when('/template', {
templateUrl: '/template.html',
controller: 'templateCtr'
})
;
template.html
...
<script src="templateCtr.js"></script>
templateCtr.js
var myApp = angular.module('myApp'); //Getting module reference
myApp.controller('templateCtr', ['$scope', function($scope){
...
}]);
I also came across resolve property using which can load data to be used in controller before view is generated but for that too controller has to present in the memory.
Someone please point me to the correct direction. Thanks!

Angular: [$injector:modulerr] Failed to instantiate module

I've been trying to set up basic AngularJS functionality for a project but have been hitting a brick wall when it comes to including angular-route. Both are version 1.4.8. I'm currently using gulp-require to concatenate my JS, here's my main javascript file
// =require ../components/jquery/dist/jquery.min.js
// =require ../components/angular/angular.js
// =require ../components/angular-route/angular-route.js
$(document).ready(function() {
// =require app/app.js
}); // Doc ready is done!
And my app.js file
var app = angular.module('myApp', ['ngRoute']);
app.controller("ctrl", ["$scope", 'ngRoute', function($scope) {
$scope.test = "It works!";
}]);
I've checked and all the files are concatenating properly. The ng-app and ng-controller attributes are on my HTML file. I've tried adding and removing the ngRoute injection and switching the order of the files but to no avail. It's frustrating since I used Angular 1.4.5 in almost the exact same way without these issues popping up but I can't replicate the same here even when going back. But the {{test}} variable in my HTML is still not rendering, and basic operations like {{2 + 3}} aren't either.
EDIT: here is the link to the original error message I'm currently receiving: http://tinyurl.com/zx3k85f
EDIT 2: The parts of my HTML code that's calling the app and the controller:
<html lang="en" ng-app="myApp">
<body ng-controller="ctrl">
</body>
</html>
I'm using nunjucks for HTML dynamic generation, although I've changed the syntax for this so it doesn't conflict with Angular's double curly braces.
You can't inject module as dependency inside controller, you should remove 'ngRoute' from the controller DI inline array.
app.controller("ctrl", ["$scope", , function($scope) {
Update
Basically the real problem is you are loading your angular component script using requirejs(lazily), so while you are having ng-app="myApp" with module name start looking for myApp module, and the module has not loaded therefore it throws an error .
So I'd recommend you to don't use ng-app directive to start angular on page load. Instead you should wait until all the scripts related to angular loaded, & then to bootstrap angular app lazily using angular.bootstrap method.
Code
$(document).ready(function() {
requirejs(["app/app.js"], function(util) {
angular.bootstrap(document, ['myApp']);
});
});
ngRoute is a provider that needs to be configured in the module config section before being used. Using it within a controller does not make any sense. Here the version that will work:
angular.module('myApp', ['ngRoute']);
angular.module('myApp').controller("ctrl", ["$scope",function($scope) {
$scope.test = "It works!";
}]);
Moreover, you need to call your module using directive ng-app=myapp in the html element where you plan to render your app.

How to separate controllers in different files for angularjs?

I have a globale routes controller and want to create an additional controller for each page template.
It's done as follows:
var app = angular.module('myapp', ['ngSanitize', 'ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when("/test", {
templateUrl: "./templates/test.html",
controller: "testController"
})
});
app.controller('test', function() {
//...
});
Question: how can I move the controller to it's own testController.js file? I tried it, but then the controller does not work anymore.
Which steps do I have to take if I extract the controller in its own file?
How can I get access to var app module variable from within testController.js?
Do I necessairly have to include each controller as new <script src="js/testController.js"></script> tag entry in my html templates? That would be cumbersome, as I want to split my application into many controllers, and that would result in many many imports.
You can access app by simply declaring it without dependencies:
var app = angular.module('myapp');
app.controller("testController", function() {
});
And yes, you need to include testController.js on every page that needs it.

Categories