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/
Related
I'm developing a web app with angular-meteor (Angular1). This uses webpack as a module bundler. Ever since I started I have found it impossible to inject npm/bower modules to my app module.
I constantly get errors such as:
Error: [$injector:nomod] Module xxx is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I usually follow official docs which consist of:
Downloading the npm module
Including the scripts in my index.html
Adding the module to my app module
But this always gives the error above.
I then try different techniques such as importing the module at the top of the page using:
import exampleModule from 'angular-example-module';
and adding exampleModule to my list of modules but nothing seems to work.
I used angular without webpack before and never had this problem. Am I missing something? Is there a particular procedure I don't know about?
Found the answer in case anyone else had the same question.
You must import the module in the main javascript file like so:
import moduleVariable from '<path-to-module>';
and then include the moduleVariable in the dependencies of your application module.
my index.php is like the following :
<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
I would like to add webpack to bundle all these files and minify them
I did not find the way to do that.
I have installed npm , node and webpack
I manged to us webpack to simple files like: webpack entry.js bundle.js . but not for my angular app
Let me answer it in general and then specific to your use case.
IN GENERAL:
Webpack
is a module bundler
needs entry and output as minimum
configuration
Where do i configure/list-out all my application code?
You dont configure it but code it. Please read on...
How webpack knows what code/modules to pick up to bundle?
Webpack will look at the code configured for entry and then internally builds its module dependencies (as dependency graph).
How do you declare module dependencies?
In short: by using require("module-or-path-here") or import "module-or-path-here". Do note that the javascript (ES6 a.k.a ES2015) itself has native module support now. Here is a good article on JS modules.
What is dependency graph?
Webpack will start with the code configured for entry and then pick up its immediate dependencies. It then goes to find out the dependencies of those immediate dependencies and so on...
Once the dependency graph is complete, webpack will start processing them and bundle them into output.filename located at output.path
Fine, but i want to perform some resource (JS / CSS / SCSS / images, etc..) specific work for ex. minify js code. How to do that?
Webpack is flexible (and powerful) and allows to configure resource specific work via loaders and plugins.
IN SPECIFIC:
The modules in AngularJS (i.e. 1.x) are not same as the modules that webpack works with. As you can see, while declaring the modules in angularJS, you are defining modules with angular by calling angular.module.
One option is to make sure to bundle all your angular module definition files (i.e that consists of angular.module("module-name-here", ["depenndencies"])) first followed by the angular components that needs those modules. There are several way to do that. For ex. name all your angular modules declaration files with a common pattern and then configure webpack to pick them up first.
Minification is pretty simple to achieve with webpack. You can try one of the options pointed out in the webpack documentation.
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', []);
I have a fairly sizeable angularjs application that I will eventually migrate to Angular 2.
I want to to take whatever steps I can now to make future migration easier.
I am converting my controllers and services to typescript and organising my files in a component-oriented folder structure.
What I would really like to be able to do is use es6 style module loading.
I understand that system.js can provide the loading functionality now and I can use es6 import syntax in typescript 1.5.
My question is, how should I use the two together? Should I output es6 modules from typescript and use system.js module loading with the generated code? Or is some other step required?
Should I output es6 modules from typescript and use system.js module loading with the generated code
I would output commonjs modules and then use System.js at the moment. Note that System.js module output is going to arrive in TypeScript 1.6. See roadmap : https://github.com/Microsoft/TypeScript/wiki/Roadmap#16
I would suggest using commonjs since there are lot of node modules already written using that. The problem with using es6 modules is a large number of browsers are not going to support es6 modules for a long time.
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.