I just see a blank input box, when I should see the $scope.firstname value. Why does not this work?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-controller="MyController">
<head>
<meta charset="UTF-8">
<title>Toto App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>
<input ng-model="firstname">
</body>
</html>
myCtrl.js:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.name = "John";
});
You're doing $scope.name = "John" instead of $scope.firstname = "John"
Related
I am new and started practicing Angular JS.
My output should give Hello but it is showing {{message}}
Below is HTML code:
<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<p>{{message}}</p>
</div>
</div>
</body>
</html>
Below is Angular js code:
angular.module('HelloWorldApp', [])
.controller("HelloWorldController", ["$scope", function ($scope){
$scope.message = "Hello";
}]);
I do not see any error with your code, Check your angular version
DEMO
angular.module('HelloWorldApp', []) .controller("HelloWorldController", ["$scope", function ($scope) { $scope.message = "Hello"; }]);
<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="hello_world_controller.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<p>{{message}}</p>
</div>
</div>
I'm trying to send two parameters from first.html to second.html through url and get the value in second.html using routeParams. I have set the base tag as <base href="file:///D:/abhilash/node/angapp/"/> and on click of button the parameters in the input textboxes should be passed through url.
The first.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" value="submit" name="">
</div>
</body>
</html>
Second.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="secondController">
{{firstName}}
</div>
</body>
</html>
This is the controller:
(function(){
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/first',{
templateUrl:'/first.html',
controller: 'firstController'
})
.when('/second/:firstName/:lastName',{
templateUrl:'/second.html',
controller:'secondController'
})
.otherwise({
redirectTo:'/first'
})
$locationProvider.html5Mode(true);
})
app.controller('firstController',function($scope,$location){
$scope.firstName="";
$scope.lastName="";
$scope.loadView = function()
{
$location.path('second/'+$scope.firstName +"/" +$scope.lastName);
console.log($location.url());
}
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
}());
check this code here
If you are deploying your app into the root context (e.g. https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (e.g. https://myapp.com/subapp/), set the base URL to the URL of the subcontext:
<head>
<base href="/subapp/">
...
</head>
I want to load the script template for specific div tag.
In my Demo I have 3 'show' link. If I click any one of the show link it loads script for all 'show' link. But I want to load only the script for that 'show' link which I have clicked.
See the PLUNKER.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
$scope.templateURL = 'my-tmpl';
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective" data-ng-init="names=['1','2','3']">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl">
<p>Hello</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d">
<div ng-include=templateURL></div>
</div>
</div>
</div>
</body>
</html>
If you need to show same things means need to use same template then
use the following code.
Here I have defined a new scope variable.
Look at the updated plunker
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.a = 0; //Here
$scope.showdiv = function(x){
$scope.templateURL = 'my-tmpl';
$scope.a = x; //and Here
};
}]);
})(window.angular);
show <!-- pass x to remember -->
<div id="d" ng-show="a==x"> <!--and check that new variable set as x or not -->
<div ng-include="templateURL"></div>
</div>
If you need to use different template for different link
Then you could use the following code. Here is the plunker.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.names=[{name:'1', template:'tmpl-1', show:false},
{name:'2', template:'tmpl-2', show:false},
{name:'3', template:'tmpl-3', show:false}]
$scope.show = '0';
$scope.showdiv = function(x){
$scope.show = x.name;
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="tmpl-1">
<p>Template 1</p>
</script>
<script type="text/ng-template" id="tmpl-2">
<p>Template 2</p>
</script>
<script type="text/ng-template" id="tmpl-3">
<p>Template 3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="show == x.name">
<div ng-include="x.template"></div>
</div>
</div>
</div>
</body>
</html>
Have a look at below code.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile',
function($scope, $compile) {
$scope.names = [{
'name': '1',
'tmpl': 'my-tmpl1'
}, {
'name': '2',
'tmpl': 'my-tmpl2'
}, {
'name': '3',
'tmpl': 'my-tmpl3'
}];
$scope.showdiv = function(tmpl) {
$scope.templateURL = tmpl;
};
}
]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl1">
<p>Hello1</p>
</script>
<script type="text/ng-template" id="my-tmpl2">
<p>Hello2</p>
</script>
<script type="text/ng-template" id="my-tmpl3">
<p>Hello3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="x.isOpen">
<div ng-include="x.tmpl"></div>
</div>
</div>
</div>
</body>
</html>
demo
I'm new to Angular and I'm going through the Intro to Angular videos from the Angular site. My code isn't working and I have no idea why not. I get the error
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
Here's my code.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.message = "Controller Example";
}
</script>
</body>
</html>
What am I doing wrong?
After angular version 1.3 global controller function declaration is disabled
You need to use modularise approach in order to make it work.
You should define angular.module first and then include angular components to it
Demo
angular.module('app', [])
.controller('MainController', function ($scope) {
$scope.message = "Controller Example";
})
Then change ng-app to use that module ng-app="app"
Just defining the function will not be a controller. You need to use like this:
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
$scope.message = "Controller Example";
}
And ensure to use myApp in your html like this:
<html lang="en" ng-app="myApp">
function MainController($scope) {
$scope.message = "Controller Example";
}
should be something more like
var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
$scope.message = "Controller Example";
}
And then include an ng-app="myApp" directive in your html.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angular Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module("app",[])
.controller('mainController', function($scope) {
var vm = this;
vm.message = "Controller Example";
})
</script>
</head>
<body ng-controller="mainController as vm">
<div >
<p>{{vm.message}}</p>
</div>
</body>
</html>
This is not how you should create a controller...
First you should create the module and controller in java script
// start angular module (app) definition
angular.module('myApp',[''])
.controller('MainController', function($scope) {
$scope.message = "Controller Example";
});
Now in your 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">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Now it will start working
I suggest you to go through some tutorials first
http://campus.codeschool.com/courses/shaping-up-with-angular-js/
https://docs.angularjs.org/tutorial
These are some good tutorials
I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source