So i'm getting a Error: [$injector:unpr] when I try and inject $modal into my controller.
here is what I have:
var controllers = angular.module("controllers", ['services', 'ngCookies','ngStorage','ui.bootstrap', 'ngRoute']);
controllers.controller("MainController", ['$scope', '$http', '$location', 'configurationData', 'dashboardData', 'orderByFilter', '$cookieStore' , 'isstevenFilterArray', '$rootScope', '$modal' , function ($scope, $http, $location, configurationData, dashboardData, orderByFilter, $cookieStore, isstevenFilterArray, $rootScope, $modal)
<script src="vendor/angular-bootstrap/ui-bootstrap-tpls.js"></script>
You have to put <script src="vendor/angular-bootstrap/ui-bootstrap-tpls.js"> line at the top. After that only you should be creating module and controllers.
Try below code:
<script src="vendor/angular-bootstrap/ui-bootstrap-tpls.js"></script>
var controllers = angular.module("controllers", ['services', 'ngCookies','ngStorage','ui.bootstrap', 'ngRoute']);
controllers.controller("MainController", ['$scope', '$http', '$location', 'configurationData', 'dashboardData', 'orderByFilter', '$cookieStore' , 'isstevenFilterArray', '$rootScope', '$modal' , function ($scope, $http, $location, configurationData, dashboardData, orderByFilter, $cookieStore, isstevenFilterArray, $rootScope, $modal)
Related
Designed two pages. Cookies is not set and showing error.
CDN:
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
Main Page - Set Cookies / cookies is not set
var app = angular.module('myApp', ['ngCookies']);
app.controller('LoginCtrl', ['$cookies', '$scope', '$http', '$window', '$location', function($cookies,$scope, $http, $window, $location) {
$cookies.put('username', 'name');
}
Second Page - Get Cookies
var app = angular.module('myApp', [ 'ngTable', 'ngCookies' , 'ngResource']);
app.controller('AccountMappingCtrl', ['$scope', '$http','$cookies', 'NgTableParams', function($scope, $http, $filter, $cookies, NgTableParams) {
$scope.UsernameCookies = $cookies.get("username");
}
It is showing $cookies.get is not working.
try following
$scope.UsernameCookies = $cookies[username];
if will not work inject '$cookieStore' in your controller and try following:
$cookieStore.get('username')
I am trying to set up a modal but I keep getting this error.
var showsApp = angular.module('showsApp', ['angularUtils.directives.dirPagination'],['ui.bootstrap']);
showsApp.controller('ShowsController', ['$scope', '$http', function($scope, $http, $uibModal, $log, $document)
{
var $ctrl = this;
}]);
<div ng-app='showsApp' ng-controller='ShowsController as $ctrl' class='modal'>
<script src='js/angular/angular.js'></script>
<script src='js/angular/ui-bootstrap-tpls-2.5.0.min.js'></script>
<script src='js/angular/angular-route.js'></script>
<script src='js/jquery.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js'></script>
<script src='//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js'></script>
I am following this plunker to set it up https://plnkr.co/edit/?p=preview which I found on the angular site.
Try change
var showsApp = angular.module('showsApp',
['angularUtils.directives.dirPagination'],['ui.bootstrap']);
To
var showsApp = angular.module('showsApp',
['angularUtils.directives.dirPagination','ui.bootstrap']);
and also
showsApp.controller('ShowsController', ['$scope', '$http',
function($scope, $http, $uibModal, $log, $document)
To
showsApp.controller('ShowsController', ['$scope', '$http','$uibModal',
'$log', '$document', function($scope, $http, $uibModal, $log, $document)
Newbie in Ionic and Angular.
I am trying to develop a test app and trying to use the factory function.
I did the design from Ionic Creator and trying to add my coding in to it.
Below is my controller file.
angular.module('app.controllers', [])
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
.controller('mainPageCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('historyCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('firstrunCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('resultsCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('doctorCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('bookingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('appointmentCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
Below is my file that has the factory.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]
.factory('awesomeFactory', function($http) {
return {
GetUser: function() {
return $http.get("http addy return json object").then(function(response) {
//Process Stuff Here
return response;
});
},
}
})
);
I am getting 2 errors.
1. Error: awesomeFactory is undefined.
2. TypeError: (intermediate value).factory is not a function[Learn More]
I just don't know what I am doing wrong. Probably something small.
But any help is greatly appreciated.
Thank you in advance.
This is because here in this code
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
First you will have to do factory injection then try to create its instance
Try this
.controller('loadingCtrl', ['$scope', '$stateParams','awesomeFactory',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
new to Angular and I'm trying to inject constants from a separate file. It seems to work with the DI, but when I try to use it, I get an error: Error: undefined is not an object (evaluating 'CApiEndpoints.authUrl').
I tried dot notation and brackets as suggested in Accessing AngularJS constants but continue to get the error.
The files are included in index.html, and DI doesn't complain.
index.html
<script type="text/javascript" src="js/angular/constants.js"></script>
<script type="text/javascript" src="js/angular/app.js"></script>
js/angular/constants.js
var app = angular.module('appConst', []);
app.constant('CApiEndpoints', {
authUrl: 'http://api.example.com/v1/',
...
});
and my js/angular/app.js
var app = angular.module('app', ['ngRoute', 'ngCookies', 'appConst', 'appServices']);
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints', function($scope, $route, $http, $cookies, $routeParams, $location, CApiEndpoints){
console.log(CApiEndpoints); // shows 'undefined'
$http({
method : 'GET',
url : CApiEndpoints.authUrl + 'user_info'
})
.then(
function successCallback(response) {
console.log(response);
},
function errorCallback(response) {
console.log(response);
});
}]);
Any help would be appreciated. I've searched for the last 2 hours trying to figure this out.
While injecting dependencies inside your controller function using DI inline array annotation, they must follow the order how they are injected in array.
If you follow above rule you will come to know that you have two extra paramters inside your function, so you should remove those two unwanted ($routeParams, $location) dependency.
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints',
function($scope, $route, $http, $cookies, CApiEndpoints){
//controller code
}
]);
If you haven't added those parameter mistakenly, you should add those parameter on both side inside function & array.
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', '$routeParams', '$location', 'CApiEndpoints',
function($scope, $route, $http, $cookies, $routeParams, $location CApiEndpoints){
//controller code
}
]);
I am new to AngularJS. What is difference between a controller declared with an array parameter, listing the dependencies both as strings and as JavaScript names,
app.controller("firstController", ['$scope', '$modal', '$log', 'HttpService', 'FisrtSharedService', 'SecondSharedService', function($scope, $modal, $log, HttpService, FisrtSharedService, SecondSharedService) {
}]);
...and this form, listing just the JavaScript names?
app.controller("firstController", function($scope, $modal, $log, HttpService, FisrtSharedService, SecondSharedService){
});
Why the weird syntax in the first version?
It's used when you minified JS files. '$scope', '$modal', '$log', 'HttpService', 'FisrtSharedService', 'SecondSharedService' just declares injectors.
app.controller("firstController", ['$scope', '$modal', '$log', 'HttpService', 'FisrtSharedService', 'SecondSharedService', function($scope, $modal, $log, HttpService, FisrtSharedService, SecondSharedService) {
}]);
You also declare injectors like this:
firstController.$inject = ['$scope', '$modal', '$log', 'HttpService', 'FisrtSharedService', 'SecondSharedService'];
app.controller("firstController", function($scope, $modal, $log, HttpService, FisrtSharedService, SecondSharedService){
});