Recently I have been using angular JS and it is great. However, I do not really understand the injection inside out. I have been using this pattern for almost every page and it works.
var workoutApp = angular.module('workoutApp', []);
workoutApp.controller('workoutControllers', ['$scope', '$http', '$window', function ($scope, $http, $window) {
//do something with $scope.
Now I want to implement auto complete using ngMaterial http://codepen.io/anon/pen/VeNqYB
The syntax are totally different from what I have been doing so I am really confused. I tried to inject module this way,
var workoutApp = angular.module('workoutApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
but kept getting error. Can anyone please share some thoughts on this?
According to the docs, ngMaterial has dependencies on more than just angular.
In the CDN example (https://github.com/angular/material#cdn), you can see the dependencies.
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
It sounds like the fix is as simple as adding these dependencies.
Related Issues
Installing Angular Material, "Failed to instantiate module ngMaterial" even though I'm using angular version 1.3.0
Related
I'm working on an Angular project that will require modularisation and I will be creating many small modules for it. Example: myApp.core, myApp.components.component1 myApp.components.component2 etc. each being its own file compiled into one with gulp. When I inject myApp into another project, I want to be able to consume all modules in one myApp injection, like so:
angular.module('project2', ['myApp'])
instead of:
angular.module('project2', [
'myApp.core',
'myApp.components.component1',
'myApp.components.component2'
])
Much like the Angular team have done with Material. Everything is its own module, but in order to use Angular Material, you only have to add ngMaterial as a dependency.
angular.module('project2', ['myApp']);
angular.module('myApp', ['components']);
angular.module('components', ['component1','component2','component3']);
angular.module('component1', []);
angular.module('component2', []);
angular.module('component3', []);
I am trying to fix this problem, but I can't get it to work. I want to include the NgCookies (angular-cookies) into my app, but it's just giving me an error.
I have this:
Including the JS:
<html>
<script src="js/angular1.6.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-cookies.js"></script>
</html>
Application controller:
var myApp = angular.module('myApp', ['ionic', 'ui.router', 'ngCordova', 'ngCookies']);
The controller:
myApp.controller('HomeController', ['$scope', '$cookies', function ($scope, $cookies) {
// Retrieving a cookie
$scope.userName = $cookies.userName || "";
// Setting a cookie
$cookies.userName = 'testUser';
}]);
The error I am getting is:
Error: [$injector:unpr] Unknown provider: $cookiesProvider <- $cookies <- HomeController
I am using Angular version 1.6.1 and Angular-Cookies version 1.6.1
I don't know what I am doing wrong here. I checked other questions, but the solutions given there are not working for me. I checked the versions, I checked if I include Angular before Angular-Cookies etcetera. I am out of options now.
It should work as expected if you included the same version of angular and angular-cookie as in this plunkr.
I see that you are injecting ngCordova and i believe that you are using ionic framework in your development. By default, Ionic comes bundle with angularJS and there is no need to include additional angular.js script on top of ionic and you should avoid doing so as it could lead to unexpected break.
I would suggest you to check the angular version that comes bundle with the ionic version you are using and include the same version of angular-cookies with the angular version that comes bundle with ionic.
I'm trying to use ui-bootstrap for Tabs in my application keeping the example on ui-bootstrap's website as reference. For the same I included the js files given in the exapmle which are:
Angular.js, Animate.js, Sanitize.js and BootStrap-tpls.js
But after including these JS Files I'm shown an error:
[$injector:unpr] Unknown provider: $modalStackProvider <- $modalStack
I'm not able to resolve this dependency.
You have some version mismatch.
It used to be $modal, $modalInstance, etc. in old Angular Bootstrap.
Now it is $uibModal, $uibModalInstance, etc.
So check versions of libraries that depends on Angular Bootstrap.
Consider the following code:
angular.module('app', ['app.core'])
.factory('NameService', function() {
return {
getName: function() { return 'Omar' ;}
};
});
angular.module('app.core', [])
.controller('MainController', function($scope, NameService) {
$scope.name = NameService.getName();
});
<body ng-app="app">
<div ng-controller="MainController">
{{name}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
The result displays "Omar". Note, however, that the NameService is defined in the app module which is not a dependency of the app.core module. I understand depending on each other would be circular but why does this work?
Essentially, every angular application has a single $injector. When a dependency is registered, it's signature is added to the $injector.modules Array. When a specific dependency is invoked, it's signature is retrieved from the array. The $injector does not restrict access to the modules array based on where the registration originated from; any registered dependency is available everywhere in the application.
It's a design flaw in Angular 1.x. It works because Angular keeps a global registry of all services, controllers, factories, directives, and so on. "Installing" a module means putting all its contents into the global registry, using their name as a string key. So a module can still work if it does not register its dependencies, as long as some other module does.
This is actually a pretty common source of errors in large Angular applications, because you can end up using undeclared dependencies without knowing it, so reorganising your app's module structure will break things in nonobvious ways.
Angular 2's module system is better in this respect.
I'll keep this short.
I'm very new to angularjs and I'm following one of Pluralsights tutorials.
Since the release of the tutorial there are many deprecated built ins that are driving me nuts.
I'm trying to use the following code
angularFormsApp.controller("HomeController",
function ($scope, $location, $uibModal, DataService) {
$scope.showCreateEmployeeForm = function () {
//$location.path('/newEmployeeForm');
$uibModal.open({
templateUrl: 'app/EmployeeForm/efTemplate.html',
controller: 'efController'
});
})
The tutorial is showing to use $modal (which is now deprecated)... I've tried just using $uibModal instead, and when clicking the button, the event is not firing and I'm getting the following error
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24animateCssProvider%20%3C-%20%24animateCss%20%3C-%20%24uibModalStack%20%3C-%20%24uibModal
Oh - I also installed angular using NuGet so I have the latest release
The animateCssProvider is only available for angular 1.4+, and you're using 1.3.
From bootstrap UI website:
AngularJS (requires AngularJS 1.4.x or higher, tested with 1.5.3).
0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.
Just update your angular version.