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
Related
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)
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)
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";
}]);
I am using the Angular seed (download from angular webpage) and am trying to display data from scope's controller inside the partial .
this is the code :
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'mainPage'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
controllers.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('mainPage', ['$scope',function() {
$scope.data= "this is my data";
}])
.controller('MyCtrl2', [function() {
}]);
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
... some more angular includes etc
partial1.html
<p>This is the partial for view 1. {{data}}</p>
I was expecting to see the data defined in the controller , however I simply see :
"This is the partial for view 1. {{data}}"
I think the main problem is you're not passing $scope into the controller function. You should have gotten an error on your browser console. See the working Plunker here:
http://plnkr.co/edit/ItziGeIVI5a9L56P1UCx
var myApp = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partial1.html', controller: 'mainPage'});
$routeProvider.when('/view2', {templateUrl: 'partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
myApp.controller('mainPage', ['$scope',function($scope) {
$scope.data = "this is my data";
}])
.controller('MyCtrl2', ['$scope', function($scope) {
$scope.data = "this is my data 2";
}]);
This:
controller('mainPage', ['$scope', function() {
$scope.data= "this is my data";
}])
Should be:
controller('mainPage', ['$scope', function($scope /* ADD THIS */) {
$scope.data= "this is my data";
}])
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;
}]);