I'm starting with angular, how could I break alll the code from one app into many files?, I watched the 60ish minutes intro, and they mentioned that I could do this without requirejs or any other framework.
Lets say I have something like this that works just fine:
var app = angular.module('app', []);
app.factory('ExampleFactory', function () {
var factory = {};
factory.something = function(){
/*some code*/
}
return factory;
});
app.controller ('ExampleCtrl', function($scope, ExampleFactory){
$scope.something = function(){
ExampleFactory.something();
};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'ExampleCtrl',
templateUrl: 'views/ExampleView.html'
})
.otherwise({ redirectTo: '/' });
});
What if I wanted to have it in separate files? like this
File One:
angular.module('factoryOne', [])
.factory('ExampleFactory', function () {
var factory = {};
factory.something = function(){
/*some code*/
}
return factory;
});
File Two:
angular.module('controllerOne', ['factoryOne'])
.controller ('ExampleCtrl', function($scope,ExampleFactory){
$scope.something = function(){
ExampleFactory.something();
};
});
File Three:
angular.module('routes', ['controllerOne'])
.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'ExampleCtrl',
templateUrl: 'views/ExampleView.html'
})
.otherwise({ redirectTo: '/' });
});
File four:
var app = angular.module('app', ['routes']);
I've tried it like this and it doesn't work.
Can I do something like this and just have a script tag for File Four in the main view? or do I have to have one script tag per file?.
Thanks for the help guys.
AngularJS does not currently have a script loader as part of the framework. In order to load dependencies, you will need to use a third party loader such as RequireJS, script.js, etc.
Per the Docs(http://docs.angularjs.org/guide/module#asynchronousloading):
Asynchronous Loading
Modules are a way of managing $injector
configuration, and have nothing to do with loading of scripts into a
VM. There are existing projects which deal with script loading, which
may be used with Angular. Because modules do nothing at load time they
can be loaded into the VM in any order and thus script loaders can
take advantage of this property and parallelize the loading process.
...or, as #xanadont explained, you can add <script> tags to your page for every file.
You must have a
<script src="file.js"></script>
per each file that you're using. It should work once you have all the references in place.
Or ... check out this article for a way to roll-your-own runtime resolution of controllers.
You've got to separate the idea of downloading from the idea of loading and executing in-memory. Use Yeoman/grunt or similar build tools to manage the process of adding individual files to the project for Angular's various modules controllers, directives, services, etc. that are attached to those modules. Then, at build-time, the files will be minified and concatenated for a speed/bandwidth improvement that's vastly superior to lazy-downloading of individual files.
Once you've dealt with the files, Angular handles the rest, executing dependencies only when they're actually needed.
In the example above, #Jose, your problem was that you're not attaching your dependencies properly to the original module. You're creating new modules and burying the dependencies inside of them. In the first version, you used var app to cache the reference to the module called 'app' and then did app.controller(), etc. So, you're calling the .controller() method on the app module.
But in the second, you still need to attach those dependencies to the main app module. To do that, you need to call angular.module('app') to access the original module, then you can chain a call to .controller() or .directive() from that module, once you've retrieved it.
Bottom-line, use Angular's constructs for the loading of Angular dependencies. If, after you've gotten all of that out of the way, you still want to use Require for loading third-party scripts, go ahead. But I recommend testing first to see if you're actually adding value.
Related
I am using a web templates which is use jquery image gallery or other etc.
I want to convert this template to angularjs structure. I make some partial html pages like slider.html or contact.html and its controller.
when i call partial html to index ,slider can not able to use jquery libraries which ı loaded them in index.
İf i refresh the page when partial is open it works again.
I read some article about directives or other etc. but ı am not writing any script they are just loaded in index and html uses them so i do not need any directive to work a script i just need use all library file in partial html.
is there any way ?
i try to load all libraries which partial will use but in this way all libraries loaded each call and it works but it is not a good way
I have some tips: First of all, your libraries should not be included in the view. You should include the library just in one point of your application. Could be asynchronous (via JavaScript), or by adding the script tag for the library in your index file.
If you decide add the library via JavaScript, take into account to do a check to prevent multiples includes, e.g.,
if (!window.jQuery) {
//include jQuery library
}
Also you can add the script tag in your index/main html file and if you want to load it asynchronously, you can add the attributes async or defer.
-- Take a look at HTML 5 <script> Tag.
Now, related to AngularJS, when you load a partial view, is raised the event $includeContentLoaded which is emitted every time the ngInclude content is reloaded.
If you have two or more partial views included, you should ask for the specific view where you want to load a library/plugin or make some DOM manipulation, e.g.,
controller.js
angular
.module('myApp')
.controller('HomeCtrl', [
'$scope', '$window',
function ($scope, $window) {
'use strict';
var homeCtrl = this,
$ = jQuery; //safe alias
//Emitted every time the ngInclude content is reloaded.
$scope.$on('$includeContentLoaded', function (event, source) {
if ('src/pages/home/zipcodeForm/view.html' === source) {
//initialize your jQuery plugins, or manipulate the DOM for this view
}
else if('src/pages/home/section1/view.html' === source){
//initialize your jQuery plugins, or manipulate the DOM for this view
}
});
//Can be used to clean up DOM bindings before an element is removed
//from the DOM, in order to prevent memory leaks
$scope.$on('$destroy', function onDestroy() {
//destroy event handlers
});
}
]);
The code that matters here is the event $includeContentLoaded. Visit the site for more information: https://docs.angularjs.org/api/ng/directive/ngInclude
If you are using ng-view you should have no problems, just register the view in the router (there are a lot of ways to achieve the same)
module.js
angular
.module('myApp', ['ngRoute' /*, other dependecies*/]);
router.js
angular
.module('myApp')
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
'use strict';
$routeProvider
.when('/', {
templateUrl: 'src/pages/home/view.html',
controller: 'HomeCtrl',
controllerAs: 'homeCtrl',
reloadOnSearch: false
})
.when('/index.html', {
redirectTo: '/'
})
.when('/home', {
redirectTo: '/'
})
.when('/404', {
templateUrl: 'src/pages/error404/view.html',
controller: 'Error404Ctrl',
controllerAs: 'error404Ctrl'
})
.otherwise({
redirectTo: '/404'
});
/*
Set up the location to use regular paths instead of hashbangs,
to take advantage of the history API
$locationProvider.html5Mode(true);
*/
}
]);
When the view is loaded, it emits the event: $viewContentLoaded meaning the DOM is loaded, then you can initialize jQuery plugins safely.
controller.js
angular
.module('myApp')
.controller('HomeCtrl', [
'$scope', '$window',
function HomeCtrl ($scope, $window) {
'use strict';
var homeCtrl = this, //the controller
$ = jQuery; //safe alias to jQuery
//Emitted every time the ngView content is reloaded.
$scope.$on('$viewContentLoaded', function() {
$('.slickSlider').slick({
slidesToShow: 4,
arrows: true,
slidesToScroll: 1
});
});
}
]);
Important: In the previous code, the order where scripts are included does matter.
module.js
router.js
controller.js
I highly recommend using automation tools such as gulp
I am currently building a base for AngularJS in combination with RequireJS and so far I got everything working. there's just a little thing that I do not understand at this point. I have a file which creates the angular module, when this module is created it requires a controller and assigns it to the module. The strange thing though, the controller needs the module as dependency while in the module's file the module has not been returned yet because the require statement is executed before the return statement. This somehow seems to work but it has a bad smell to it.
Module file:
// Home is defined here and can later be used in controllers (and Services)
define('home', ['require', 'angular'], function(require, angular) {
var homeModule = angular.module('AngularBase.home', ['AngularBase.core']);
homeModule.config(['$controllerProvider', '$provide', '$compileProvider', function($controllerProvider, $provide, $compileProvider) {
// We need this in order to support lazy loading
homeModule.controller = $controllerProvider.register;
homeModule.factory = $provide.factory;
// And more, not relevant at this moment
}]);
// It loads the controller that depends on this module here
require(['modules/home/controllers/homeController'], function() {
// Dependencies loaded
});
// Yet in my mind controllers that need this module can only use it when the following return statement is called.
return homeModule;
});
Controller File:
// As you can see this controller depends on home while home hasn't returned its module yet
// Yet it seems to work just fine
define(['home'], function(home) {
home.controller('homeController', ['$scope', 'homeService', function($scope, homeService) {
$scope.title = 'Home controller';
}]);
});
I assume that it is not a good approach to do it like this and therefore I need some suggestions on how to make this happen in a clean way. I thought about grabbing the AngularBase.home module via angular.module('AngularBase.home') in the controller file and defining my controller on this. This however no longer allows me to insert a mockModule for testing in this controller via RequireJS's map function.
map: {
'*' : {
'home' : 'mock-module'
}
}
Any suggestions on how to refactor this into a more clean solution?
I have found the solution to my problem. In the end it seems to be just fine to do it the way I am currently doing it. When a file is called and has a define statement in it it will wait until all dependencies are available until the function is executed. This means that the controller will actually wait for the module to finish initializing before calling its function to register itself.
The way I am doing it above is just fine.
Source: http://www.slideshare.net/iivanoo/handlebars-and-requirejs (slides 11 till 24)
I have a globale routes controller and want to create an additional controller for each page template.
It's done as follows:
var app = angular.module('myapp', ['ngSanitize', 'ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when("/test", {
templateUrl: "./templates/test.html",
controller: "testController"
})
});
app.controller('test', function() {
//...
});
Question: how can I move the controller to it's own testController.js file? I tried it, but then the controller does not work anymore.
Which steps do I have to take if I extract the controller in its own file?
How can I get access to var app module variable from within testController.js?
Do I necessairly have to include each controller as new <script src="js/testController.js"></script> tag entry in my html templates? That would be cumbersome, as I want to split my application into many controllers, and that would result in many many imports.
You can access app by simply declaring it without dependencies:
var app = angular.module('myapp');
app.controller("testController", function() {
});
And yes, you need to include testController.js on every page that needs it.
I have an Angular SPA with several tabs, which are served by templates. Each of these tabs requires different scripts (both local and CDN), so I'd only like to load scripts when needed, ie I will need to include them inside the templates (or associated controllers) themselves.
So far, I've tried this approach:
// Start template
<data-ng-include src="http://maps.googleapis.com/maps/api/js"></data-ng-include>
// Rest of stuff
// End template
This doesn't seem to be working. Yes, I have jQuery included in the header. What is the best way to go about this? Seems like it should be much simpler to include scripts inside templates.
You can use any of the lazy loader (on demand loader) library like requireJS, ocLazyLoad.
I have successfully implemented ocLazyLoad in one of our enterprise application, because it provide lots of usefull features if you are developing modular Single Page Application:
Easy to implement. You can lazy load any resource anywhere inside your application
Dependencies are automatically loaded
Debugger friendly (no eval code)
Can load any client side resouce like js/css/json/html
Compatible with AngularJS 1.2.x/1.3.x/1.4.x
You can also load any resource inside service, factory, directive also.See example
Resolve any resource before executing any state if you are using ui.router library for routing.See example
You can also lazy load resource in .config() of any module.See example
It also gives you the functionalty of logging module loading events.
All references are taken from official website of ocLazyLoad
If you want to include JS. I would tell you , please use :
cLazyLoad JS
Here is example:
var myapp = angular.module('myApp', ['oc.lazyLoad']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
template: '<div ui-view class="ngslide"></div>',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([js/jquery.main.min.js','js/ie10-viewport-bug-workaround.js']);
}]
}
})
});
I use a simple directive for this (here :
interface AddScriptDirectiveAttributes extends IAttributes {
type: string;
src: string;
}
export function addScript(): IDirective {
return {
restrict: 'E',
link: function (scope: IScope, element: JQuery, attrs: AddScriptDirectiveAttributes) {
let script = document.createElement('script');
if (attrs.type) {
script.type = attrs.type;
}
script.src = attrs.src;
document.body.appendChild(script);
}
};
}
Usage would be something like this:
<add-script src="script" type="application/javascript"></add-script>
I have an app that which has a load of scripts loading initially and the list is growing as development goes on. I want to lazy load scripts which contain controllers as and when needed. I am using OcLazyLoad along with ngRoute for the routing option (i did try ui-route which actually had the same end result but was causing other app issues). The lazy load and routing is working fine, scripts and views are only loaded when needed, but the issue is the controller is not being loaded (Argument 'caseReviewController' is not) so it's as though the controller does not exist.
Here is a simple version of what I have in my app.js file...
var app = angular.module('dashboard', ['oc.lazyLoad', 'ngRoute', 'LocalStorageModule']);
app.config(function ($ocLazyLoadProvider, $routeProvider, localStorageServiceProvider) {
$ocLazyLoadProvider.config({
loadedModules: ['dashboard'], modules: [
{
name: 'caseReview',
files: ['js/controllers/case-review.js']
}
]
});
$routeProvider
//other routes here...
.when('/case-review', {
templateUrl: 'views/case-review.html',
controller: 'caseReviewController',
resolve: {
loadModule: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load('caseReview');
}]
}
})
});
In the seperate case-review.js file I have a simple controller
app.controller('caseReviewController', function($scope, localStorageService, $route){
//do stuff
});
This controller is not being found or executed but the view and js file are being lazy loaded as expected. Any help would be great.
Thanks.
In your separate case-review.js, you must get the reference of app.
angular.module('dashboard').controller('caseReviewController', function($scope, localStorageService, $route){
//do stuff
});
As you've mentioned it's in separate file, it may not know about the app variable. It's better to get the reference of the angular module in the separate file.
This must solve your issue.