I'm having problems when trying to use multiple modules in Angular JS. I cannot use more than 1 module, it seems like Angular doesn't recognize the code. I'm willing to use a tree view + flex grid on an application but the tree doesn't shows up, just the flex grid. I'm pretty sure I'm missing something on moduling but I don't know what... Here is the code:
index.htm
<html ng-app="app">
<script src="js/angular/angular.js"></script>
<script src="js/main.js"></script>
<!-- Flex Grid !-->
<script src="js/flexygrid/controllers/FlexControllers.js"></script>
<script src="js/flexygrid/directives/FlexDirectives.js"></script>
<script src="js/flexygrid/misc/FlexBlock.js"></script>
<!-- Tree !-->
<script src="js/tree/controllers/TreeControllers.js"></script>
<script src="js/tree/directives/TreeDirectives.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
main.js
var app = angular.module('app',['flexyLayout.directives','tree.controller']);
FlexControllers.js
function (angular) {
"use strict";
angular.module('flexyLayout.mediator', ['flexyLayout.block']).
controller('mediatorCtrl', ['$scope', '$element', '$attrs', 'Block', function (scope, element, attrs, Block) {
...
}
FlexDirectives.js
function (angular) {
"use strict";
angular.module('flexyLayout.directives', ['flexyLayout.mediator'])
.directive('flexyLayout', function () {
...
})(angular);
FlexBlock.js
(function (angular) {
"use strict";
angular.module('flexyLayout.block', [])
.provider('Block', function () {
...
}
})(angular);
TreeControllers.js
(function(){
angular.module('tree.controller',['angularTreeview']).controller('TreeCtrl', function($scope){
...
}
})();
TreeDirectives.js
(function(){
angular.module('angularTreeview',[]).directive('treeModel',function($compile){
...
}
})();
Related
(function () {
'use strict';
function myController($scope, $http) {
var vm = this;
$scope.text = "Delhi";
}
myController.$inject = ["$scope", "$http"];
angular
.module("app")
.controller("myController", myController);
})();
And My Html Code is here
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<p>I am from {{text}}</p>
</div>
</body>
</html>
But I my project is not working as expected. Gives below error
https://www.dropbox.com/s/itd5ryar56zqcxn/Screenshot%202016-08-06%2023.46.04.png?dl=0
angular.js:68 Uncaught Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=app
There are few issues with the code,
(i) You need to define the module initially and then inject the controller
(ii) You forgot to add the empty dependencies to the module '[]'
(function () {
"use strict";
angular
.module("app",[])
.controller("myController", myController);
function myController($scope, $http) {
var vm = this;
$scope.text = "Delhi";
}
myController.$inject = ["$scope", "$http"];
}());
Here is the working App
I am writing a website and I need two AngularJs modules: ngRoute and ui.bootstrap.
Now, my script for ngRoute is
var ngRouteApp=angular.module('ngRouteApp',["ngRoute"]);
ngRouteApp.config(['$routeProvider', function($routeProvider){
$routeProvider
... some stuff here ...
}]);
while for bootstrap is
var bootstrapApp = angular.module('bootstrapApp', ['ui.bootstrap']);
bootstrapApp.controller('CarouselCtrl', CarouselCtrl);
function CarouselCtrl($scope){
...some stuff here...
};
Now I suppose I could combine the two
angular.module("allApps", ["ngRouteApp", "bootstrapApp"]);
and into the HTML I can write
<html ng-app="allApps">
but if I do, it doesn't work. I can't see anything.
Define an angular module with all the dependences you need.
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
... some stuff here ...
}]);
Then use var appto define controllers.
app.controller('CarouselCtrl', [ '$scope', function ($scope){
...some stuff here...
}]);
html
<html ng-app="allApps">
user3130401 is correct, thats the proper way to do it, however, you haven't included ngRoute in your html page. Running your plunkr the console prints:
Uncaught Error: [$injector:modulerr] Failed to instantiate module allApps due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available!
As soon as you add the ng-route code, it works fine.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
Here is your working example.
I separated the apps as you wanted using best practices.
As you will see i'm not using the appvariable as a don't consider it best practice. Whatever you place in a javascript file outside of an iffy function is made public. That's why i prefer to use iffy functions and place all angular definitions together at the end of the file.
Also note in index.html the order i place the scripts.
<script src="ngRouteApp.js"></script>
<script src="app.js"></script>
app.js
(function(angular) {
"use strict";
function carouselDemoCtrl($scope) {
var vm = $scope;
vm.myInterval = 3000;
vm.noWrapSlides = false;
vm.activeSlide = 0;
vm.slides = [{
image: 'http://lorempixel.com/400/200/'
}, {
image: 'http://lorempixel.com/400/200/food'
}, {
image: 'http://lorempixel.com/400/200/sports'
}, {
image: 'http://lorempixel.com/400/200/people'
}];
}
carouselDemoCtrl.$inject = ["$scope"];
angular
.module("allApps", ["ngRoute", "ui.bootstrap"])
.controller("carouselDemoCtrl", carouselDemoCtrl);
})(angular);
ngRouteApp.js
(function(angular) {
"use strict";
function configs($routeProvider) {
$routeProvider
.when('/', {
template: ''
})
.when('/gallery', {
templateUrl: 'pages/gallery.html'
})
.when('/actorBio', {
templateUrl: 'pages/actorBio.html'
})
.when('/contatti', {
templateUrl: 'pages/contatti'
})
.otherwise({
redirectTo: '/'
});
}
configs.$inject = ["$routeProvider"];
angular
.module("ngRouteApp", ["ngRoute"])
})(angular);
index.html
<!doctype html>
<html ng-app="allApps">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="ngRouteApp.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
Write your name here
<input type="text" ng-model="name"> Hi {{name}} Those are your photos:
<div ng-controller="carouselDemoCtrl" id="slides_control">
<div>
<uib-carousel active="active" interval="myInterval">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
I am have trying to fix this but not able to find a solution since a long time. I an angular newbie and trying to make my website home an angular app. The angular app has a controller and 2-3 directives. In the head section of the page I have:
Home.cshtml:
<head>
//Some other stuff....
<script src="/Scripts/angular.min.js" type="text/javascript"></script>
<script src="/Scripts/myapp.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HomeController">
<page-tile-grid></page-tile-grid>
</div>
</body>
And myapp.js has
var myapp= angular.module('myapp', [])
.controller("HomeController", function($scope){......})
.directive('page-tile-grid', function () {....})
.directive('page-tiles', function () {....})
.directive('page-tile-info', function () {....})
I see no error on the console. But template in the directive does not load. And see this warning on the Batarang Angular console:
Module "myapp" was created but never loaded.
What if you try something like:
var app = angular.module('myapp', []);
app.controller('HomeCtrl', function($scope) {
$scope.title = "Homepage";
...
});
app.controller('AboutCtrl', function($scope) {
$scope.title = "About";
...
});
I am trying to use the angular-local-storage module (https://github.com/grevory/angular-local-storage), version 0.2.2 (according to bower) in a service within my application. I seem to be having issues with it when I call it within a service, but it works fine when I put it inside a controller.
I have it configured like this:
angular.module('myApp', [ 'LocalStorageModule' ])
.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('test')
.setStorageType('localStorage');
})...
And then in my service, I have it like this (simplified, for testing purposes):
angular.module('myApp')
.service('UserService', [ 'localStorageService',
function(localStorageService) {
return {
save: function() {
localStorageService.set('user', 'me');
}
};
}]);
This code yields an error of:
TypeError: localStorageService.set is not a function
On the other hand, if I place the exact same code into a controller (indeed, the controller who calls this service), everything works as expected. Does angular-local-storage not work within services?
Thanks in advance!
It does work for me with minor tweaks. See below code snippet.
angular.module('myApp', [ 'LocalStorageModule' ])
.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('test')
.setStorageType('localStorage');
})
.service('UserService', [ 'localStorageService',
function(localStorageService) {
return {
save: function() {
localStorageService.set('user', 'me');
}
};
}])
.controller('MainCtrl', function($scope, UserService){
$scope.test = function(){
console.debug('save called');
UserService.save();
};
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="MainCtrl">
<button ng-click="test()">Test</button>
</div>
<script type="text/ng-template" id="home.html">
Lorem ipsum
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
</body>
</html>
I was using angular growl, which is quite good for showing message.
(https://github.com/marcorinck/angular-growl)
It OK to add a message in a controller, but when add a message in a directive, it's not show, why?
Here is my test code.
a.html
<?xml version="1.0" encoding="UTF-8" ?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/marcorinck/angular-growl/master/src/growl.css" />
<script type="text/javascript" src="../lib/angular/angular.js"></script>
<script type="text/javascript" src="../lib/angular-growl/angular-growl.js"> </script>
<script type="text/javascript" src="../lib/angular-route/angular-route.js"> </script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<div ng-view=""></div>
<div growl="" class='growl-container'></div>
</body>
</html>
a.js
'use strict';
var module = angular.module('a', ['ngRoute', 'angular-growl']);
module.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl',
template: '<button aaa>aaaa</button>'
});
}]);
module.controller('IndexCtrl', ['growl', function (growl) {
growl.addErrorMessage('haha');
}]);
module.directive('aaa', ['growl', function (growl) {
return {
restrict: 'A',
scope: {},
link: function (scope, element, attrs) {
element.bind('click', function (e) {
console.log('aaa');
growl.addErrorMessage('aaa');
growl.addErrorMessage('bbb');
});
}
};
}]);
var $html = angular.element(document);
$html.ready(function () {
angular.bootstrap($html, ['a']);
$html.addClass('ng-app');
});
Whenever you have events outside of angular that change angular scopes you need to use $apply to inform angular that changes are made and to run a digest cycle.
If you were to use ng-click instead you wouldn't run into this problem.
To resolve with current external event code:
element.bind('click', function (e) {
scope.$apply(function(){
growl.addErrorMessage('aaa');
})
});