I'm developing html 5 mobile app using visual studio cordova, angular js and ionic framework. In that, I need to save some values to localStorage. I followed some articles but there is an error throwing when saving values to the local storage.
<!doctype html>
<html ng-app="myApp">
<head> <title>Test app</title></head>
<body ng-app="myApp" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-local-storage.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script>
var myApp = angular.module('myApp', ['ionic', 'LocalStorageModule']);
myApp.controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
</script>
<div>
<input type="button" ng-click="test()" value="add new">
</div>
</body>
</html>
It throws ReferenceError: isUndefined is not defined at Object.addToLocalStorage
Any idea??
Here is a plunker working with your application plnkr
var myApp = angular.module('myApp', ['ionic' ,'LocalStorageModule']).config(function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('cars')
.setStorageType('localStorage')
.setNotify(false, false);
}).controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
Related
This is my Html. I have given paths like this
<html>
<head>
<script src="../../Content/Scripts/Script/angular.min.js"></script>
<script src="../../Content/Scripts/Script/Chart.js"></script>
<script src="../../Content/Scripts/Script/angular-charts.min.js"></script>
<script src="../../Content/Scripts/Script/ui-bootstrap-tpls.js"> </script>
<script src="../../Content/Scripts/Controllers/graphController.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="financeAnalyticsController" class="support-section">
{{a}}
</div>
</body>
</html>
In my script I wrote
var app = angular.module("app", [ "chart.js","ui.bootstrap", "ui.bootstrap.typeahead",]);
app.controller('financeAnalyticsController', function ($scope, $http, $filter) {
$scope.a="testing";
});
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
I guess you are using a different version of angular-chart.js. Try using angularCharts instead of chart.js as the dependency module name, like so ...
var app = angular.module("app", ["angularCharts", "ui.bootstrap", "ui.bootstrap.typeahead"]);
app.controller('financeAnalyticsController', function($scope, $http, $filter) {
$scope.a="testing";
});
or, use this version of angular-chart.js
see a working example
I can't figure out why i've this "controller is not registered" error in angular 1.6.4.
Controller:
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
Index:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/formCtrl.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<div ng-view>
</div>
</body>
</html>
App:
app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/:id", {
templateUrl: './partials/main.html',
controller: 'formCtrl'
});
})
This is because you're actually creating a new module for the controller, instead of reusing the existing app module.
To fix this you simply change your controller code to this:
angular.module('app').controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
You only need to specify the second argument of angular.module() when you intent to create a new module. If you want to register controllers, components, services, etc. for your application, you only apply the first argument: angular.module('app').
Note, make sure your controller js file is loaded after the app js file.
try this :
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl",["$scope", "$rootScope", "$stateParams", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
}]);
I am getting error when i use ngSanitize.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile',
function($scope, $templateCache, $compile) {
//$templateCache.remove("templateCache.html");
$scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
}
])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ng-bind-html="caches"></span>
</body>
Help me out what wrong in this code
Does this works with your files?
I removed ngSanitize dependency, injected $sce in your controller and used ng-bind-html-unsafe in HTML.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile', '$sce', function($scope, $templateCache, $compile, $sce) {
//$templateCache.remove("templateCache.html");
$scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
}
])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ng-bind-html-unsafe="caches"></span>
</body>
ng-bind-html on bind safe html like
<b>,<p>,<h1> etc
But not like input,button tags
in that case you can use angular.element()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile','$rootElement', function ($scope, $templateCache, $compile, $rootElement) {
var cache = $compile( $templateCache.get("templateCache.html"))($scope);
angular.element($rootElement).find("span").append(cache);
}])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ></span>
</body>
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
index.html is as:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>HTTP Request</title>
<script src="angularjs"></script>
<script src="appjs"></script>
</head>
<body>
<p>Data sharing example :</p>
<div ng-controller="firstCtrl">
<input type="text" ng-model="numval">
<p>Inside first DIV : {{numval}}</p>
</div>
<div ng-controller="secondCtrl">
<input type="text" ng-model="numval">
<p>Inside second DIV : {{numval}}</p>
</div>
</body>
</html>
And app.js is as :
var myApp = angular.module('myApp', []);
myApp.service('sharedata', function() {
return 'common data';
});
myApp.controller('firstCtrl', ['$scope', '$http', 'sharedata', function($scope, $http, sharedata) {
alert('first');
$scope.numval='first';
$scope.numval=sharedata;
}]);
myApp.controller('secondCtrl', ['$scope', '$http', 'sharedata', function($scope, $http, sharedata) {
alert('second');
$scope.numval='second';
$scope.numval = sharedata;
}]);
I am unable to find the stupid mistake....! I am expecting that whether I change data in first input box or in second, I should see the changes reflected in both the DIV tags.
Try the following:
var myApp = angular.module('myApp', []);
myApp.service('sharedata', function() {
return {numval: "Something"};
});
myApp.controller('firstCtrl', ['$scope', '$http', 'sharedata',
function($scope, $http, sharedata) {
alert('first');
$scope.sharedata = sharedata;
}]
);
myApp.controller('secondCtrl', ['$scope', '$http', 'sharedata',
function($scope, $http, sharedata) {
alert('second');
$scope.sharedata = sharedata;
}]
);
And the HTML, both <div>s:
<input type="text" ng-model="sharedata.numval">
<p>Inside ___ DIV : {{sharedata.numval}}</p>
Your mistakes:
$scope.numval='first'; $scope.numval=sharedata; doesn't make sense...
The sharedata service is returning a value; you cannot change a value; you should return a reference (i.e. the object) that contains the value. That way both scopes can write to it.