I am trying to serve a directive from a /common/ folder in my project when I have an app1 and app2 folders as siblings of /common/ that will ideally serve the same directive. With partials and services, it was easy to just include them with the correct path - but how do I use the same directive in two different apps?
I'm getting stuck where I need to declare what module the directive belongs to - but I don't want to do that because it can change based on the app (app1.directive() and app2.directive() etc.)
Okay I figured it out. Here is how it's done:
When you're building the service:
angular.module('app.directiveName').directive(...);
In the app you need to declare it in the dependencies:
['app.directiveName']
Lastly, in the app, you need to include the module in the app:
angular.module('app.directiveName', []);
Related
As mentioned in the image, Angular app1 is common module for both app2 and app3. Is it possible to inject app2 and app3 inside common module?
If it is not possible, can anyone give some idea how we can implement this?
Note: Currently i am trying to inject app2 and app3 using bower install. Is this correct?
Finally we have implemented this functionality using AngularJS Modularization.
Webpack is a module bundler, what does that mean? Well, it basically take modules with dependencies and generate static assets to represent those modules.
for more info:
http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/
I am starting to write a little library that uses angular. I want to write a directive that is not coupled to the first app that is initialized. I want to write a directive that somebody would add to their app and it would just work.
Instead of:
angular.module('realEstateApp', []);
angular.module('realEstateApp').directive(etc);
Just use:
angular.directive(etc)
If I can't do this, do you have some workaround to give me?
Angular directives need always to live within a module. What you have to do is define a module and then use it as a dependency in other modules. People will have to add Your module as a dependency to theyr module:
angular.module('myDirectiveModule', []);
angular.module('myDirectiveModule').directive(etc);
Then share your module, and people will have to do (after including your script):
angular.module('myModule', ["myDirectiveModule"]);
I'm using generator-ionic from link, and It made well, but I want to know how to add angular controllers or directives files.
It's not like app when I made with 'yo angular'
there is no views folder and files neither.
'yo angular:directive myDirective' not work.
do I have to make all files and folders by myself?
I found that the Angular Generator works fine with a project created by yo ionic. You are correct that the folder structure is different, but that may not a problem for you. You could always start with a completely blank ionic template, and then start adding the pieces you need. Your app.js and index.html files will be where the Angular Generator expects them to be.
I'd like to know if possible to separate a yeoman app by modules (like MEANJS generator) basically with the following structure:
Module 1
views
controllers
services
css
config
module1.js
Module 2
views
controllers
services
css
config
module1.js
Module 3
etc
etc
same structure
App.js
For me is more convenient to do it this way and the official angular generator doesn't support that structure
is there any way to accomplish that with an existing yeoman generator?
Maybe this generator will do the trick?
https://www.npmjs.org/package/generator-cg-angular
It follows the Angular Best Practice Guidelines for Project Structure and allows you to create submodules with their own directories.
I try to build a modular application using AngularJS. My first idea is to group each module by functionnality with this kind of folder structure :
/core
controllers.js
directives.js
app.js
/modules
/users
controllers.js
directives.js
/invoices
controllers.js
directives.js
/messages
controllers.js
directives.js
...
Notice that the "core" folder contains basics features that will always be in the app. Others modules can be add or remove independently.
As my application will be large, I also want to use lazy loading. I implemented this solution : http://ify.io/lazy-loading-in-angularjs/ which seems to me actually the easiest way. The problem is that it only does lazy loading for controllers, services, directives ... but not for AngularJS modules.
I know there is another way which permits to lazy load Angular modules (http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/) but I think it's way too hacky as it uses Angular's core methods.
My question is : does it make sense in my case to use different AngularJS modules for each of my modules, like this :
angular.module('core', ['ngRoute', 'users', 'invoices', 'messages'])
angular.module('users')
angular.module('invoices')
angular.module('messages')
What is the advantage of this approach ? Are AngularJS modules usefull - for now - only for third-party modules for Angular ?
I'm asking this since AngularJS 2.0 will support natively lazy loading. Miško Hevery from Google says "[you] should group by view since views will be lazy loaded in near future", and that we should use one module per application, see it here : https://www.youtube.com/watch?v=ZhfUv0spHCY&t=34m19s
Is it correct for a large application to just use one module for my app like this :
angular.module('core', ['ngRoute']);
And then lazy load my controllers, services and directives based on a route or a view ?
We have a similar structure (on a very large app) to the one you are proposing here, except don't have controllers,services and the like bundled up into single .js files. Instead we just separate our concerns with views, services and the like all bundled into a single module. So each meaningful component might looks like:
/my-component
- i-do-something.js
- a-view.html
- a-view-that-is-a-child.html
- a-view-ctrl.js
- index.js //the thing that creates a module and returns it
/ tests
- i-do-something-spec.js
- a-view-ctrl-spec.js
This is all bundled up into a single app module (named for our org). Then a simple boot module angular.bootstrap(['app'])s the whole thing.
We use browserify to compile all this stuff and it has worked nicely so far.