Is it possible to lazy load an angular application partially?
For instance, let's say I want to lazy load only a few libraries and a few angular modules (controllers, services) instead of lazy loading the entire application with the libraries.
Angular version is 1.x
Yes its possible, your require-config.js
require.config({
paths: {
'angular': 'bower_components/angular/angular.min',
'angular-animate': 'bower_components/angular-animate/angular-animate.min',
'angular-aria': 'bower_components/angular-aria/angular-aria.min',
'angular-cookies': 'bower_components/angular-cookies/angular-cookies.min',
'angular-messages': 'bower_components/angular-messages/angular-messages.min',
'angular-resource': 'bower_components/angular-resource/angular-resource.min',
'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min',
'angular-ui-router-extras': 'bower_components/ui-router-extras/release/ct-ui-router-extras.min',
'angular-sanitize': 'bower_components/angular-sanitize/angular-sanitize.min',
'angular-pagination': 'bower_components/angularUtils-pagination/dirPagination',
'angular-bootstrap': 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
'angular-uiSelect': 'bower_components/ui-select/dist/select.min',
'angular-loadingBar': 'bower_components/angular-loading-bar/build/loading-bar.min',
'angular-switch': 'bower_components/angular-ui-switch/angular-ui-switch.min',
'angular-tree': 'bower_components/bootstrap-tree/js/bootstrap-tree'
},
//resolve dependencies
shim: {
'angular': {exports: 'angular'},
'angular-animate': {deps: ['angular']},
'angular-aria': {deps: ['angular']},
'angular-cookies': {deps: ['angular']},
'angular-messages': {deps: ['angular']},
'angular-resource': {deps: ['angular']},
'angular-ui-router': {deps: ['angular']},
'angular-ui-router-extras': {deps: ['angular', 'angular-ui-router']},
'angular-sanitize': {deps: ['angular']},
'angular-pagination': {deps: ['angular']},
'angular-bootstrap': {deps: ['angular']},
'angular-uiSelect': {deps: ['angular']},
'angular-loadingBar': {deps: ['angular']},
'angular-switch': {deps: ['angular']},
'angular-tree': {deps: ['jquery']},
}
// set library priorities
priority: [
'angular'
],
//here you add your custom modules, just call the js "main.js" for each module
packages: [
{
name: 'home',
location: './src/module/home'// It has its own file main.js
},
{
name: 'login',
location: './src/modules/login'// It has its own file main.js
}
]
});
//inject modules and bootstrap the app
require([
'angular',
'main',
'type',
'angular-animate',
'angular-aria',
'angular-cookies',
'angular-messages',
'angular-resource',
'angular-ui-router',
'angular-ui-router-extras',
'angular-sanitize',
'angular-pagination',
'angular-bootstrap',
'angular-uiSelect',
'angular-loadingBar',
'angular-switch',
'angular-tree'
],
function(angular, main) {
//here bootstrap the angular app in your html, home.name is the array packages.
angular.module('myApp', [home.name]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
}
);
In your index.html add
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My app</title>
</head>
<!--The app is bootstrapped, you don't need ng-app -->
<body>
<!-- if you use router ui -->
<div ui-view></div>
<!-- data-main is the path to the require-config-->
<script type="text/javascript" data-main="require-config" src="bower_components/requirejs/require.js"></script>
</body>
</html>
Now in home/main.js
define(function(require) {
var angular = require('angular'),
moduleName = 'home';
angular
.module(moduleName, [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.select',
'ui-notification',
'angularUtils.directives.dirPagination',
'angular-loading-bar',
'uiSwitch',
'type'
])
.config(function($stateProvider, $urlRouterProvider, NotificationProvider, cfpLoadingBarProvider){
$urlRouterProvider
.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "src/main/views/main.html",
requireLogin: true
});
})
//Controllers
.controller('MainCtrl', ['$scope', require('./controllers/MainCtrl')])
.controller('NavCtrl', ['$scope', '$state', require('./controllers/NavCtrl')])
.controller('SideCtrl', ['$scope', '$state', require('./controllers/SideCtrl')])
//Also this works
.controller('SideCtrl', ['$scope', '$state', funtion($scope, $state){
//your code here
}])
//Sidebar & Navbar
.directive('navbar', require('./directives/NavbarDirective'))
.directive('sidebar', require('./directives/SidebarDirective'))
//Services
.factory('customNotifications', ['Notification', require('./services/notificationsFactory')])
.factory('errorsHandler', ['$location', 'authentication', 'customNotifications', require('./services/errorsFactory')])
;
return {
name: moduleName,
ngModule: angular
};
});
Related
I've just installed angular-translate, but the webpage after this doesn't work.
Here you can find my code:
app.js
angular
.module('frontEndApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'angular-translate'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
Index.html.
<script src="bower_components/angular-translate/angular-translate.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/prueba/pruebaController.js"></script>
<script src="scripts/controllers/loginController.js"></script>
<script src="scripts/controllers/department/departmentController.js"></script>
<script src="config/appConstants.js"></script>
<script src="config/languajes.js"></script>
languajes.js
'user strict';
var app = angular.module('frontEndApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
code: 'Code',
department: 'Deparment',
description: 'Description',
boss: 'Boss',
project: 'Project'
});
$translateProvider.translations('es', {
code: 'Código',
department: 'Deparmento',
description: 'Descripción',
boss: 'Jefe',
project: 'Proyecto'
});
$translateProvider.preferredLanguage('en');
// $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
bower.json
{
"name": "front-end",
"version": "0.0.0",
"dependencies": {
"angular": "^1.6.6",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.6.6",
"angular-aria": "^1.6.6",
"angular-cookies": "^1.6.6",
"angular-messages": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-sanitize": "^1.6.6",
"angular-touch": "^1.6.6",
"bootstrap-sass": "bootstrap-sass-official#^3.3.7",
"ngstorage": "^0.3.11",
"angular-translate": "^2.16.0"
},
"devDependencies": {
"angular-mocks": "^1.6.6",
"angularLocalStorage": "ngStorage#^0.3.2"
},
"appPath": "app",
"moduleName": "frontEndApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
The problem is the system works fine, but when I insert the script
all is gone, the webpage is blank only the header appears.
I have tried several solutions but I have no idea.
https://docs.angularjs.org/error/$injector/nomod?p0=pascalprecht.translate
https://angular-translate.github.io/docs/#/guide
In languajes.js:
angular.module('frontEndApp', ['pascalprecht.translate'])
is telling angular to create a module called frontEndApp - which overrides the module you've created in app.js.
(Overrides because app.js is run before languajes.js due to the order of the scripts in the HTML).
What you need to do:
app.js
angular
.module('frontEndApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'pascalprecht.translate'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
languajes.js
'user strict';
var app = angular.module('frontEndApp');
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
code: 'Code',
department: 'Deparment',
description: 'Description',
boss: 'Boss',
project: 'Project'
});
$translateProvider.translations('es', {
code: 'Código',
department: 'Deparmento',
description: 'Descripción',
boss: 'Jefe',
project: 'Proyecto'
});
$translateProvider.preferredLanguage('en');
// $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
This is the solution.
use strict;
/**
* #ngdoc overview
* #name frontEndApp
* #description
* # frontEndApp
*
* Main module of the application.
*/
angular
.module('frontEndApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'pascalprecht.translate'
]).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.when('/prueba', {
templateUrl: 'views/prueba/prueba.html',
controller: 'pruebaController',
controllerAs: 'prueba'
})
.when('/login', {
templateUrl: 'views/login/login.html',
controller: 'loginController',
controllerAs: 'login'
})
.when('/department', {
templateUrl: 'views/department/department.html',
controller: 'departmentController',
controllerAs: 'departmentController',
data: {
title: 'department',
section: 'department'
}
})
.otherwise({
redirectTo: '/'
});
}).config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
code: 'Code',
department: 'Deparment',
description: 'Description',
boss: 'Boss',
project: 'Project'
});
$translateProvider.translations('es', {
code: 'Código',
department: 'Deparmento',
description: 'Descripción',
boss: 'Jefe',
project: 'Proyecto'
});
$translateProvider.preferredLanguage('en');
// $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);
I am starter on these 2 libraries. Previously I used ng-view for switching views, and now I am migrating to ui-view with RequireJS.
Here my codes
index.html
...
<body ng-cloack ui-router-styles>
<div class="ui-view"></div>
</body>
<script src="components/JS/moment.js"></script>
<script src="components/JS/moment_locale-id.js"></script>
<script src="components/JS/require.js" data-main="main.js"></script>
...
main.js
require.config({
waitSeconds: 0,
baseUrl: '',
paths: {
'angular': 'components/JS/angular.min',
'angularAMD': 'components/JS/angularAMD.min',
'angular-ui-router': 'components/JS/angular-ui-router.min',
'angular-ui-router-styles': 'components/JS/angular-ui-router-styles',
'angular-messages': 'components/JS/angular-messages.min',
'angular-aria': 'components/JS/angular-aria.min',
'angular-animate': 'components/JS/angular-animate.min',
'angular-material': 'components/JS/angular-material.min',
'angular-locale_id-id': 'components/JS/angular-locale_id-id',
'angular-moment': 'components/JS/angular-moment.min',
'moment': 'components/JS/moment'
},
shim: {
'angular': {
exports: 'angular'
},
'angularAMD': ['angular'],
'angular-ui-router': ['angular'],
'angular-locale_id-id': ['angular'],
'angular-ui-router-styles': ['angular-ui-router'],
'angular-aria': ['angular'],
'angular-messages': ['angular'],
'angular-animate': ['angular'],
'angular-material': ['angular', 'angular-animate', 'angular-aria', 'angular-messages'],
'angular-moment': ['moment']
},
deps: ['app']
});
app.js
define([
'angularAMD',
'angular-ui-router',
'angular-ui-router-styles',
'angular-material',
'angular-messages',
'angular-animate',
'angular-aria',
'angular-locale_id-id',
'angular-moment'
],
function (angularAMD, amMoment) {
'use strict';
var app = angular.module('com.malasbelanja.app', ['angularMoment', 'ngMaterial', 'ngMessages', 'ngAnimate', 'ui.router', 'uiRouterStyles']);
app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, $mdGestureProvider, $sceDelegateProvider, $compileProvider, $mdDateLocaleProvider) {
$stateProvider
.state('login', angularAMD.route({
url: '/login',
templateUrl: 'state/views/login.php',
data: {
css: ['state/styles/login.css']
},
/*resolve: {
loadController: ['$q',
function ($q) {
var deferred = $q.defer();
require(['state/controllers/login'], function () {
deferred.resolve();
});
return deferred.promise;
}
]
},*/
controller: 'loginController'
}))
.state('register', angularAMD.route({
url: '/register',
templateUrl: 'state/views/register.php',
data: {
css: ['state/styles/register.css']
}
}));
$urlRouterProvider.otherwise("login");
$mdThemingProvider.theme('default')
.primaryPalette('green', {
'default': '900'
})
.accentPalette('blue', {
'default': '900'
});
$mdThemingProvider.theme('dark')
.primaryPalette('yellow')
.dark();
$mdDateLocaleProvider.formatDate = function (date) {
return moment(date).format('LL');
};
$compileProvider.preAssignBindingsEnabled(true);
$mdGestureProvider.skipClickHijack();
$sceDelegateProvider.resourceUrlWhitelist(['**']);
});
app.controller('loginController', function($scope){
$scope.login = function(){
alert('halo');
};
});
app.run(function (amMoment) {
amMoment.changeLocale('id');
});
angularAMD.bootstrap(app);
return app;
});
But the page goes blank.
Here is the console message:
require.js:5 GET http://bismillah/loginController.js 403 (Forbidden)
require.js:5 Uncaught Error: Script error for "loginController"
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
Note: http://bismillah is my own virtual sever build on XAMPP
I plan to use a dynamic controller files later, and have founded how to provide them (on the comment block : app.js). Now I just want to implementing controller that i have defined in app.js but I keep getting error. Can you solve it? Any help is appreciated, thank you.
I followed this tutorial (https://www.startersquad.com/blog/angularjs-requirejs/) in order to build an application with AngularJS + RequireJS ; the problem I'm facing know is that I don't have any errors, just a blank page..
In hints, I can see for all my modules (including ui-router and app): 'module was created but never loaded' ...
I can't see where I did something wrong, and why anything isn't loaded ; the angular.bootstrap is called, I can see the log around.
Here is my architecture :
main.js
require.config({
// Alias libraries paths
paths: {
'domReady': './app/bower_components/requirejs-domready/domReady',
'angular': './app/bower_components/angular/angular',
'uiRouter': './app/bower_components/angular-ui-router/release/angular-ui-router'
},
// To support AMD
shim: {
'angular': {
exports: 'angular'
},
'uiRouter': {
deps: ['angular']
}
},
// Kick start application
deps: ['./bootstrap']
});
bootstrap.js
/**
* Bootstraps Angular onto the window.document node
*/
define([
'require',
'angular',
'uiRouter',
'app',
'routes'
], function(require, ng) {
'use strict';
require(['domReady!'], function(document) {
console.log('document is ready : ' + document);
ng.bootstrap(document, ['app']);
console.log('after bootstrap');
});
});
app.js
define([
'angular',
'uiRouter',
'./app/components/index'
], function(ng) {
'use strict';
return ng.module('app', [
'app.components',
'ui.router'
]);
});
routes.js
define(['./app'], function(app) {
'use strict';
return app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/javascripts/app/components/home/views/home.html',
controller: 'MainCtrl',
resolve: {
contactPromise: ['contacts', function(contacts) {
return contacts.getAll();
}]
}
})
.state('contacts', {
url: '/contacts',
templateUrl: '/javascripts/app/components/contact/views/list.html',
controller: 'ContactsListCtrl',
resolve: {
contactPromise: ['contacts', function(contacts) {
return contacts.getAll();
}]
}
})
.state('contacts_show', {
url: '/contacts/{id}',
templateUrl: '/javascripts/app/components/contact/views/show.html',
controller: 'ContactsShowCtrl',
resolve: {
contact: ['$stateParams', 'contacts', function($stateParams, contacts) {
return contacts.get($stateParams.id);
}]
}
});
$urlRouterProvider.otherwise('home');
}
]);
});
app/components/index.js
define([
'./contact/index',
'./home/index'
], function() {});
app/components/module.js
define(['angular'], function(ng) {
'use strict';
return ng.module('app.components', []);
});
app/components/contact/index.js
define([
'./controllers/ContactsControllers',
'./services/contactFactory'
], function() {});
app/components/contact/module.js
define(['angular', '../module'], function(angular, module) {
'use strict';
return angular.module('app.components.contact', []);
});
app/components/contact/controllers/ContactsControllers.js (for example)
define(['../module'], function(module) {
'use strict';
module.controller('ContactsListCtrl', [
'$scope',
'contacts',
function($scope, contacts) {
$scope.contacts = contacts.contacts;
$scope.addContact = function() {
if (!$scope.name || $scope.name === '' || !$scope.firstname || $scope.firstname === '') {
return;
}
contacts.create({
name: $scope.name,
firstname: $scope.firstname,
dynamicField: 'test'
});
$scope.name = '';
$scope.firstname = '';
};
}
]);
module.controller('ContactsShowCtrl', [
'$scope',
'contacts',
'contact',
function($scope, contacts, contact) {
$scope.contact = contact;
}
]);
});
Any idea?
EDIT : my angularjs is served by a nodejs server, maybe it changes something..
Here is my index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Troubadour : Prenez votre groupe en main !</title>
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
-->
</head>
<body>
<div class="container-fluid">
<ui-view></ui-view>
</div>
<!-- .container-fluid -->
<script src="/javascripts/app/bower_components/requirejs/require.js" data-main="/javascripts/main.js"></script>
</body>
</html>
I am developing the app with angularjs and codeigniter. And I have done with it( DEMO app ), mostly.
What I want to do is: implement lazy loading or don't want to include all these files at start, just include when needed.
Here is my Layout HEAD tag including the required js and css files.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>UMS : Admin </title>
<!-- added for Angular JS -->
<link href="<?php echo base_url(); ?>angular/css/loading-bar.min.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/animation.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/angular-chart.css" rel="stylesheet">
<!-- added for Angular JS -->
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url(); ?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="<?php echo base_url(); ?>dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url(); ?>dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="<?php echo base_url(); ?>bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url(); ?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- jQuery -->
<script src="<?php echo base_url(); ?>bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript REMOVED -->
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url(); ?>dist/js/sb-admin-2.js"></script>
<!-------------Angular js------------------->
<script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
<!-- flash msg -->
<script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
<!-- flash msg -->
<!--loading bar-->
<script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
<!--loading bar-->
<!-- charts-->
<script src="<?php echo base_url();?>angular/js/chart.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-chart.min.js"></script>
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/es5-shim.js"></script><![endif]-->
<!-- charts-->
<!-- core angular APPLICATION specific -->
<script src="<?php echo base_url();?>angular/js/admin/demo_angular.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/app.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/demo-dropdown-controller.js"></script>
<!-- core angular APPLICATION specific -->
<!--Directives developed by VANESH -->
<script src="<?php echo base_url();?>angular/js/angular-directives.js"></script>
<!--Directives developed by VANESH -->
<!-- ui bootstrap pagination -->
<script src="<?php echo base_url();?>angular/js/ui-bootstrap-tpls-0.12.0.js"></script>
<!-- ui bootstrap pagination -->
<!-------------Angular js------------------->
Here is my app. js (just showing the structure or how i am injecting the dependancies)
/* this is the angular js file for our UMS */
var base_url="http://localhost/ums/";
/* angularapp (asssigned to html tag in view) */
/* angularControllers is module created in demo_angular.js */
var angularapp = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit','chart.js']);
angularapp.config(['$routeProvider', function($routeProvider){
// routing configuration.......
}]);
Here is another js (demo_angular.js) where i have/had bunhch of controllers named as single module.
var base_url="http://localhost/ums/";
var angularControllers = angular.module('angularControllers', ['flash']);
angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash)
{/*...doing stuff...*/}
//other controllers same like above (edit user, all users, delete user, delete users...)
This app is working fine! Just there is need to implement lazy load(that i don't know).
Listen about Require.js.
Main Problem: How to use Require.js in this (my app: mentioned above).
Please do suggest some important with example.
IMPORTANT:
Is there anyone who can guide me (above) app specific? Means how my app.js and demo_angular.js will look like? how my main.js and require.js will look like? NOTE: I am injecting dependancies in app and controllers, dependancies in the sense services, directives, which are constructed or third party
There is a very good example which can help you?
Lazy Loading with Require js and Angualar js
Your main.js will look like
'use strict';
var app = angular.module('app', ['ngRoute']);
require js will look like
require.config({
baseUrl: './scripts/',
urlArgs: 'v=1.1',
waitSeconds: 200,
paths: {
'jquery': './libs/jquery.min',
'jquery-migrate.min': './libs/jquery-migrate.min',
'jquery-ui.min': './libs/jquery-ui.min',
'jquery.mobile.custom.min': './libs/jquery.mobile.custom.min',
'jquery.easyui.min': './libs/jquery.easyui.min',
'angular-resource': './libs/1.3.14/angular-resource.min',
'angular': './libs/1.3.14/angular.min',
'angular-route': './libs/1.3.14/angular-route.min',
'angular-animate': './libs/1.3.14/angular-animate.min',
'bootstrap': './libs/bootstrap',
'toastr': './modules/toastr',
'jsapi': './libs/jsapi',
'ngPopover': './modules/ngPopover',
'angular-file-upload': './modules/angular-file-upload',
'ckeditor': './javascripts/ckeditor4.4.7/ckeditor',
//'ng-infinite-scroll.min': './modules/ng-infinite-scroll.min',
'app': 'app',
'tr': './modules/tr',
'en': './modules/en',
'hi': './modules/hi',
'ru': './modules/ru',
'fr': './modules/fr',
'de': './modules/de',
}
});
require(
{
shim: {
//*************Jquery*****************
'angular-resource': {
deps: ['angular']
},
'angular-route': {
deps: ['angular']
},
'jquery-migrate.min': {
deps: ['jquery']
},
'jquery-ui.min': {
deps: ['jquery',
'jquery-migrate.min']
},
'jquery.easyui.min': {
deps: ['jquery',
'jquery-migrate.min']
},
'libs/shoppingCart': {
deps: ['jquery']
},
//Jquery ends
//************bootstrap**************
'bootstrap': {
deps: ['jquery',
'jquery-migrate.min',
'jquery-ui.min']
},
'javascripts/theme': {
deps: ['jquery', 'jquery-ui.min',
'javascripts/plugins/autosize/jquery.autosize-min',
'javascripts/plugins/charCount/charCount',
'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min',
//'javascripts/plugins/bootstrap_datetimepicker/bootstrap-datetimepicker',
'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker',
//'javascripts/plugins/common/bootstrap-wysihtml5',
'javascripts/plugins/nestable/jquery.nestable',
'javascripts/plugins/tabdrop/bootstrap-tabdrop',
//'javascripts/plugins/naked_password/naked_password-0.2.4.min',
'javascripts/plugins/datatables/jquery.dataTables.min',
'javascripts/plugins/datatables/jquery.dataTables.columnFilter',
'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min',
'javascripts/plugins/modernizr/modernizr.min']
},
//bootstrap ends
//***********plugins*****************
//'javascripts/plugins/msdropdown/jquery.dd': {
// deps: ['libs/jquery']
//},
'javascripts/plugins/select2/select2': {
deps: ['jquery',
'bootstrap']
},
'javascripts/plugins/timeago/jquery.timeago': {
deps: ['javascripts/theme']
},
'javascripts/plugins/autosize/jquery.autosize-min': {
deps: ['jquery']
},
'javascripts/plugins/charCount/charCount': {
deps: ['jquery']
},
'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min': {
deps: ['jquery']
},
//'javascripts/plugins/common/wysihtml5.min': {
// deps: ['jquery']
//},
//'javascripts/plugins/common/bootstrap-wysihtml5': {
// deps: ['jquery', 'javascripts/plugins/common/wysihtml5.min']
//},
'javascripts/plugins/nestable/jquery.nestable': {
deps: ['jquery']
},
'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker': {
deps: ['jquery']
},
'javascripts/plugins/tabdrop/bootstrap-tabdrop': {
deps: ['jquery']
},
'javascripts/plugins/naked_password/naked_password-0.2.4.min': {
deps: ['jquery']
},
'javascripts/plugins/datatables/jquery.dataTables.min': {
deps: ['jquery']
},
'javascripts/plugins/datatables/jquery.dataTables.columnFilter': {
deps: ['jquery']
},
'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min': {
deps: ['jquery']
},
'javascripts/plugins/modernizr/modernizr.min': {
deps: ['jquery']
},
'javascripts/plugins/bootbox/bootbox.min': {
deps: ['jquery']
},
'javascripts/plugins/validate/jquery.validate.min': {
deps: ['jquery',
'jquery-ui.min',
'javascripts/theme']
},
'javascripts/plugins/FlowJs/flow': {
deps: ['jquery']
},
'javascripts/plugins/FlowJs/fusty-flow': {
deps: ['jquery',
'javascripts/plugins/FlowJs/flow']
},
'javascripts/plugins/FlowJs/fusty-flow-factory': {
deps: ['jquery']
},
'javascripts/plugins/validate/jquery.validate.min': {
deps: ['bootstrap']
},
'javascripts/plugins/validate/additional-methods': {
deps: ['javascripts/plugins/validate/jquery.validate.min']
},
'javascripts/JsCookies': {
deps: ['jquery']
},
'ckeditor' : {
deps: ['jquery']
},
//plugins end
//***********modules*****************
'modules/resettableForm': {
deps: ['angular']
},
'toastr': {
deps: ['jquery-migrate.min']
},
'modules/resettableForm': {
deps: ['angular',
'toastr']
},
'modules/angular-gettext': {
deps: ['angular']
},
'modules/angular-multi-select': {
deps: ['app']
},
'modules/common': {
deps: ['angular',
'toastr']
},
'modules/logger': {
deps: ['angular',
'modules/common']
},
'modules/ui-bootstrap-tpls-0.9.0': {
deps: ['angular',
'toastr']
},
'modules/bootstrap.dialog': {
deps: ['angular',
'modules/ui-bootstrap-tpls-0.9.0',
'modules/common']
},
'modules/translations': {
deps: ['app']
},
'modules/loading-bar': {
deps: ['app']
},
'angular-file-upload': {
deps: ['angular', 'toastr']
},
//'ng-infinite-scroll.min': {
// deps: ['angular']
//},
'ngPopover': {
deps: ['app']
},
//'modules/SharedServices': {
// deps: ['app']
//},
'modules/ng-flow': {
deps: ['app',
'angular']
},
'en': {
deps: ['app']
},
'fr': {
deps: ['app']
},
'de': {
deps: ['app']
},
'hi': {
deps: ['app']
},
//'modules/tr': {
// deps: ['app']
//},
'ru': {
deps: ['app']
},
'modules/paypalfactory': {
deps: ['app']
},
'angular-animate': {
deps: ['app']
},
//'modules/ngAutocomplete': {
// deps: ['app']
//},
'modules/bootstrap-select.min': {
deps: ['app']
},
//modules end
//***********Angular Common*****************
'app': {
deps: ['angular',
'angular-route',
'angular-resource',
'libs/Base64',
'libs/moment',
'modules/common',
'angular-file-upload']//,
//'modules/ngAutocomplete']
},
'routes': {
deps: ['app']
},
//Angular Common ends
//***********Angular Controllers***********
'controllers/manageEbayScheduledInventoryController': {
deps: ['app']
},
'jsapi': {
deps: ['app']
},
//'controllers/googleChartController': {
// deps: ['app', 'libs/jsapi']
//},
//Angular Controller ends
//***********Angular Services*************
'services/manageEbayScheduledInventoryService': {
deps: ['app']
},
//Angular Utility Services Ends
//Angular Filters
'filters/ellipsis': {
deps: ['app']
},
//Angular Filters ends
//Angular Directives
'directives/passwordValidate': {
deps: ['app']
},
}
},
// Including all of the modules to allow concencation and minification for deployment
[
//*************Jquery*****************'
'jquery', 'libs/moment', 'jquery.easyui.min',
//Jquery ends
//************bootstrap**************
'bootstrap', 'javascripts/theme', 'libs/shoppingCart',
//bootstrap ends
//***********plugins*****************
/*'javascripts/plugins/msdropdown/jquery.dd',*/ 'javascripts/plugins/select2/select2', 'javascripts/JsCookies', 'javascripts/plugins/bootbox/bootbox.min',
'javascripts/plugins/FlowJs/flow', 'javascripts/plugins/FlowJs/fusty-flow', 'javascripts/plugins/FlowJs/fusty-flow-factory',
'javascripts/plugins/validate/jquery.validate.min', 'javascripts/plugins/timeago/jquery.timeago','ckeditor',
//plugins end
//***********modules*****************
'toastr', 'modules/resettableForm', 'modules/angular-gettext', 'modules/angular-multi-select', 'modules/common', 'modules/logger',
'modules/ui-bootstrap-tpls-0.9.0', 'modules/bootstrap.dialog', 'modules/translations', 'ngPopover', //'modules/SharedServices',
'modules/ng-flow', 'en', 'de', 'fr', 'hi', 'ru', //'modules/tr',
'modules/paypalfactory', 'modules/loading-bar', 'angular-animate', 'modules/bootstrap-select.min', 'angular-file-upload', //'ng-infinite-scroll.min', //'modules/ngAutocomplete',
//modules end
//***********Angular Common*****************
'app', 'routes', 'jsapi',
//Angular Common ends
//***********Angular Controllers***********'controllers/supplierController',
'controllers/manageEbayScheduledInventoryController',
//Angular Controller ends
//***********Angular Services*************'services/supplierService','services/uploadManagerService','services/createPurchaseOrderService',
'services/manageEbayScheduledInventoryService',
//Angular Services ends
//Angular Utility Services Starts
'services/sortingService',
//Angular Utility Services Ends
//Angular filters
'filters/ellipsis', 'filters/currency',
//Angular filters ends
//Angular Directive
'directives/passwordValidate', 'directives/focus', 'directives/mypopover', 'directives/priceBox', 'directives/onDragStart'
],
function () {
angular.bootstrap(document, ['app']);
}
);
In reuire.js you can find how dependecy is working
'javascripts/plugins/timeago/jquery.timeago': {
deps: ['javascripts/theme']
},
Here javascripts/plugins/timeago/jquery.timeago depends on 'javascripts/theme'
You can refer this link also it is a very good example
Here is the deal. I have a problem with using ui-bootstrap-tpls directives namely "pagination". Library is connected successfully in requirejs, you can see in the haed, but directive is not working.
<script type="text/javascript" data-requiremodule="angularBootstrap" src="/components/angular-bootstrap/ui-bootstrap-tpls.js">
<div ng-controller="myController">
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
</div>
here is requirejs:
requirejs.config({
baseUrl: '/',
paths: {
'angular': 'components/angular/angular',
'angularRoute': 'components/angular-route/angular-route',
'angularBootstrap': 'components/angular-bootstrap/ui-bootstrap-tpls',
},
shim: {
'angular': {
deps: [ 'jquery' ],
exports: 'angular'
},
'angularRoute': {
deps: [ 'angular' ]
},
'angularBootstrap': {
deps: ['angular']
},
}
});
and app.js:
define(['angular', 'angularBootstrap', 'angularRoute'], function (angular) {
'use strict';
return angular.module('myModule', ['ngRoute']);
});
app.js should be like this:
define(['angular', 'angularBootstrap', 'angularRoute'], function (angular) {
'use strict';
return angular.module('myModule', ['ngRoute','ui.bootstrap']);
});
in return angular.module it was necessary to add 'ui.bootstrap'