I m trying to understand the sample AngularJS app shipped with Packpub's book. the app.js file is defined under client/src/app folder and it's module definition looks like
angular.module('app', [
'ngRoute',
'projectsinfo',
'dashboard',
'projects',
'admin',
'services.breadcrumbs',
'services.i18nNotifications',
'services.httpRequestTracker',
'security',
'directives.crud',
'templates.app',
'templates.common']);
My question is how AngularJs will find these modules and uses in app?
All those modules need to be loaded in your browser as well. AngularJS does not provide a module loader such as RequireJS.
You can either add <script> tags in the index file or concatenate all your sources into one big file. Some of the modules can be from AngularJS (such as the ngRoute). These will always be available in Angular, you do not need to load the sources in separately.
Related
I am building an angular app with multiple modules. Each module is a view component (rather than having one giant module with all the view components) as recommended by John Papa's Angular style guide. However, whereas previously I could just do...
angular.module('app').config( <config for all client routes and their controllers> )
I've realized that I can't do this since controllers are on separate modules now. So, I've split off the $routeProvider login into their respective files:
angular.module('app.<modulename>').config( <config for app.modulename routes and its controllers> );
However, when I navigate to any route not defined on my app module, I see an empty page, so it seems the $routeProvider for other modules doesn't seem to be working. How do I make multiple modules share the ng-view?
In order for your modules to be configured, you need to include them in the main application module via the dependency array. For example, say you have the following modules...
angular.module('app.module1', ['ngRoute'])
.config(function($routeProvider) { ... })
angular.module('app.module2', ['ngRoute'])
.config(function($routeProvider) { ... })
You configure and include them via
angular.module('app', ['app.module1', 'app.module2'])
I read this article about best practices for AngularJS project structure:
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
Under the title "App Folder" he explains shortly the difference between the files app.module.js and app.route.js but I didn't understand.
Can anyone give me an example with a short pseudo code for both of the files?
Any help will be profoundly appreciated!
Under this structure, app.module.js would be used to create the main module for your application (eg. App), configure services that you are using throughout your application, or for running arbitrary code once the module has loaded all of its dependencies and configured any services it may wish to configure.
app.route.js would be for specifically configuring one service: the router that you are using to handle state in your application. It could create its own module or re-use the one from app.module.js, but if it were to use a custom module, it would have to depend on your choice of router directly. In addition, you would have to add it as a dependency for the main app.module.js eg.
angular.module('App', ['App.Routes']);
angular.module('App.Routes', ['RouterModule']);
Example using just one module named App, which also depends on some other arbitrary module SomeModule and the routing module RouterModule:
app.module.js
angular.module('App', ['SomeModule', 'RouterModule'])
.config(function (SomeServiceProvider, SomeOtherServiceProvider) {
// Configure SomeServiceProvider/SomeOtherServiceProvider.
})
.run(function () {
console.log('Done loading dependencies and configuring module!');
});
app.route.js
angular.module('App')
.config(function (YourRouterProvider) {
// Configure YourRouterProvider to define the states for the application.
});
Angular Modules:
https://docs.angularjs.org/api/ng/function/angular.module
Routing in Angular using ngRouter:
https://docs.angularjs.org/api/ngRoute
I am using Angular UI router. I have many template calls like this:
var access = {
name: 'access',
templateUrl: 'app/access/partials/a1.html',
};
The page served by Access depends on the :content.
Is there a way that I could combine all these HTML files into one and pre-load the files so every action didn't involve another request? I realized I can put my HTML directly inside the template but can I combine the HTML from multiple templates into one file and have it all pre-loaded so it's ready when needed?
Is there a way that I could combine all these HTML files into one and pre-load the files so every action didn't involve another request?
Yes, by using html2js;
or, to be exact, a grunt/gulp plugin called, respectively, grunt-html2js / gulp-html2js
HOW IT WORKS
According to this grunt-html2js tutorial:
" html2js is a plugin (...) that parses all template files in your application and creates a javascript file that populates the $templateCache.
This is very useful trick to reduce the number of request your app needs to make to start the application.
It can also minify the html snippets saving some bandwitdh as well."
----------
According to the grunt-html2s Github repository:
"html2js converts a group of templates to JavaScript and assembles them into an Angular module that primes the cache directly when the module is loaded.
You can concatenate this module with your main application code so that Angular does not need to make any additional server requests to initialize the application."
----------
And according to me :)
What I like about html2js is that you don't need to change any of your angular code, but just configure gruntfile.js / gulpfile.js.
Your templateUrl files will then automagically be available in $templateCache.
So it does exactly what you wished for:
Combine all your templates into a module;
Write the JavaScript source for the module;
All you need to do is to specify the module as a dependency in your code.
Once the module is loaded, all your templates are available in the cache: no request needed!
EXAMPLES OF GRUNT / GULP CONFIG
grunt.initConfig({
html2js: {
options: {
base: 'app',
module: 'templates',
htmlmin: {
... many available options: see GitHub repo ...
}
},
main: {
src: ['app/**/*.html'],
dest: 'templates.js'
},
},
})
then just use the templates module as a dependency:
angular.module('myApp', [ 'templates']);
----------
Here is an example from the gulp-html2js GitHub repository:
gulp.task('scripts', function() {
gulp.src('fixtures/*.html')
.pipe(html2js({
outputModuleName: 'template-test',
useStrict: true
}))
.pipe(concat('template.js'))
.pipe(gulp.dest('./'))
})
TESTING
What's more, html2js is also a very good tool to test directives that use the templateUrl property.
FOR MORE INFORMATION
I came accross html2js after reading Joel Hooks' (Egghead instructor) book about automation, which I strongly recommend.
Watch a dedicated video about html2js in the pro section of the EggHead website.
Testing directives using the templateUrl property with Karma and karma-ng-html2js-preprocessor
NOTE
Technically, you could just use ng-html2js, without using Gulp or Grub; you could then use a command line like the following:
ng-html2js inputFile [outputFile] [-m moduleName] [--module-var ngModule]
However, as you would need to run the above command for each templateUrl file, Gulp/Grub automation seems to be a more efficient way to go.
DISCLAIMER
I have no particular interest or shares in the book/websites/tools I mentioned.
Note: I should also add, you also add this file to your html page:
<script src="path/to/templates.js"></script>
Why not use ng-include in your main html file to load all html's at once.
Something like this...
<div ng-repeat="template in templates">
<ng-include src="template.url"></ng-include>
</div>
So here templates is an array of objects which contains all the url's the other templates which you want to load at once in your main.html file.
Easy. Create them all as ng-template blocks:
<script type="text/ng-template" id="app/access/partials/a1.html">
Content of the template.
</script>
There is already a grunt-angular-templates grunt plugin specific to this angular task only. i have been using it for a while now. this plugin automatically caches your HTML templates using $templateCache in one file which you can add in your application.
grunt-angular-templates - https://www.npmjs.com/package/grunt-angular-templates
Use,
yourApp.run(['$templateCache', function($templateCache) {
$templateCache.removeAll();
}])
Your problem pointed in this site too,
http://javahow.net/questions/27321315/using-angulars-ui-router-how-can-we-make-sure-the-new-version-of-the-html-part
I'm using yeoman. According to the readme under angular-ui/build/README.md
The repository comes with the modules pre-built and compressed into
the build/ directory.
Usage is documented as:
angular.module('myApp', ['ui']);
and
You do not need to build the project to use it - see above [...]
In order to start using angular-ui, I changed the declaration of my angular-js module to include 'ui'
var app = angular.module('MyApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui'
]);
However the UI Bootstrap documentation states installation is achieved with:
angular.module('myModule', ['ui.bootstrap']);
Question #1: What's the difference between using only ui and ui.bootstrap?
I then included the following js file manually into my .html file (note the build directory in the path as this relates to question 3):
<script src="bower_components/angular-ui/build/angular-ui.js"></script>
However all other angular components are included automatically into my .html file as part of the build process:
Question #2: How do I use angular-ui such that it too is added as part of the build process?
Question #3: Why does angular-ui have .js files in a build sub-directory while other angular components do not?
Answer # 1: The difference is that Angular-ui is a combination of several packages of the angular-ui project specificly all (or almost all) the UI-Utils and UI-Modules, and the UI-Bootstrap is another part of the project that includes several bootstrap components writen in angular way and is not included in the Angular-UI Bundle pack ... here for more info and see all the different packages of the project Angular UI github
Answer # 2 As already you did just including the 'ui' dependency into the dependecys array of your main module, howerver it will not include the ui-bootstrap as i mention above
Answer # 3 Those files are as you can see in the link of the main proyect of angular-ui are the modules and utils as separate components so you can delete them from your project and only include the distriburion files or you can use them separetly
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.