I am new in angularjs.
I try to download the csv file. So i tried to use angular sanitize and ng-csv files.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vendor/theme_files/js/jquery.min.js"></script>
</head>
<body ng-app="myApp" class="nav-md">
<div class="container body" ui-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/services/lb-services.js"></script>
<script src="vendor/angular-sanitize/angular-sanitize.js"></script>
<script src="vendor/ng-csv/ng-csv.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/offerLetterCtl.js"></script>
<script src="js/services/offerLetter.js"></script>
</body>
</html>
app.js
angular.module('myApp', ['lbServices', 'ui.router']).config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('login', {
url : '/login',
templateUrl : 'views/login.html',
controller : 'loginController'
}).state('addOfferletter', {
url : '/create_offerletter',
templateUrl : 'views/create_offer_letter.html',
controller : 'offerLetterController'
});
$urlRouterProvider.otherwise('login');
}]);
offerLetterCtl.js (controller folder)
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',
,function($scope, $location, offerLetterService) {
//mycode
}]);
offerLetter.js(Service folder)
angular.module('myApp').factory('offerLetterService', ['$q', '$timeout', '$http',
function($q, $timeout, $http,OfferLetter) {
//mycode
}]);
create_offer_letter.html
<button type="button" ng-csv="getArray()" csv-header="['Field A', 'Field B', 'Field C']" filename="test.csv">
Export
</button>
I followed this link for csv download. enter link description here
If i include this lines in controller
['ngSanitize', 'ngCsv']
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',"ngSanitize", "ngCsv"
,function($scope, $location, offerLetterService, ngSanitize, ngCsv) {
$scope.filename = "test";
}]);
Error Details:
Error: [$injector:unpr] Unknown provider: ngSanitizeProvider <- ngSanitize <- offerLetterController
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=ngSanitizeProvider%20%3C-%20ngSanitize%20%3C-"<div class="container body ng-scope" ui-view="">"fferLetterController
You are not adding the ngSanatize module to your app in app.js I think. Try like this:
angular.module('myApp', ['lbServices', 'ui.router', 'ngSanitize']).config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
This is wrong at least:
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',"ngSanitize", "ngCsv" ,function($scope, $location, offerLetterService) {
Your mistake is that you have 5 services in the first part, and you only really inject 3. If you align those it would help:
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',"ngSanitize", "ngCsv" ,function($scope, $location, offerLetterService, ngSanitize, ngCsv) {
Next to that, this is not right either:
angular.module('myApp').factory('offerLetterService', ['$q', '$timeout', '$http',
function($q, $timeout, $http,OfferLetter) {
You are defining the factory, called offerLetterService, you don't want to insert it in there I think?
Removed the injection from controller. This should work!
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService'
,function($scope, $location, offerLetterService) {
$scope.filename = "test";
}]);
Related
I am trying to use a Service (rates service) in my Controller (rates controller) and get an "Error: Unknown Provider". Does anyone have any suggestions on how to fix this? Cheers!
rates.contoller.js
(function () {
'use strict';
angular.module('print.module').controller('ratesCtrl', ['$http', '$scope', '$rootScope', 'ratesService', function ($http, $scope, $rootScope, ratesService) {
ratesService.getRatesDataService();
}]
)})();
rates.service.js
(function () {
'use strict';
angular.module('print.module').service('ratesService', ['$scope', '$http', function ($scope, $http) {
vm = this;
function getRatesDataService() {
console.log("test");
return this.$http.get("api/Rates/GetRates");
}
//}
}]
)
})();
print.module.js
(function () {
"use strict";
var module = angular.module('print.module', [
'ui.router',
]);
module.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/print');
$stateProvider
.state('print', {
url: '/print',
templateUrl: "Public/scripts/sharedViews/printNavbar.html"
})
.state('print.rates', {
url: "/rates",
controller: 'ratesCtrl',
templateUrl: "Public/scripts/rates/rates.view.html",
controllerAs: 'vm'
})
$locationProvider.html5Mode(true);
});
}());
view (scripts tags only for reference)
<body ng-app="print.module">
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="~/public/scripts/print.module.js"></script>
<script type="text/javascript" src="~/public/scripts/books/books.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/terms/terms.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/rates/rates.service.js"></script>
<script type="text/javascript" src="~/public/scripts/rates/rates.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/services/modals.service.js"></script>
</body>
You can't use $scope inside Service
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)
My HTML looks this:
<html ng-app="myApp" ng-controller="myController">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
******{{randomValue}}*******
</body>
</html>
My Javascript looks like this:
var myApp = angular.module('myApp', [
'ui.bootstrap',
'ngSanitize'
]);
myApp.config(['$stateProvide', '$httpProvider', function config($stateProvider, $httpProvider) {
}]);
myApp.run(['$location', '$timeout', '$rootScope', function($location, $timeout, $rootScope) {
}]);
myApp.controller('myController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.randomValue = "Hello World!";
}]);
I am getting an angular error in the browser console that leads me to the Angular Website
HI i m try to show routing and multiple view in my anguar js code but there is not show can u please help me what is the problum and how to solve it.
Please Help me .
My Code it this
HTML File Index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<title>New Page Angular</title>
<script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
App.js Code
var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']);
phonecatApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phone'
});
}
]);
Contrller .js code
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
To complete code is here Plunker
You missed
in your index.html and you've got few spelling errors phones instead of phone ...
please see fixed version here http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview
var phonecatApp = angular.module('phonecatApp', ['ngRoute']);
phonecatApp.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'phoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'phoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
I am new in AngularJS. I am trying to learn AngularJS from this site (https://docs.angularjs.org/tutorial/step_07). My code is as below
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Angular Project</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
controllers.js
var phonecatControllers = angular.module('phonecatApp', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
My code is inside angu folder of htdocs of my computer . I am trying to browse below URL
http://localhost/angu/#/phones
But I am getting white blank page. Could anyone say where is the problem ??
You controller.js should have phonecatControllers module name instead of phonecatApp, So currently what happening is you are flushing the phonecatApp module by declaring it in controller.js again.
Technically you should be using phonecatControllers name there & you console must have showing an error $injector moduler error as you haven't declared the phonecatControllers module which has already injected in phonecatApp module.
Controller.js
var phonecatControllers = angular.module('phonecatControllers', []); //<=-change here
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);