Im learning about AngularJS but I have a problem with the "ng-hide" directive, its doesnt work.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba ng-hide/ng-show</title>
</head>
<body>
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
And this is my script for Angular
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js (of course, between "script" tags)
You need to initialize your application.
Add ng-app to your html
<html ng-app="MyApp">
...
Then create your app module
<script>
var app = angular.module("MyApp", []);
</script>
You aren't bootstrapping your application.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app"> <!-- You're missing this -->
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
</html>
script.js
var app = angular.module('app', []); // You're also probably missing this
Plunker
Currently you haven't compiled page by angular compiler, for that you need add ng-app directive(basically it takes module name, but in sample you should do only this to make) it working.
Markup
<body ng-app="">
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
Demo Plunkr
Technically you should create a module and add components to that module (in enterprise world).
Jose you have to tell your page that it is an Angular app
<html lang="en" ng-app="app">
and you have to create your app in the JS file:
angular.module('app', []);
Related
My Simple Angular JS app isn't working. Can anybody help me out, the following is the code. Index.js is the main file which includes a script file controller.js .
The browser does not shows any errors when I try to run the app:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="Angad";
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
</head>
<body ng-controller="myCtrl">
<nav>Navigation</nav>
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>{{name}}</h1>
</div>
<footer>Copyright-2017</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
it is due to script loading statement
change
<script src="js/angular.min.js" />
<script src="js/controller.js" />
with
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Simple Angularjs app works without a webserver.
Your example will also work.
Just close the script tag properly.
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
I using very simple code. I seem to be missing something that does run the Angularjs code.
here is my html code:
<html>
<head>
<title></title>
</head>
<body ng-app="myAppApp">
<div ng-controller="exempleCtrl">
HELLO {{name}}!
</div>
</body>
</html>
Here is app.js code:
var app = angular.module('myAppApp',[]);
app.controller('exempleCtrl', function($scope) {
$scope.name = 'World';
});
I'm new to Angularjs. So I could be missing something big here.
The issue, as pointed out in the comments, is that you did not include your Javascript code in the HTML file. So assuming you called it something like app.js and is in the same directory as the HTML file, then you need to include it as follows:
<html>
<head>
<title></title>
<!-- You should also add reference to angular (use desired version - example here is 1.2.4) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- Here including the app.js-->
<script src="app.js"></script>
</head>
<body ng-app="myAppApp">
<div ng-controller="exempleCtrl">
HELLO {{name}}!
</div>
</body>
</html>
Give it a try and let us know if this works.
I'm having an issue getting started with AngularJS. I have downloaded the minified file and have it living in a JS directory along with a app.js file. Everything works until I try calling the app.js file. Then it breaks. Here's my code.
index.html
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>My App</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<h1>Intro to Data Binding</h1>
<div ng-controller="DBController">
<input type="text" ng-model="userName" />
<p>Hello, {{userName}}.</p>
</div>
</body>
app.js
function DBController($scope) {
$scope.userName;
}
on your body tag do ng-app="app"
then, in your .js file...
angular.module('app', [])
.controller("DBController", function($scope){
$scope.userName = "My Name";
})
It also might be helpful to get a basic understanding of angular
the angular team provides a lot of useful videos and other resources
https://docs.angularjs.org/misc/started
Free Video Tutorials: https://www.codeschool.com/courses/shaping-up-with-angular-js
I'm trying to learn Angular.JS, so I wrote this simple code just to test it:
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>
In the browser I'm supposed to see the following output: The sum of 5+10 is: 15, but I just see it as it is: The sum of 5+10 is: {{5 + 10}}. I tried it both in Chrome and FF, I tried to add the angular.js from Google CDN with <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>, I tried to move the script between the <head> tags, but the outcome is always the same.
What am I doing wrong? Why don't I have the output correctly?
<html ng-app="myapp">
When you specify a name for ng-app, it's expecting to find a user-created module with that name. If you're truly just wanting your example to work, you can simply remove the ="myapp" and you'll be all set.
<html ng-app>
If you want to keep your "myapp" name, add this script block after you load angular.
<script type="text/javascript">
angular.module('myapp', []);
</script>
Either remove name initialization in html:
<html ng-app>
Or initialize module in your javascript file:
var myapp = angular.module("myapp", []);
Second way is better.
Just use "ng-app":
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app>
{{ 5 + 10 }}
</body>
</html>
Fiddle here.
This should work.
You need to instanciate the module myapp you are using here
<html ng-app="myapp">
with the following:
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
The final html is like this:
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
</head>
<body>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>
I'm new to Angular.js so bear with me. I found Angular's routing pretty neat which is why I want to try my first Webpage with it. My approach is the following:
<!doctype html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>testrouting</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="inject" ng-view></div>
</body>
</html>
and the an app.js
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'routes/index.html'
});
});
problem is, that index.html is not shown. Inside index.html I have a plain <p> element with some text. But no text is showing on my root index. As far as I know angular is a front-end framework, so is there any Webserver neccessary which causes the problem?
Thanks
I've seen places that say that routing requires a server:
http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating