Angular sample code is not working - javascript

I am trying to create the sample angular application, where I have initialized an angular application and rendering a list defined in the controller, but I am not getting anything in output, and even not getting any error in javascript console.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<ul>
<li ng-repeat="i in listctrl.list">{{i}}</li>
</ul>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
var list = ['A','B','C','D'];
})
</script>
</body>
</html>


You should have listctrl.list instead of var list = ['A','B','C','D'];
listctrl.list = ['A','B','C','D'];
DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<ul>
<li ng-repeat="i in listctrl.list">{{i}}</li>
</ul>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = ['A','B','C','D'];
})
</script>
</body>
</html>

Related

Error: [$controller:ctrlreg] - Angularjs (1.8.3)

What am I doing wrong?
I try write simple example with use book, but I get error.
What needs to be fixed in this example to make it work?
what else write there?
<html>
<head>
<title>page 29</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js">
</script>
<script>
var Ctrl = function ($scope) {
$scope.getName = function() {
return $scope.name
}
}
</script>
<body ng-app>
<div ng-controller="Ctrl">
Напиши свои мысли о ангуляре
<input type="text" ng-model="name">
<h1> angularjs - {{getName()}} </h1>
<p>
</p>
</div>
</body>
</head>
</html>
In console I watch error:
Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.8.3/$controller/ctrlreg?p0=Ctrl
at angular.js:99:1
at angular.js:11787:17
at ea (angular.js:10818:34)
at p (angular.js:10603:32)
at g (angular.js:9942:13)
at g (angular.js:9945:13)
at angular.js:9807:30
at angular.js:1968:11
at m.$eval (angular.js:19523:16)
at m.$apply (angular.js:19622:20)

Solution - First example:
<html>
<head>
<title>page 29</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js">
</script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('Ctrl', ['$scope', function($scope) {
//var Ctrl = function ($scope) {
$scope.getName = function() {
return $scope.name
}
}]
)
</script>
<body ng-app="myApp">
<div ng-controller="Ctrl">
Напиши свои мысли о ангуляре
<input type="text" ng-model="name">
<h1> angularjs - {{getName()}} </h1>
<p>
</p>
</div>
</body>
</head>
</html>

Javascript textarea charcoutner isn't working

hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>

In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.

A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>

angularjs - how do i pass list to other html?

this is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>index</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="data:;base64,=">
<style>
</style>
</head>
<body>
<ul class="papa">
<li>input</li>
<li>output</li>
</ul>
<ng-view></ng-view>
<script>
var app1 = angular.module('myApp', ['ngRoute']);
app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/1_input', {
controller: 'input_control',
templateUrl: '/1_input.html'
})
.when('/2_output/:firstnamehh/:lastnamehh', {
controller: 'output_control',
templateUrl: '/2_output.html'
})
.otherwise({redirectTo:'/1_input'});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}]);
app1.controller('input_control',function($scope, $location){
//$scope.init_table = {name1:"", name2:""};
//$scope.score_card = [];
//
$scope.loadView2 = function(){
// $scope.score_card.push({
// name1: $scope.firstnamehh,
// name2: $scope.lastnamehh
// })
// console.log($scope.score_card);
$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.score_card;
//$location.path('/2_output/'+$scope.firstnamehh+$scope.lastnamehh+$scope.score_card);
//$location.path('/2_output/'+$scope.score_card);
}
});
app1.controller('output_control',function($scope, $routeParams){
$scope.name1=$routeParams.firstnamehh;
$scope.name2=$routeParams.lastnamehh;
//$scope.name2=$routeParams.({?name1=$scope.firstnamehh});
//$scope.out_score=$routeParams.score_card;
//$scope.name3 = $routeParams[score_card];
});
</script>
</body>
</html>
this is the 1_input.html
<!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>1_input</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
First name: <input type="text" ng-model="firstnamehh"/> <br/>
Last name: <input type="text" ng-model="lastnamehh"/> <br/>
<button ng-click="loadView2()">to output page</button>
</body>
</html>
this is the 2_output.html
<!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>2_output</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
From View2.
<ul>
<li>{{name1}}</li>
<li>{{name2}}</li>
<!-- <tr ng-repeat="aa in score_card">
<td>{{aa.name1}}</td>
<td>{{aa.name2}}</td>
</tr> -->
</ul>
</body>
</html>
hello guys, i'm new to angularjs and looking for some help!. What I'm trying is, making firstnamehh and lastnamehh as a list and pass it to 2_output.html and finally print it out in a table. The part I'm struggling is what should i put after $routeParams and $location.path().
$routeParams.???
..
$location.path('/2_output/'+$scope.???);
any advice would be appreciated!! thank you for reading this question

You can achieve this by using service
app.factory('DataService', function() {
var appData = {}
function set(data) {
appData = data;
}
function get() {
return appData;
}
return {
set: set,
get: get
}
}
In your input_control you can set the data to the service :
DataService.set(shredData);
In your output_control get the data from ther service :
$scope.appdata = DataService.get();
Inject DataService in the controllers by passing it as a parameter
app.controller('input_control', ['DataService', function($scope, $location, DataService){
//Your logic
}]);

Retrieving coordinates from google map

This plunker shows a google map.
http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview
<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>
<body>
<ng-map center="[40.74, -74.18]"></ng-map>
</body>
</html>
I would like to know the coordinates of specific points on the map. If the user right-click on the mouse button on any points on the map, an alert will appear showing the coordinates.
The code uses angularjs and the ng-map module. http://ngmap.github.io/

I think you should add an event listener and then show the coordinates inside that event like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('EventDomListenerController', function($window) {
var vm = this;
vm.showAlert = function(event, args) {
$window.alert(event.latLng.lat()+', '+event.latLng.lng());
}
});
</script>
</head>
<body ng-controller="EventDomListenerController as vm">
<ng-map center="[40.74, -74.18]" on-click="vm.showAlert()"></ng-map>
</body>
</html>
Live Plunker

Why am I getting the Angular $injector:modulerr error here? Using 1.5 beta

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
I'm including angular.min, angular-route and even angular-resource and animate...

You had wrong ng-app module, it should be ng-app="friendsList" instead of app.
The error is not due to angular versions, it is because you are injecting wrong dependency in your app mdoule. Simply you can not inject mainCtrl inside your module as its controller mainCtrl which you are going to register with your module.
var app = angular.module('friendsList', []);
Also you should have ng-controller="mainCtrl" on html.
<section ng-controller="mainCtrl">
</section>

Categories

Resources