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>
Related
I'm getting Error:
[$controller:ctrlreg] The controller with the name 'quizController' is not registered.
quizController.js:
angular.module("quizApp",[])
.controller("quizController", function($scope) {
$scope.message = "Hello World";
});
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="quizApp">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body ng-controller="quizController">
<!-- <h1>hello world please work!</h1> -->
{{message}}
<script src="src/libs.js"></script>
<script src="src/scripts.js"></script>
<script src="app.js"></script>
</body>
</html>
Change your index.html accordingly. Also, make sure that you have your imports sorted.
<div ng-app="quizApp">
<h1>Controllers</h1>
<div ng-controller="quizController">
<p>{{ message }}</p>
</div>
</div>
<script src="quizController.js"></script>
I have an issue with ng-disabled it works fine with chrome and firefox but the problem with IE 11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My first app</title>
</head>
<body ng-app="myApp" ng-controller="myController as vm">
<input type="text" ng-model="vm.name" />
<button ng-disabled="vm.isBtnDisabled()">Button</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",["$scope", function($scope){
this.name="";
this.isBtnDisabled=function(){
return this.name.trim().length==0;
}
}]);
</script>
</body>
</html>
Please let me know if i had made any mistake, Thanks.
you can add prototype method trim to work with IE11
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
var app=angular.module("myApp",[]);
app.controller("myController",["$scope", function($scope){
this.name="";
this.isBtnDisabled=function(){
return this.name.trim().length==0;
}
}]);
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController as vm">
<input type="text" ng-model="vm.name" />
<button ng-disabled="vm.isBtnDisabled()">Button</button>
</div>
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'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<li> Date Picker </li>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.jsp
(function() {
"use strict";
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//$('#datepicker1').datepicker();
}]);
})();
DatePicker.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>
<body>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
</body>
</html>
http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j
I will appreciate any help on this issue.
Thank you so much,
Ariel.
in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
And this will go inside index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
I dont know if it will sove your problem, but it is the correct thing to do...
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 ?