I am new to AngularJS. I am trying to use ng-include but it does not show the html files which I refered.
app.js code
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, function($scope)
{
$scope.templateID = 'testing1.html';
$scope.changeTemplateID = function($scope){
$scope.templateID = 'testing2.html';
}
}]);
index.html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<ng-include src="templateID"></ng-include>
<h1>Hello Plunker!</h1>
<p ng-click="changeTemplateID()">next</p>
</body>
</html>
There are two html file in the root directory. They are called testing1.html and testing2.html. I even tried to refer them directly like "'testing1.html'" in the ng-include.
but no success. Any help?
Two errors in your JS code:
var app = angular.module('myApp', []);
// vvvvvvvv must be a string
app.controller('mainCtrl', ['$scope', function($scope)
{
$scope.templateID = 'testing1.html';
// you don't need to pass $scope here:
$scope.changeTemplateID = function(){
$scope.templateID = 'testing2.html';
}
}]);
Plunker for your perusal.
app.controller('mainCtrl', [$scope, function($scope)...
Your [$scope must be ['$scope' like a string, change it and you'll be fine )
Related
I have this directory structure
--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js
in index.html, i have this
<!DOCTYPE html>
<html en="us" ng-app="app">
<head>
<title>Jogo da Memória - DB1</title>
<!-- bootsrap css-->
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<!-- components -->
<script src="js/components/header/headerComponent.js"></script>
</head>
<body>
<div class="container" ng-controller="HomeCtrl as $ctrl">
<h1>{{$ctrl.message}} </h1>
<header></header>
</div>
</body>
</html>
js/app.js
(function() {
var app = angular.module('app', []);
app.controller('HomeCtrl', function() {});
})();
component/header/headerComponent.js
(function() {
'use strict';
var app = angular.module('app');
app.component('header', {
templateUrl: '/js/components/header/headerComponent.html',
controller: 'headerController'
});
})();
component/header/headerController.js
var app = angular.module('app', []);
app.controller('headerController', ['$scope', function($scope) {
$scope.titulo = "teste";
}])
component/header/headercomponent.html
<h1>{{titulo}}</h1>
The problem is that the variable "titulo" is not rendered.
I would not like to use in the component file the controller: function () {} structure. And i have this error: Uncaught Error: [$injector:modulerr] I would call the external controller. How can I do this?
You're defining your module twice, the second time in component/header/headerController.js.
var app = angular.module('app', []);
This should change to:
var app = angular.module('app');
It also doesn't look like component/header/headerController.js is included in your index.html via script tag.
I am new to AngularJS and JavaScript in general and need some help trying get a JavaScript variable into my AngularJS controller. Here is my html page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="test">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!--Third party scripts-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<!--Custom scripts-->
<script type=" text/javascript" src="app/test.js"></script>
<!--Third party style sheets-->
<link type="text/css" rel="stylesheet" href="css/test.css" />
</head>
<body>
<div id="page" ng-controller="PageCtrl">
<ul>
<li ng-click="print(gBool)">Print</li>
</ul>
</div>
</body>
</html>
<script>
var gBool = false;
window.onload = function () {
gBool = true;
};
</script>
Here is the AngularJS code:
var app = angular.module('test', []);
app.controller('PageCtrl', ['$scope', function ($scope) {
$scope.print = function (boolParam) {
console.log(boolParam);
};
}]);
This just prints out 'undefined' in the console when it executes. Is this something that should work?
You need to do it in the "angular" way by using $window:
var app = angular.module('myapp', []);
app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
$scope.memId = $window.memId;
}]);
In this line:
<li ng-click="print(gBool)">Print</li>
You are referencing a variable gBool in your scope, so its $scope.gBool
If you define in your JavaScript instead in your html, will work.
$scope.gBool = true;
Also, lookup $window and use it from your controller like this:
app.controller('PageCtrl', ['$scope', '$window', function ($scope, '$window') {
$scope.gBool = false;
$window.onload = function() {
$scope.gBool = true;
};
$scope.print = function (boolParam) {
console.log(boolParam);
};
}]);
There are two Things to focus
(i)You need to initialize the variable you can use the ng-init
(ii) Declare a function to assign the bool value initially
Here is the working Application
I try to display some variable of my controller, but the output is just {{UserCtrl.user}} instead of the content of UserCtrl.user.
I got the following file structure:
index.html
scripts/app.js
This is the code of index.html:
<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
<meta charset="utf-8">
<title>Birdsnest</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
<div ng-controller="UserController as UserCtrl">
{{UserCtrl.user}}
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js:
(function() {
var app = angular.module('birdsnest', []);
app.controller('UserController', ['scope', function($scope) {
$scope.user = 'Michael';
}]);
})();
Change this line:
app.controller('UserController', ['scope', function($scope) {
To:
app.controller('UserController', ['$scope', function($scope) {
Edit:
If you're using controllerAs then I think you should rewrite your code:
app.controller('UserController', function() {
this.user = 'Michael';
});
When you're using the ControllerAs syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this object.
What this means is that your code that attaches user to the scope object is incorrect; instead you should do the following:
app.controller("UserController", function() {
this.user = "Michael";
});
I have the need to add in some items from my scope into some inline script I need to run on my site.
From what I have tried in my demo it doesn't look possible to use the values from my scope in inline script tags. What is the best way to achieve this?
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
'{{aaa}}'
<script>console.log('{{aaa}}');</script>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.aaa = 'bbb';
}]);
</script>
Console returns '{{aaa}}'. I want it to return bbb.
<div id="idd" ng-controller="MainCtrl">
'{{aaa}}'
<button ng-click="$log.log(aaa)">log</button>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope','$log',
function($scope, $log) {
$scope.aaa = 'bbb';
$scope.$log = $log;
//console.log($scope.aaa);
//console.log($scope.$parent);
}
]);
</script>
Given a string in my $scope model which contains an HTML entity, how do I ensure that the entity is properly displayed as an HTML character rather than a literal string?
HTML entity - MDN Glossary
http://plnkr.co/edit/0BliljcDkj0vvj3jdEqz?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*"
data-semver="1.2.13"
src="http://code.angularjs.org/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="htmlChar">{{title}}</div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("htmlChar",function($scope){
$scope.title = "© Acme";
});
angular.bootstrap(document, ['app']);
});
</script>
</body>
</html>
You do not need $sce to bind to strings with html. All you need is to inject ngSanitize into your app (it is not a core module), and then use the ng-bind-html attribute directive.
JavaScript
var app = angular.module('app', ['ngSanitize']);
app.controller('MainCtrl', function($scope) {
$scope.title = '½ Cookies & <span class="cream">Cream</span>';
});
Html
<div ng-bind-html="title"></div>
Plunkr
With $sce. You need to explicitely tell angular the content is html.
<div ng-controller="htmlChar" ng-bind-html="title"></div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("htmlChar",function($scope, $sce){
$scope.title = $sce.trustAsHtml("© Acme");
});
angular.bootstrap(document, ['app']);
});
</script>
http://plnkr.co/edit/9iNnRC7AxFptnQZLPtYR?p=preview