Below is the index.html file:
<html ng-app="myApp">
<head>
<title> My Contacts App </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<link rel="shortcut icon" href="favicon.ico"></link>
</head>
<body>
<h1>My contact App </h1>
<div controller="contactCtrl as ctrl">
{{ ctrl.nm }}
</div>
</body>
</html>
app.js is as shown below:
var app = angular.module("myApp",[]);
app.controller("contactCtrl",createContacts);
function createContacts()
{
this.nm = "Hey";
console.log("INside controller");
}
Problem: When I start http-server from the same directory where the source files are and type http://127.0.0.1:8080 the browser just displays static html content. It neighter displays the value of the variable "nm" nor shows anything from console.log
I am at a beginner level.
TIA.
This should be ng-controller:
<div ng-controller="contactCtrl as ctrl">
{{ ctrl.nm }}
</div>
Here is an example on how to use the ng-controller directive in the html:
var app = angular.module("myApp",[]);
app.controller("contactCtrl",createContacts);
function createContacts()
{
this.nm = "Hey";
console.log("INside controller");
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title> My Contacts App </title>
<script src="app.js"></script>
<link rel="shortcut icon" href="favicon.ico"></link>
</head>
<body>
<h1>My contact App </h1>
<div ng-controller="contactCtrl as ctrl">
{{ ctrl.nm }}
</div>
</body>
</html>
Answer by pritam is correct. Why not go traditional way.
var app = angular.module("myApp",[]);
app.controller("contactCtrl",function($scope){
$scope.nm = "Hey";
console.log("Inside controller");
});
and in the template just use {{ nm }}
Related
I basically copied this code from a video tutorial from the official site. I wish '4' were shown on the screen, but it keeps showing '{{ totalTodos }}'.
Here index.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
And here index.html:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{ totalTodos }}
</div>
</body>
</html>
It's good practice to start correctly if you are newbie in angularJs. Start by creating module and give it any name. I used app as a module name and then your controller and so on ..
angular.module("app", []).controller("TodoCtrl", function ($scope) {
$scope.totalTodos = 4;
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{ totalTodos }}
</div>
</body>
</html>
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
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>
I have been reading this book I tried the first example, but It doesn't render the templates, it only shows the text by default. When I open the console, the app ContactManager exits and it's initialiazed.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="utf-8"> -->
<title>Marionette Contact Manager</title>
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/application.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<span class="brand">Contact manager</span>
</div>
</div>
</div>
<div id="main-region" class="container">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<script type="text/template" id="static-template">
<p>This is text that was rendered by our Marionette app.</p>
</script>
<script src="./assets/js/vendor/jquery.js"></script>
<!--<script src="./assets/js/vendor/json2.js"></script>-->
<script src="./assets/js/vendor/underscore.js"></script>
<script src="./assets/js/vendor/backbone.js"></script>
<script src="./assets/js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion: "#main-region"
});
ContactManager.StaticView = Marionette.ItemView.extend({
template: "#static-template"
});
ContactManager.on("initialize:after", function(){
var staticView = new ContactManager.StaticView();
ContactManager.mainRegion.show(staticView);
});
ContactManager.start();
</script>
Try changing
ContactManager.on("initialize:after", function()
to
ContactManager.on("start", function()
Update your "initialize:after" function by
ContactManager.addInitializer(function(){
var staticView = new ContactManager.StaticView();
ContactManager.mainRegion.show(staticView);
});
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.md
Thanks
I'm following the AngularJS Tutorial on Code School, and my JavaScript won't render into the HTML.
Here is the HTML
<html ng-controller="StoreController as store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div>
<h1> {{store.product.name}} </h1>
<h2> $ {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
and here is the Angular
(function(){
var app = angular.module("store", []);
app.controller('StoreController',function(){
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
})();
The angular is just rendering as plaintext
The ngApp is missing at the top.
<html data-ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="StoreController as storeCtrl">
<h1> {{storeCtrl.product.name}} </h1>
<h2> $ {{storeCtrl.product.price}} </h2>
<p> {{storeCtrl.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And you gem variable is used by angular, before it's actually defined.
(function(){
var app = angular.module("store", []);
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
app.controller('StoreController',function(){
this.product = gem;
});
)();
And i'd recommend to move the script tags to the top, because you do this, to make the html render faster, but this will cause in angular applications to show your ugly placeholders for milliseconds.
And append the -Ctrl suffix, to the controller view variable, this will make it clear, when you actuall access the controller or it's just a scope variable.