could you please tell me how to bind click event using require js + angularjs
I try to bind the click event but it is bind the click event
Here is my code
index.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<head>
<link type="text/css" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet" />
</head>
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script data-main="main" src="lib/require.js"></script>
</body>
</html>
main.js
requirejs.config({
paths: {
ionic:'lib/ionic.bundle'
},
shim: {
ionic : {exports : 'ionic'}
}, priority: [
'ionic'
],
deps: [
'bootstrap'
]
});
bootstrap.js
/*global define, require, console, cordova, navigator */
define(['ionic', 'app', 'routes'], function (ionic, angular, app) {
'use strict';
var $html,
onDeviceReady = function () {
angular.bootstrap(document, [app.name]);
};
document.addEventListener("deviceready", onDeviceReady, false);
if (typeof cordova === 'undefined') {
$html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function () {
try {
angular.bootstrap(document, [app.name]);
} catch (e) {
console.error(e.stack || e.message || e);
}
});
}
});
app.js
/*global define, require */
define(['ionic'],
function (angular) {
'use strict';
var app = angular.module('app', [
'ionic']);
return app;
});
You have a few bugs in your code... too many too list them all. See Plunker for the corrections.
The module ionic should be exported as angular.
requirejs.config({
paths: {
ionic:'lib/ionic.bundle'
},
shim: {
ionic : {exports : 'angular'}
}, priority: [
'ionic'
],
deps: [
'bootstrap'
]
});
Ionic/Angular must be loaded first - or angular can't initialize itself.
In the routes you have to reference the controller by name - not by location
/*global define, require */
define(['app'], function (app) {
'use strict';
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html",
controller: 'controllers/LoginCtrl' // <-- should be 'LoginCtrl'
})
$urlRouterProvider.otherwise("/login");
}]);
});
Related
I have taken the sample project from the cordova-plugin-hotspot and tried building it into android application. But when I'm using that sample, I'm getting the module not defined error but I checked that the module has been defined in the html and in angular.module. So please someone help me to figure out what is the actual error. Below is that sample program.
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app = "starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable" ng-controller = "HotSpotCtrl">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
app.js
function onDeviceReady() {
// bootstrap app:
angular.bootstrap(document, ['starter']);
}
if (window.cordova) {
document.addEventListener('deviceready', onDeviceReady, false);
} else {
onDeviceReady();
}
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.constant('$ionicLoadingConfig', {
template: '<ion-spinner></ion-spinner> <br> Loading '
})
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// places them at the bottom for all OS
$ionicConfigProvider.tabs.position('bottom');
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.hotspot', {
url: '/hotspot',
views: {
'tab-hotspot': {
templateUrl: 'templates/tab-hotspot.html',
controller: 'HotSpotCtrl'
}
}
})
.state('tab.devices', {
url: '/devices',
views: {
'tab-devices': {
templateUrl: 'templates/tab-devices.html',
controller: 'DevicesCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/hotspot');
});
controller.js
angular.module('starter.controllers', [])
.controller('HotSpotCtrl', function ($scope, $ionicLoading, $timeout) {
var init = function () {
$ionicLoading.show();
// default to WPA2PSK
$scope.config = {
mode: 'WPA2PSK'
};
cordova.plugins.hotspot.isHotspotEnabled(function (enabled) {
$scope.isHotSpotActive = enabled;
$ionicLoading.hide();
}
);
};
// init controllers
init();
// API
$scope.start = function () {
$ionicLoading.show();
cordova.plugins.hotspot.createHotspot(
$scope.config.ssid, $scope.config.mode, $scope.config.password,
function () {
// delay UI refresh
$timeout(function () {
$ionicLoading.hide();
init();
}, 500);
}, function () {
$ionicLoading.hide();
alert('Hotspot creation failed');
}
);
};
$scope.stop = function () {
$ionicLoading.show();
cordova.plugins.hotspot.stopHotspot(
function () {
$ionicLoading.hide();
$scope.isHotSpotActive = false;
init();
}, function () {
alert('AP disabling failed');
}
);
};
})
.controller('DevicesCtrl', function ($scope) {
var init = function () {
cordova.plugins.hotspot.isHotspotEnabled(function (enabled) {
$scope.isHotSpotActive = enabled;
if (enabled) {
$scope.status = 'Reading devices ...';
cordova.plugins.hotspot.getAllHotspotDevices(
function (response) {
$scope.status = false;
$scope.devices = response;
}, function () {
$scope.status = false;
alert('Device listing failed.');
}
);
}
}, function () {
$scope.status = false;
}
);
};
// init controllers
init();
// API
$scope.refresh = function () {
init()
};
});
I am working on an application in which I am trying to load angular JS using require JS. My click event is not working in my code. Can someone pls help :
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<body class="internal" >
<div id="contentContainer" class="stratum" data-ng-controller="appController">
<div id="main-bar" class="row">
<div id="go" class="column column.one-quarter-">
<div class="btnLabel"><label for="submitBtn"></label></div>
<div><button id="submitBtn" ng-click="getBarChartData()"> GO</button></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var contextPath = "<%= request.getContextPath() %>";
var appUrl = "<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>";
var isSessionExpired = false;
</script>
<!-- JavaScripts Require JS Library and App JS Files -->
<script type="text/javascript" data-main="<%=request.getContextPath() %>/resources/js/app/uptimeReport.js" src="<%=request.getContextPath() %>/resources/js/libs/requirejs/require.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/app/main-built.js"></script>
</body>
</html>
App.js
/*global require*/
'use strict';
require([
'angular'
], function (angular) {
require([
'controller/environmentController'
], function (appCtrl) {
angular.
module('myApp',[]).
controller('appController', appCtrl);
angular.bootstrap(document, ['myApp']);
console.log("in App.js");
});
});
uptimeReport.js
/*global require*/
'use strict';
requirejs.config(
{
/** set up any additional paths that are outside of your application base * */
paths:
{
angular: contextPath + '/resources/js/libs/angularJS/angular',
},
/**
* The following is not required in this example, but it is an example of
* how to make non-AMD java script compatible with require
*/
shim: {
angular: {
exports: 'angular'
}
},
deps: ['app']
});
controller/environmentController.js
/*global define*/
'use strict';
/**
* The main controller for the app. The controller:
* - retrieves and persist the model via the todoStorage service
* - exposes the model to the template and provides event handlers
*/
define([
'angular'
], function (angular) {
return ['$scope', '$http',
function($scope, $http) {
console.log("in controller123.js");
var businessUrl="http://localhost:8080/UptimeReport/services/getBusinessAreas";
var appUrl="http://localhost:8080/UptimeReport/services/getApplications";
var envUrl="http://localhost:8080/UptimeReport/services/getEnvironments";
$http.get(businessUrl).then(function(response) {
$scope.business = response.data;
});
$http.get(appUrl).then(function(response) {
$scope.application = response.data;
});
$http.get(envUrl).then(function(response) {
$scope.environment = response.data;
});
}];
});
you should bind the getBarChartData function in your $scope
to be able to use event bind
ng-click="getBarChartData()"
if you did not bind the function to the $scope you can use it like
ng-click="Controller.getBarChartData()"
I'm using ngCordova "Network Information" plugin to get the online/offline status of the host device. I have followed this tutorial (which excellent, as are his other posts):
Josh Morony - Monitoring Online and Offline States in an Ionic Application
I have implemented the "ConnectivityMonitor" service as described in the article.
In one of my controllers/templates it works perfectly:
(function() {
'use strict';
angular
.module('myApp')
.controller('ResearchController', ResearchController);
ResearchController.$inject = ['$scope', '$stateParams', 'MyApi', 'ConnectivityMonitor'];
function ResearchController($scope, $stateParams, MyApi, ConnectivityMonitor) {
var vm = this;
vm.isOnline = ConnectivityMonitor.isOnline();
...
}
<ion-view title="RESEARCH" ng-controller="ResearchController as vm" >
<ion-content>
<div>
ONLINE: {{vm.isOnline}}
</div>
</ion-content>
</ion-view>
Result:
ONLINE: true
However, in another controller/template this does not work and I have been at this for hours and hours:
(function() {
'use strict';
angular
.module('MyApp')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope','ConnectivityMonitor'];
function HomeController($scope, ConnectivityMonitor) {
var vm = this;
vm.isOnline = ConnectivityMonitor.isOnline();
activate();
////////////////
function activate() {
}
}
})();
<ion-content class="background" ng-controller="HomeController as vm">
<p>ONLINE: {{vm.isOnline}}</p>
</ion-content>
Result:
ONLINE: {{vm.isOnline}}
Here ^^^ it seems that angular is not performing the databinding. I have all of my relevant controllers in index.html, as well as angularjs references.
Here is my implementation of the "ConnectivityMonitor" service:
(function() {
'use strict';
// http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/
angular.module('MyApp').factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', connectivityMonitor]);
function connectivityMonitor($rootScope, $cordovaNetwork) {
return {
isOnline: function () {
if (ionic.Platform.isWebView()) {
return $cordovaNetwork.isOnline();
} else {
return navigator.onLine;
}
},
isOffline: function () {
if (ionic.Platform.isWebView()) {
return !$cordovaNetwork.isOnline();
} else {
return !navigator.onLine;
}
}
};
}
}
)();
Any idea why this would not be working? I'm new to AngularJS and Ionic so I'm thinking there is some nuance or convention that I'm overlooking. Thanks.
[ UPDATE 1 ]
I recreated this issue in an ionic starter app. There are two templates: Home.html and Workshere.html, with respective controllers. The online status is correctly displayed in the "Workshere" state, and is incorrect in the "Home" state. Also, adding the HomeController to Home.html (via ng-controller) seems to kill all interactivity on that page, can't even click the "Go to Workshere" link.
Home.html and home state is the default state for the MyApp. I'm starting to think that this is a timing issue an ConnectivityMonitor is not ready when the home state loads.
Code follows:
Home.html
<ion-view>
<ion-content ng-controller="HomeController">
<br/><br/><br/>
<p>HOME</p>
<p>ONLINE: {{vm}}</p>
<br/><br/>
<a ui-sref="workshere">Go to WorksHere</a>
</ion-content>
</ion-view>
home.controller.js
(function() {
'use strict';
angular
.module('myApp')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope','ConnectivityMonitor'];
function HomeController($scope, ConnectivityMonitor) {
$scope.vm = ConnectivityMonitor.isOnline();
activate();
////////////////
function activate() {
}
}
})();
Workshere.html
<ion-view ng-controller="WorkshereController as vm" >
<ion-content>
<br/><br/><br/>
<p>WORKS HERE</p>
<p>ONLINE: {{vm.isOnline}}</p>
<br/><br/>
<a ui-sref="home">Go to Home</a>
</ion-content>
</ion-view>
workshere.controller.js
(function() {
'use strict';
angular
.module('myApp')
.controller('WorkshereController', WorkshereController);
WorkshereController.$inject = ['$scope', 'ConnectivityMonitor'];
function WorkshereController($scope, ConnectivityMonitor) {
var vm = this;
vm.isOnline = ConnectivityMonitor.isOnline();
activate();
////////////////
function activate() {
}
}
})();
app.js
angular.module('myApp', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('workshere', {
url: 'workshere',
templateUrl: 'workshere.html'
});
$urlRouterProvider.otherwise('/');
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/connectivityMonitor.js"></script>
<script src="js/home.controller.js"></script>
<script src="js/workshere.controller.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
ConnectivityMonitor.js
(function() {
'use strict';
// http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/
angular.module('myApp').factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', connectivityMonitor]);
function connectivityMonitor($rootScope, $cordovaNetwork) {
return {
isOnline: function () {
if (ionic.Platform.isWebView()) {
return $cordovaNetwork.isOnline();
} else {
return navigator.onLine;
}
},
isOffline: function () {
if (ionic.Platform.isWebView()) {
return !$cordovaNetwork.isOnline();
} else {
return !navigator.onLine;
}
},
startWatching: function(){
if(ionic.Platform.isWebView()){
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
console.log("went online");
});
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("went offline");
});
}
else {
window.addEventListener("online", function(e) {
console.log("went online");
}, false);
window.addEventListener("offline", function(e) {
console.log("went offline");
}, false);
}
}
};
}
}
)();
Please see comments at the "UPDATE 1" marker.
Why don't you try it this way:
function HomeController($scope, ConnectivityMonitor) {
$scope.vm = ConnectivityMonitor.isOnline();
}
and for view
<ion-content class="background">
<p>ONLINE: {{vm}}</p>
</ion-content>
I had my angularjs app setup in local and everything was working fine till I upload my code to the staging server. I now have issue with dependencies that are not respected but I can't see why. I guess it was working in local because it was loading the library faster. I now modified my app to try to fix this issue but can't manage to make it work.
My application is loading a single page app, composed of 3 views (main, map and map-data). I'm using AngularJS modules structure to launch this app. Here is my directory structure:
The index.html is pretty basic:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Map Application</title>
<link rel="icon" sizes="16x16" href="/favicon.ico" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ map_key }}&sensor=false"></script>
<script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script>
<link rel="stylesheet" href="/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<!-- Content -->
<div id="content" data-ui-view></div>
<script>
// obtain requirejs config
require(['require', 'js/require-config'], function (require, config) {
// set cache beater
config.urlArgs = 'bust=v{{ version }}';
// update global require config
window.require.config(config);
// load app
require(['main']);
});
</script>
</body>
</html>
Then requirejs-config.js:
if (typeof define !== 'function') {
// to be able to require file from node
var define = require('amdefine')(module);
}
define({
baseUrl: 'js', // Relative to index
paths: {
'jquery': 'bower_components/jquery/dist/jquery.min',
'underscore': 'bower_components/underscore/underscore-min',
'domReady': 'bower_components/requirejs-domready/domReady',
'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser',
'async': 'bower_components/requirejs-plugins/src/async',
'goog': 'bower_components/requirejs-plugins/src/goog',
'angular': 'bower_components/angular/angular',
'ngResource': 'bower_components/angular-resource/angular-resource',
'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
'moment': 'bower_components/momentjs/moment',
'moment-timezone': 'bower_components/moment-timezone/moment-timezone',
'moment-duration-format': 'bower_components/moment-duration-format/lib/moment-duration-format'
},
shim: {
'angular': {
exports: 'angular'
},
'ngResource': ['angular'],
'ui.router' : ['angular']
}
});
Then the main.js:
/**
* bootstraps angular onto the window.document node
* NOTE: the ng-app attribute should not be on the index.html when using ng.bootstrap
*/
define([
'require',
'angular',
'./app'
], function (require, angular) {
'use strict';
/**
* place operations that need to initialize prior to app start here
* using the `run` function on the top-level module
*/
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
});
Then the app.js:
/**
* loads sub modules and wraps them up into the main module
* this should be used for top-level module definitions only
*/
define([
'angular',
'ui.router',
'./config',
'./modules/map/index'
], function (ng) {
'use strict';
return ng.module('app', [
'app.constants',
'app.map',
'ui.router'
]).config(['$urlRouterProvider', function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}]);
});
Here you can see that the app.js depends on the ./modules/map/index, where I'm loading all available controllers:
/**
* Loader, contains list of Controllers module components
*/
define([
'./controllers/mainCtrl',
'./controllers/mapCtrl',
'./controllers/mapDataCtrl'
], function(){});
Each controller are requesting the same kind of module, here is mapDataCtrl.js which is the one that is triggered by /:
/**
* Map Data controller definition
*
* #scope Controllers
*/
define(['./../module', 'moment'], function (controllers, moment) {
'use strict';
controllers.controller('MapDataController', ['$scope', 'MapService', function ($scope, MapService)
{
var now = moment();
$scope.data = {};
$scope.data.last_update = now.valueOf();
$scope.data.time_range = '<time range>';
$scope.data.times = [];
var point = $scope.$parent.map.center;
MapService.getStatsFromPosition(point.latitude, point.longitude).then(function(data){
$scope.data.times = data;
});
}]);
});
As you can see, the controller is requesting module.js where the states and module name are defined:
/**
* Attach controllers to this module
* if you get 'unknown {x}Provider' errors from angular, be sure they are
* properly referenced in one of the module dependencies in the array.
* below, you can see we bring in our services and constants modules
* which avails each controller of, for example, the `config` constants object.
**/
define([
'angular',
'ui.router',
'../../config',
'underscore',
'angular-google-maps',
'./services/MapService'
], function (ng) {
'use strict';
return ng.module('app.map', [
'app.constants',
'ui.router',
'angular-google-maps'
]).config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider
.state('main', {
templateUrl: '/js/modules/map/views/main.html',
controller: 'MainController'
})
.state('main.map', {
templateUrl: '/js/modules/map/views/main.map.html',
controller: 'MapController',
resolve: {
presets: ['MapService', function(MapService){
return MapService.getPresets();
}],
courses: ['MapService', function(MapService){
return MapService.getCourses()
}]
}
})
.state('main.map.data', {
url: '/',
templateUrl: '/js/modules/map/views/main.map.data.html',
controller: 'MapDataController'
})
;
//$locationProvider.html5Mode(true);
}]);
});
It's in this file that I have an issue. I'm trying to load the module angular-google-maps because I need it in my MapCtr controller and most probably in MapDataCtrl. But I get the following message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.map due to:
Error: [$injector:modulerr] Failed to instantiate module angular-google-maps due to:
Error: [$inj...<omitted>...1)
I have no idea what I am missing, for me everything looks tied correctly. What am I missing?
UPDATE 1
I think it's because angular-google-map is not AMD compliant, so I've modified my requirejs-config.js as follow:
if (typeof define !== 'function') {
// to be able to require file from node
var define = require('amdefine')(module);
}
define({
baseUrl: 'js', // Relative to index
paths: {
...
'underscore': 'bower_components/underscore/underscore-min',
'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
...
},
shim: {
'angular': {
exports: 'angular'
},
'ngResource': ['angular'],
'ui.router' : ['angular'],
'angular-google-maps': {
deps: ["underscore"],
exports: 'angular-google-maps'
}
}
});
but I still have the same issue.
We can use an js library with require.js.There is no need to remove require.js. I still need to check why require.js config not working.
Meanwhile you can try this way.
// requirejs-config.js
define({
baseUrl: 'js', // Relative to index
paths: {
'jquery': 'bower_components/jquery/dist/jquery.min',
'underscore': 'bower_components/underscore/underscore-min',
'domReady': 'bower_components/requirejs-domready/domReady',
'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser',
'async': 'bower_components/requirejs-plugins/src/async',
'goog': 'bower_components/requirejs-plugins/src/goog',
'angular': 'bower_components/angular/angular',
'ngResource': 'bower_components/angular-resource/angular-resource',
'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
'moment': 'bower_components/momentjs/moment',
'moment-timezone': 'bower_components/moment-timezone/moment-timezone'
},
shim: {
'angular': {
exports: 'angular'
},
'ngResource': ['angular'],
'ui.router' : ['angular']
}
});
// google-map.js
define(['underscore', 'angular-google-maps'], function(){
});
And then requiring the module each time I need the map:
require(['google-map'], function(){
});
https://github.com/angular-ui/angular-google-maps/issues/390
I trying to add angularjs filter with requirejs in my view, but I receive an error:
Error: $injector:unpr Unknown Provider
http://docs.angularjs.org/error/$injector/unpr?p0=localizationFilterProvider%20%3C-%20localizationFilter
Whats wrong?
My Files:
index.html
<!DOCTYPE html>
<html>
<head>
<script data-main="/static/js/application/main" src="/static/js/libs/require.min.js"></script>
</head>
<body>
<div class="page" ng-view></div>
</body>
</html>
app.js
'use strict';
define(
[
'angularAMD',
'angular-route',
'angular-animate'
],
function (angularAMD) {
var app = angular.module('FilmOrder', ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
angularAMD.route({
templateUrl: 'static/js/application/views/success.html',
controllerUrl: 'application/controllers/Success',
controller: 'Success'
})
)
.otherwise({redirectTo: '/'});
}]);
angularAMD.bootstrap(app);
return app;
});
main.js
require.config({
baseUrl: "static/js",
paths: {
'angular': 'libs/angular.min',
'angular-route': 'libs/angular-route.min',
'angular-animate': 'libs/angular-animate.min',
'angularAMD': 'libs/angularAMD.min'
},
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate': ['angular']
},
deps: ['application/app']
});
views/success.html
<div class="success">
<div class="success_head">
{{"Пожалуйста, убедитесь в правильности указанных данных." | localization:'index'}}
</div>
</div>
filters/localization.js
'use strict'
define(['application/app'], function (app) {
app.filter('localization', function () {
return 'test';
});
});
controllers/Success.js
define(
[
'application/app',
'application/filters/localization',
'application/services/Application'
],
function (app) {
'use strict';
app.register.controller('Success', function ($scope) {
var Success = {};
$scope.Success = Success;
});
});
Your filter is called after bootstrapping so you should be using app.register instead:
filters/localization.js
define(['application/app'], function (app) {
'use strict'
app.register.filter('localization', function () {
return 'test';
});
});
If this does not help, setup a plunker and I will try to help further.