I would to declare specific module because
I load on every page all my angular files..
It's huge.
I want to load specifically angular files on each page.
My app.js file that looks like this :
var testApp = angular.module(
'testApp', [
'MainCtrl',
'AdminCtrl',
'UserCtrl',
'ArticleCtrl',
'ArticleService',
'MediaService',
'UserService',
],
function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}
);
But it wants to declare modules that are no longer loaded.
So instead of making a specific app.js for each page I need..
Anyone has a better idea ?
Thank you.
You can make use of requirejs where modules will be loaded on demand.
A very nice tutorial how to achieve this:
Lazy loading angular components
Related
I need a third party module in my angular app for the specific page only so i dont want to load those js files when they are not required
currently code is like this
angular.module('app', ['othermodule']);
but i want it like
angular.module('app',['']).
controller('ctrl'['module',function(module){
}]);
or any similar alternatives. How can modules be loaded conditionally ?
The first thing you will need to do is break your angular modules out into their own files. A simple example would be a seperate app.js that handles creating the app and routing, then controller.js and factory.js. Once you have a seperate file for each module you create the module with this syntax
angular.module('myapp.functionName.type', ['inject your custom module here'])
.whatever (controller, value, factory, etc)
You would then inject the myapp.functionName.type into the app.js
So i downloaded and installed fabricjs using bower inside of my angular application and i am having trouble loading it up.
I have the following on top of my app.js file. Everything else loads fine except fabric
angular
.module('myApp', [
'flow',
'fabric',
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'ui.router',
'controllers.main',
])
.config( function ($stateProvider, $httpProvider, flowFactoryProvider ) {
When i load the page i get the following error.
[$injector:modulerr] Failed to instantiate module fabric due to: [$injector:nomod] Module 'fabric' is not available! You either misspelled the module name or forgot to load it.
I am loading it up in my index.html
<script src="bower_components/fabric/dist/fabric.min.js"></script>
Anyone have any success with loading fabric inside of their angular application?
Even though this is old, I'll try to answer it for future searchers.
I've been using Fabric inside Angular with great success.
From what I can see in your code example, you are attempting to use the standard fabic.min.js file as a Angular Module. Angular only sees it as pure JS, that is why it generates an error saying it couldn't find it - because no Angular module called "fabric" was ever declared like:
angular.module('fabric', []);
If you compare one of the other modules you had listed, say ngCookies, you can see how one is setup.
It would be too much code to post here, so the easiest solution is to utilize or study some of the excellent work by Michael Calkins here:
https://github.com/michaeljcalkins/angular-fabric
He has everything wrapped up in directives and such which makes it easy to implement.
You can also play around with it live here: http://codepen.io/michaeljcalkins/pen/Imupw
Hope that helps someone.
I really enjoy the use of AMD to manage dependencies.
Now I'm getting started with Angular, in that case things become more complicated, because in one file we refer to a certain object that we admit to have already been created and this requires to make the script tags all organized and so on.
Another thing I noticed is that as the app grows there will be many script tags and more things to grant to be in order. I found ways to make AMD work with Angular.js, but I really didn't like it because it didn't seem natural.
What are the best practices to manage dependencies in Angular JS, making it easier to maintain the app as it grows?
I'd suggest Require.js which does implement AMD. There's a great example of how to configure your main.js (the entry point for a require.js application) and test-main.js (entry point for karma tests) here: https://github.com/tnajdek/angular-requirejs-seed.
Notes:
make sure to use paths and shim for dependent modules that you want to expose to your application but that are not available as require.js modules.
make sure you keep in mind the distinction between angular.js's concept of modules and require.js modules. Require.js modules are about describing file dependencies and loading in the correct fashion. Angular modules are about enabling dependency injection, once this loading is done correctly. You'll end up with code that looks like this example:
example app.js
define([
'angular', //as defined in the requirejs shim config
'filters', //as defined in the filters.js
'services', //as defined in services.js
'directives', //in directives.js
'controllers', //in controllers.js
'angularRoute',//as defined in the requirejs config
],function(angular,filters,services,directives,controllers,angularRoute){
'use strict';
//angular.js module definition syntax: Declare app level module which depends on filters,services,controllers,directives, and angular globals
var angularappModule = angular.module('angularapp', [
'ngRoute',
'angularapp.filters',
'angularapp.services',
'angularapp.directives',
'angularapp.controllers'
]);
angularappModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/angularapp', {templateUrl: 'partials/angularapp.html', controller: 'angularappCtrl'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/angularapp'});
}]);
return angularappModule;
});
I am building a large Angular Application. I am trying to lazy load dependencies.
So my application module in app.js looks like
testApp = angular.module('SellerDashboard', [
'ui.bootstrap',
'ngRoute',
'chieffancypants.loadingBar',
'ngAnimate',
'route-segment',
'view-segment',
'Feature1.Index',
'Feature1.My_Listings',
'Feature1.My_Listings.Directives',
'Feature2.Debug',
'Feature2.Index',
'Feature3.Index',
'Feature3.Landing'
]);
Each of these modules have sub modules which has further dependencies.Each of the modules are in seperatefiles .An example file is as follows
var featureApp = angular.module('Feature1.My_Listings', ['Feature1.Services', 'Common.Services', 'CommonDebug.Services','angular-intro']);
listing_app.controller('my_listing', ['$scope', 'fkPaginator', '$routeParams', 'fkLogger', '$q','fkLoaderManager',function ($scope,fkPaginator, $routeParams, fkLogger, $q,fkLoaderManager) { //do somesthing})]);
So my app.js has no direct dependency on 'Feature1.Services' modules. It has dependency of Feature1.My_Listings module (which defines the controllers) which has further dependency on services modules.
[Feature1.Services defines the services has further dependency on other providers its requires]
Now,I do not want my Feature1.My_Listings to be loaded until I go the page that actually require some controller defined in 'Feature1.Services' .So if I am in "My_Listings" page I do not want to load fFeature2 and Feature 3 modules.
Implement lazy loading . The above link shows how to use resolve while changing routes.But then it also makes it mandatory to have all files under one module which is the app module and all controllers to be defined as app.controller("bla bla") using app as the global variable. But in my case I want to lazy load modules and include them dynamically based on the routes.
How do I go about it ?? It would be nice if somebody could help regarding how this can be achieved using requirejs.
So for a very large app is the above way correct for defining controllers,services ,etc or breaking them in to smaller modules like I did is the proper way ??
I am using requirejs and angularjs to load the module inside my application.
The problem I am facing is I dont know how to load the controller after angular has been bootstrapped. Here is my code :
main.js :
require(['app', //all my scripts go here
function(){
angular.bootstrap(document, ['myApp']);
});
app.js :
define([], function(){
var myApp = angular.module('myApp', ['ngRoute']);
$routeProvider.
when('/home', {
templateUrl : 'partials/home.html',
controller : 'UserRegisterCtrl'
}).
otherwise({
redirectTo : '/home'
})
return myApp;
})
controller.js
define(['app'], function(app){
app.controller('MyCtrl', function($scope){});
})
myApp.html
body(ng-app)
<div ng-controller = 'MyCtrl'></div> <-- I can not put MyCtrl here
because I think the MyCtrl has been declared before myApp has been bootstrapped
Therefore I really need to know if there is a way to load the MyCtrl controller after myApp has been bootstrapped. I am really new to Angularjs. Any help would be really appreciate.
If you are manually bootstrapping your angular app there is no need for ng-app, because this is just a directive that pretty much does the same thing.
This little trap caused some people a headache before:
Why do I need to angular.bootstrap even when I declare ng-app="MyApp" in JSFiddle
angular bootstrapping issues angular.bootstrap not working on my apps
When you use ng-app in your html, the bootstrap happens automatically. In this case, it depends what you put in the <script> tag in your index.html.
I am assuming that you follow the RequireJS usage where you load angular using RequireJS. If so, make sure you declare the dependency of angular to your app using shim. If that is not the case, please state how your are loading angular and share the content of your main.js.
It was really tricky for me to get RequireJS to work with AngularJS so I created following project that helped me deal with the complexity:
http://marcoslin.github.io/angularAMD