Hi I am just learning the AngularJS, and trying to save cookies values
I have two html file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="helloCtrl">
Hello <input type="text" ng-model="helloText"/>
<input type="button" ng-click = "redirectToTest()" value="Go" />
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="testCtrl">
Hello {{cookiesText}}
</body>
</html>
test.js
var myApp = angular.module('myApp', ['ngCookies']);
var helloCtrl = myApp.controller('helloCtrl',
function ($scope, $cookies, $window) {
$scope.helloText = "Hello World!"
$scope.redirectToTest = function(){
$cookies.put('hello', $scope.helloText);
console.log("Added hello to cookies : "+ $cookies.get('hello'));
$window.location.href = "test.html";
}
});
var testCtrl = myApp.controller('testCtrl',
function ($scope,$cookies) {
$scope.cookiesText = '';
$scope.init= function(){
$scope.cookiesText = $cookies.get('hello');
}
});
I am adding some text into cookies and redirecting to test.html to display cookies value, but it lost somewhere ?
Is there $window.location.href reset cookies value ?
Related
HTML code as below
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<meta charset="utf-8">
<title>ng-cribs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</head>
<body ng-app="ngCribs" ng-controller = "cribsController">
<h1>{{ hello }}</h1>
</body>
</html>
02.app.js file
angular.module('ngCribs',['ui.boostrap']);
03.cribsController.js file
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'Hellow world';
});
Problem
index file loads as {{ hello }} instead Hellow world
You may need to inject $scope into your controller like this:
angular
.module('ngCribs')
.controller('cribsController', ["$scope", function($scope){
$scope.hello = 'Hellow world';
}]);
For the below given code I'm not getting output
<div ng-app="myApp" ng-controller="mCtr">
<p>{{content}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('mCtr',function($scope,$http)
{
$http.get("welcome.html").then(function(response)
{
$scope.content = response.data;
});
});
</script>
I am getting output like this
<!DOCTYPE html>
<html>
<head>
<title>AJS Services HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p>Welcome to world of AJS</p>
<h1>AJS means Angular JS</h1>
</body>
</html>
I am new to Angular JS, when I tried to get and print out some JSON data using $scope variable, but double curly braces just don't work as i thought it would do.
HTML:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
JS:
$(window).on("load",function () {
var $myApp = angular.module('myApp',[]);
$myApp.controller('myController',function ($scope) {
$scope.p =
{
"name":"a",
"id":"1"
}
});
});
result:
haha {{ p.name }}
Update:
HTML file:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
JS file:
var $myApp = angular.module('myApp',[]);
$myApp.controller('myController',function ($scope) {
$scope.p =
{
"name":"a",
"id":"1"
}
});
And now i got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Remove $(window).on("load",function () {
Change type="javascript" to type="text/javascript" in all <script></script> tags
Angularjs will load it before DOM is loaded
Here is the working code
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08" />
<meta name="author" content="YYQ" />
<meta name="description" content="YYQAngularJS" />
<title>YYQAngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var $myApp = angular.module('myApp', []);
$myApp.controller('myController', function($scope) {
$scope.p = {
"name": "a",
"id": "1"
}
});
</script>
</body>
</html>
$(window).on('load', () => {}) is causing conflict with your angular app.
var $myApp = angular.module('myApp', []);
$myApp.controller('myController', function($scope){
$scope.p = {
"id": 1,
"name": "Angular App working"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
Here i try to Angular setup in html page for that i wrote simple code as Below
MyApp.js
/// <reference path="angular.js" />
var app = angular.module('MyApp', [])
debugger;
app.controller('HomeCtrls', function ($scope) {
$scope.msg = "This is MyApp....";
})
Master.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app="MyApp">
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
Here why my msg is not Loading This is MyApp....
ng-app inject wrong place. Not <head ng-app="MyApp">, Inject html or body or div tag as per your web application need.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-app="MyApp" ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
the problem is with your angular script, is not loaded, check your path, you can use the CDN also :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
I am following a tutorial but stuck on one issue. I don't know what I am missing here.
//script.js
var MainController = function($scope)
{
$scope.message = "Hello!!!!";
};
<!-- index.html -->
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Problem is -
The message is not binding.
Create your module first, then add the controller to the module, specify both the app and controller in your HTML portion.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
var MainController1 = function($scope)
{
$scope.message = "Hello!!!!";
};
app.controller("MainController1", MainController1);
</script>
</head>
<body ng-controller="MainController1">
<h1>{{message}}</h1>
</body>
</html>