I have imported an external local html file (index2.html) into my html file's div (index.html, #container). I want to use angular to bind data values to some of the tags in the imported html file.
Here's my code so far - http://plnkr.co/edit/APXdpQzRUOfGehqSAJ9l?p=preview
index.html
<div id="container" ng-app="myApp" ng-controller="myController"></div>
<script type="text/javascript">
$(function() {
$("#container").load("index2.html");
});
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name = "test";
});
</script>
index2.html
<div id="container2">
<p>test content:</p>
<p>{{name}}</p>
</div>
However, it just shows up as the text {{name}} - not 'test'. I've tried placing 'ng-app' and 'ng-controller' in #container2 instead but it's still the same.
Mixing AngularJS and jQuery was asking for trouble!
I found my answer - I used ng-include to import the html instead of the load function.
<div id="container" ng-include="'index2.html'" ng-app="myApp" ng-
controller="myController"></div>
Related
I am using angular 1.x in my project and I want to create a filter, I know how to do it but it does not work, it does not throw any console error either.
This is my js code:
var myAPP = angular.module("myAPP",[]);
myAPP.filter("miFilter",function(){
return function(input){
return input.replace("normal","400x400");
};
});
and in my html file I use this:
<img src="{{url | miFilter}}" />
Don't use src. Use ng-src instead.
From the AngularJS documentation:
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Use this code as a reference and change according to your code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('namesCtrl', function($scope) {
$scope.url = 'http://www.w3schools.com/angular/pic_angular.jpg';
}).filter("miFilter",function(){
return function(input){
return input.replace("normal","400x400");
};
});;
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<img ng-src="{{url | miFilter}}" />
</div>
</body>
I Followed that link to learn how to use: ng-include: http://www.w3schools.com/angular/angular_includes.asp
But I Have few questions and I not understand well how it works.
If I remove app1.js = the ng include will not works, why? I really not understand angular I am just trying for the first time.
app1.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
})
as well if I am not running this code in a server will not works too, why?
html code:
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<div ng-include="'includes/content.html'"></div>
<div ng-include="'includes/header.html'"></div>
</div>
<script src= "js/app1.js"></script>
</body>
</html>
you use the <body ng-app="myApp" ng-controller="userCtrl">
After you remove the app1.js there is no controller to match with the ng-controller so there will be a error saying undefined controller (check the console),
and change the ng-app="myApp" to ng-app, if you keep the ng-app="myApp" then it will search for a module called myApp as angular.module('myApp', [])
remove the ng-controller directive and check it will work.
then whole think would be
<body ng-app>...
so i have my index.html like following
<html>
<body ng-controller="Ctrl">
<div id="main" ng-include="body"/>
<div id="sidebar" ng-include="side"/>
</body>
</html>
app.js:
var app=angular.module("myapp",[]);
app.controller('Ctrl',['$scope',function($scope) {
$scope.gotoXXX() {
$scope.sidebar="xxx.html";
}
}]);
sidebar.html:
<script src="XXXcontroller.js"></script>
<div ng-controller="XXXcontroller">
</div>
Obviously, this is not working. It prompts for XXXcontroller not defined. So I figured the controller was not properly injected. And I need to change view partially, so routeProvider is not an option.
So I'm wondering, Is there anyway to dyanmically inject controllers?
I have been trying to write a simple angular.js app, that includes another file using ng-include. I must have done something/missed something so that the included file does not get included. I must be doing something fundamentally wrong but can't see what it is.
Here is Index.html
<!DOCTYPE html>
<html>
<head ng-app="app">
<title>Demo</title>
<script data-require="angular.js#1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script data-require="angular-resource#1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular-resource.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="appctrl">
<h1>Airports</h1>
<div ng-include="'extra.html'"></div>
<h1>Airports</h1>
</div>
</body>
</html>
file extra.html contains the element to be included
<h2>Inside</h2>
and script.js is the file to initialise angular
(function () {
'use strict';
var app = angular.module('app', []);
app.run(['$route', function ($route) { // Include $route to kick start the router.
}]);
angular.module('app').controller('appctrl', [function AppCtrl() { }]);
});
I created to Plunk to demonstrate what I mean. There's not much there: the ng-app defined, references to the angular files and a couple of titles to delineate the insert point. Nothing is shown between.
What is the simplest way to use ng-include in angular.js?
Place ng-app on your body section.
Include angular-route.js (eg. <script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>) and add this dependency to your app initialization (var app = angular.module('app',['ngRoute'])
Don't put your script.js code inside (function(){}). (If you want to do this, call this function (function(){})();)
Your code with changes: http://plnkr.co/edit/k1dFPeb9E2B2pjTthi1K?p=preview
This is a script of mine:
HTML:
<div id="superhero-nav-container">
<ul id="superhero-nav">
<li><a ng-click='template = templates[0]'>Biography & Stats</a></li>
<li><a ng-click='template = templates[1]'>History</a></li>
<li><a ng-click='template = templates[2]'>Powers</a></li>
<li><a ng-click='template = templates[3]'>Enemies</a></li>
</ul>
</div>
<div class="superhero-templates" ng-include src='template.url'></div>
JS in the controller:
$scope.templates = [
{ url: '/views/superheroes/biography.html' },
{ url: '/views/superheroes/history.html' },
{ url: '/views/superheroes/powers.html' },
{ url: '/views/superheroes/enemies.html' }
];
$scope.template = $scope.templates[0];
I have something like menu that changes the html in the bottom div. Hope that helps.
EDIT (for the comment below):
Your mistakes were:
Put your ng-app attribute in the html tag of the
document not in the head
Include angular-resource.js (eg. <script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script>) and add this dependency to your app initialization:
angular.module('app', ['ngResource']) ...
Don't put your script.js code inside (function(){}). If you want to do this, call this
function (function(){})();
Here is your working code: Plunker
As I'm new to Angular JS I was wondering how could I load an external template and compile it with some data into the targeted div.
For instance I have this template :
<script type="text/ng-template">
<img src="{{Thumb}}" />
<script>
The div that is supposed to contain the template :
<div data-ng-controller=" ... "></div>
The template is located somewhere in a folder /templates/test.php. Is there a build in way of doing the template loading like a directive would do and compile it against some data that would replace the key {{Thumb}} ( and many others of course ) ?
EDIT : What if I use $routes and load a template when I'm in the root of the website ? How could that be achieved ?
Using $templateRequest, you can load a template by it’s URL without having to embed it into your HTML page. If the template is already loaded, it will be taken from the cache.
app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
// Make sure that no bad URLs are fetched. If you have a static string like in this
// example, you might as well omit the $sce call.
var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');
$templateRequest(templateUrl).then(function(template) {
// template is the HTML template as a string
// Let's put it into an HTML element and parse any directives and expressions
// in the code. (Note: This is just an example, modifying the DOM from within
// a controller is considered bad style.)
$compile($("#my-element").html(template).contents())($scope);
}, function() {
// An error has occurred here
});
});
Be aware that this is the manual way to do it, and whereas in most cases the preferable way would be to define a directive that fetches the template using the templateUrl property.
in Angular there's 2 ways of using template (at least 2 ways that i know about):
the first using an inline template (in the same file) with this syntax:
<script type="text/ng-template">
<img ng-src="{{thumb}}">
</script>
the second one (what you want) is external template:
<img ng-src="{{thumb}}">
so what you need to do is to remove the script part from your template and then use the ng-include in the wanted div like this:
<div ng-include="'templates/test.php'"></div>
need to have double quotes and single quotes to work.
Hope this helps.
Let's say I have this index.html:
<!doctype html> <html lang="en" ng-app="myApp">
<body>
<script src="tpl/ng.menu.tpl" type="text/ng-template"></script>
<mainmenu></mainmenu>
<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
And I have a template file "tpl/ng.menu.tpl" with only these 4 lines:
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
My directives mapping "js/directives.js":
angular.module('myApp',['myApp.directives']);
var myModule = angular.module('myApp.directives', []);
myModule.directive('mainmenu', function() {
return {
restrict:'E',
replace:true,
templateUrl:'tpl/ng.menu.tpl'
}
});