Today is the first when i started reading about Angular JS and I tried to do a very basic thing after reading from a tutorial.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" data-ng-app="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
I downloaded and added the angular js library from GitHUB 1.4.x(latest). I expect the name to be written on the fly when user types in the textbox but nothing happens. What am i missing for this basic set up ?
P.S. - I am using an HTML page in Visual Studio 2010.
Some minor adjustments to your code, and it works just fine:
<html ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" ng-model="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
A working code pen can be seen here: http://codepen.io/anon/pen/jPWyaR
JSFIDDLE http://jsfiddle.net/seadonk/aze39fjq/
change the html tag to: <html ng-app>
change your input directive to data-ng-model="name"
<html ng-app>
<head>
</head>
<body>
Name:
<br />
<input type="text" data-ng-model="name" /> {{ name }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
I note a few things.
a) No reference to script file which should contain an angular module declaration.
b) The input references an angular app named "name" but it is immediately closed
c) No controller declared
d) data-ng-app needs older version of angular. I suggest use 1.3.5
I will do the following corrections to get it working.
http://plnkr.co/edit/rfXgNl6ugqSmlwXOaHIN?p=preview
<!DOCTYPE html>
<html >
<head>
<title>
My First Angular App
</title>
<script src="https://code.angularjs.org/1.3.15/angular.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('name', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</head>
<body ng-app="name">
Name:
<br />
<div ng-controller="MainCtrl">
<input type="text" ng-model="name"/>
{{name}}
</div>
</body>
</html>
Related
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
I just start working on Angularjs, and when I came to ng-controller, there is one confusing point as following:
The HTML codes:
<html lang="en" ng-app="App" ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Chapter1 <small>Hello,World</small></h2>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name}}</h1>
<label for="name">Enter Your Name</label>
<input type="text" ng-model="name" class="form-control input-lg" id="name">
</div>
</div>
</body>
</html>
The angularjs codes:
function AppCtrl($scope){
$scope.name = "World";
});
the result is that the {{name}} model part can not get the correct data. No default data "World" can be shown, and no matter what I type inside the input text box, the output view is always Hello, {{name}}
EDIT: I refer to a book about angularjs. And the demo case shows that the usage I post here. But I found workaround now.
Your Angular is not bootstrapped. Use:
angular.module('App', [])
.controller('AppCtrl', function($scope) {
$scope.name = "World";
});
I suggest you to read through some basic tutorials first.
Check this working demo: JSFiddle
<html ng-app="notesapp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Edit
For making small code like this work, we can actually define an empty ng-app.
Eg: <html ng-app = "">
If you however want to define ng-app with some value, we need to load that ng-app in javascript. It can be done in a separate js file or in the same html file with <script></script> tag. Please see below:
<script>
var app = angular.module('notesapp', []);
</script>
Please close the script tag in your head. Also angular needs ng-app for its functioning. Please use ng-app on the tag which encloses your angular content.
<html ng-app="notesapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<script>
var app = angular.module('notesapp', []);
</script>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Also, as you know, Sublime is just an editor. It has nothing to do with angular. Cheers.
I need to alert the path name by clicking the link tag but it's not working for me. Since I am new to angular I am confused about where I went wrong. Can somebody help me with this?
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0-alpha.20" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<script>
var myApp = angular.module('myApp',[]);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
}
}
</script>
</body>
</html>
And here is my plnkr:http://plnkr.co/edit/Cir7Ardx3OVvwPWYJNNv?p=preview
I cleaned up your Plunkr demo and forked it here:
http://plnkr.co/edit/YuinLcjb6OU7VsdSMca9?p=preview
First, I wasn't sure if you intended to target the unstable 2.0 version or not, so I changed it to target the latest stable release of AngularJS (1.3.15). Next, I moved your script to the script.js file and formatted your controller properly.
Now the HTML looks like:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<hr />
{{ name }}
</body>
</html>
and your script looks like this:
angular.module('myApp', [])
.controller("ProductCtrl", ProductCtrl);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
};
}
This is half the battle: making sure that your framework is working correctly. Now, how to show the full path of the selected file? Here are a few links to help you with that (or not, actually):
How to get the full path of the file from a file input
Get file path through type=file
What is the Simplest 'Hello World' in AngularJS for a beginner. So far I have this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-ng-app="">
{{'Hello World' }}
</div>
<script src="angular.js"></script>
</body>
</html>
Simplest Hello World that shows 2-way databinding
<!doctype html>
<html lang="en" ng-app>
<head>
<title> Hello World </title>
</head>
<body ng-controller="MainCtrl">
<h1>{{helloWorld}}</h1>
<input type="text" ng-model="helloWorld"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
function MainCtrl($scope){
$scope.helloWorld = "Hello World";
}
</script>
</body>
</html>
edit:
A bit of explanation on what is what and why this is (in my view) a minimal Hello World app showcasing the power of AngularJS
The AngularJS library needs to be included
The custom attribute ng-app is added to kick of the angular application. This directive signals AngularJS to auto-bootstrap an application
The ng-controller directive is added and it's associated javascript function shows exposing an object by assigning it to the injected $scope
The double brackets expression {{helloWorld}} shows the convention used by AngularJS to output model values.
The ng-model directive is used to bind the helloWorld object and shows the power of AngularJS two-way datababinding
Simplest AngularJS 'Hello World' - "The Good Way"
<!doctype html>
<html data-ng-app="myApp">
<head>
<!-- .... -->
</head>
<body>
<div data-ng-controller="MyController">
<input type="text" data-ng-model="name" />
<p>Hello {{name}}</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.name = "World";
}]);
</script>
</body>
</html>
Found on prettycode.org:
<!doctype html>
<html ng-app>
<head>
<title> Hello World </title>
</head>
<body>
Your name: <input type="text" ng-model="name"></input>
<p ng-show="name">Hi, {{ name }}!</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
</body>
</html>