I'm developing a modular angular application with I defined I folder path (constant : BASE_PATH : "path/to/folder") in angular-module-1 module. I want to re-used this constant in a angular component located in another module (angular-module-2)of my application. I want to use this constant many time in my project.
module.component("relationshipSearch", {
templateUrl: BASE_PATH +'/link/to/other/folder',
witch is the best way to define this constant as a global variable visible in all the solution project
Here is my project structure:
project
|-- angular-module-1
| |-- angular-module-1.js
| |-- angular-module-1.html
|-- angular-module-2
| |-- angular-module-2.js
| |-- angular-module-2.html
I'd say that create a common module named as angular-common where you can place common stuff like common service, factory, directive, constants, etc.
Then add the constant inside angular-common(this would be completely independent and plug-able) module. like below
//assuming `angular-common` is already defined
angular.module('angular-common').constant('commmonSetting', {
'BASE_PATH': '/link/to/other/folder'
})
Next, inject this common module in app(which is main module, going to be used in ng-app/bootstrap) like below
angular.module('app', ['angular-common', 'ngRoute', ...other dependencies..])
When you wanted to use BASE_PATH just inject commmonSetting dependency in controller/component wherever you want.
app.component('myComponent', {
templateUrl: function(commmonSetting){
return commmonSetting.BASE_PATH +'/link/to/other/folder';
},
....
})
Sorry, for posting on an old thread with an accepted answer, but I wanted to say that the accepted answer is not minification safe. The minification safe way to write this is:
app.component('myComponent', {
templateUrl: function($injector){
var commmonSetting = $injector.get('namespace.CommmonSetting');
return commmonSetting.BASE_PATH +'/link/to/other/folder';
},
....
});
Perhaps a different approach might help. Instead of setting the path why not just look to a file in the same directory.
You could use require(), for example:
template: require('./template-in-same-dir.html')
Note the template not templateUrl.
Related
Fairly simple question, I can't seem to find a definitive answer. At the minute I've my module declared in one file :
var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ui.bootstrap"]);
and my controller in another :
angular.module("app").controller("mainCtrl", ["$scope", "$timeout", "dateFilter", "$http", "shareDataService", "getDataService", function ($scope, $timeout, dateFilter, $http, shareDataService, getDataService) {
Is this good structure or a waste of time and space?
Single Responsibility
Define 1 component per file.
The following example defines the app module and its dependencies, defines a controller, and defines a factory all in the same file.
Avoid this
angular
.module('app', ['ngRoute'])
.controller('SomeController', SomeController)
.factory('someFactory', someFactory);
function SomeController() { }
function someFactory() { }
The same components are now separated into their own files.
Do this
// app.module.js
angular
.module('app', ['ngRoute']);
// some.controller.js
angular
.module('app')
.controller('SomeController', SomeController);
function SomeController() { }
// someFactory.js
angular
.module('app')
.factory('someFactory', someFactory);
function someFactory() { }
https://github.com/johnpapa/angular-styleguide#style-y001
It's a good practice to keep them separate. This way, you don't end up mixing the module(s) definition and controllers / services / directives.
here you get some of the best practices in angular js -
Instead of slicing your app across horizontals that can't be broken
up, group your code into related bundles. This way if you remove a
module, your app still works.
https://github.com/angular/angular.js/wiki/Best-Practices
Having separate files for each type of component is ideal. I follow the structure in development:
app.js //where the module resides
routes.js //consists of routes
controllers/
services/
factories/
filters/
directives/
Define your module:
var app = angular.module();
Then use 'app' to declare other nested js in separate files, example:
app.directive()
However, in production, it is preferable to use task runner (eg gulp) to combine all the files and minify the final file.
I'm constantly getting this error -
https://docs.angularjs.org/error/$injector/nomod?p0=interactive-main
The project structure (with multiple people developing and all new to angularjs) looks like this -
public
|--css, font-awesome
|--js (where angular.min.js and other jquery libraries are)
|--views (where html for each pages are)
|--myHTMLcontents
|--js
index.html
The index.html has it's own data-ng-app name and it's used in the app.js file.
I have my HTML files in the views folder, and the corresponding js files are in the views folder also.
I tried to create with
angular.module('myApp').controller(....
But I guess you're supposed to only create angular.module once (which is in the app.js), but I'm still unsure how to add 'myApp' in app.js.
I tried to do this:
(function () {
angular.module('data-ng-app Name', [
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap', // Ui Bootstrap
'myApp'
])
})();
The nodejs server doesn't throw error, but nothing shows on the page (after I added 'myApp').
How do you solve this?
You need to create the module 'myApp' once and run it in app.js.
below is an example.
angular.module('myApp', []).run()
And then in your controller
angular.module('myApp.controllers', []).controller('RegisterCtrl', function () {});
First make sure your declare the myapp module file in your index before inject it into an other one :
<script src="js/myapp.js"></script>
<script src="js/my-module-injecting-myapp.js"></script>
Then two ways :
The first one is directly calling the module, by the way you did :
angular.module('myApp').controller(....
The second and what I used to do is declaring it as variable:
var myAppModule = angular.module('myApp', []);
Then to declare a controller, service , whatever, just call the variable:
myAppModule.controller("myAppController", function(){...
One last thing, I don't know if was an example but do not declare your module name with space :
angular.module('data-ng-app Name', [....
should be :
angular.module('myModuleNamewithoutSpace', [....
I have a directive that I want to use in various places.
var app1 = angular.module("App1"...);
app1.directive('ngFoo' ... );
other Webpage:
var app2 = angular.module("App2"...);
app2.directive('ngFoo' ... );
How can I add the code of the directive in a practical way in different pages?
What is there best practice?
What you are looking for is a module pattern, that creates the ability to reuse code easily. If the directive is the same for app1 and app2 i suggest to create your own module for the directive:
angular.module('myDirectiveModule', []).directive('ngFoo', ...);
Then, if you want to use the directive in app1 you include it as dependency of your app1 module:
angular.module('app1', ['myDirectiveModule']);
You can then just go ahead and use the directive in app1. The same is true, if you want to use the directive in app2:
angular.module('app2', ['myDirectiveModule']);
So the directive becomes it's own reusable module.
I'm creating my first sizable angular project, so I've opted to break out my angular application code into directories like so:
app/
calendar/
calendar.js
contacts/
contacts.js
companies/
companies.js
...
app.js
Each of these directories will include a handful of files for views (.html), directives, services, etc.
In my app.js file, I want to setup default routes that will be used maybe 80% of the time, like this:
$routeProvider
.when('/:page', {
templateUrl: function($routeParams) {
return 'app/' + $routeParams.page + '/index.html';
},
controller: 'PageController'
})
However, I want the ability to "override" that route from within my modules so I can do things like swap out the controller, do dependency injection stuff, and so on. I would like that sort of logic contained within the module itself to keep things...well...modular, so I would rather not define each module's routing logic within app.js. So for example, in my app/calendar/calendar.js file I want to say:
$routeProvider
.when('/calendar', {
templateUrl: 'app/calendar/index.html',
controller: 'CalendarIndexController',
resolve: { ... }
})
The problem is that the definition in app.js is matched against the location first, so this calendar route is never used.
To achieve this, right now I'm just including an extra file after all of my module javascript files that sets up my fallback routes last, but this seems a little clunky. Is there anyway to define the routes within app.js so that they are override-able?
You might be able to adapt this technique for dynamically loading controllers described by Dan Wahlin here http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs combined with your default routes where the parameter controls which view to load. You could pass the same page parameter to the resolve function to control which combination of view and controller to serve up?
I'm using RequireJS to load my JavaScript modules for a BackboneJS web app, but I'm running into a style issue at the moment.
I have two classes that share a LOT of code, but they both subclass different classes.
TemplateLessonView LessonView
| |
| |
EditorApp <-- these share code --> MainApp
Now to keep things DRY I'd like MainApp to extend EditorApp, but then EditorApp's dependencies are loaded and EditorApp calls some of it's base class' functions by means of this format: this.constructor.__super__.initialize.apply(this);
A solution would be to change EditorApp's dependencies when the module is loaded from MainApp's module (so I would require LessonView but pass it to EditorApp as TemplateLessonView.
Does anyone know of a way to do this, or has another suggestion to accomplish what I'm trying here?
On way to solve this is to create a module that you will import in both class definition...
something like that :
(...require stuff ...)
return {
myfct1 : function(){
},
myfct2 : function(){
}
}
and then you can import the module where you need it, and then call your common code like a library...