This is my angular js file
test.js file:
var app = angular.module("angleapp", [])
.controller('MainController', ['$scope', function ($scope) {
$scope.test = "hi all"
}])
.directive('programlisting', function () {
return {
restrict: 'E',
scope: {
},
templateUrl: '/directives/test.html'
};
});
test.html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
alert("stop");
</script>
</head>
<body>
hi how are you
</body>
</html>
This is my index file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="/directives/test.js"></script>
</head>
<body data-ng-app="angleapp">
<div class="main" ng-controller="MainController">
<programlisting></programlisting>
</div>
</body>
</html>
Now when I try to run this
hi how are you
is coming in the output. but the alert window does not pop-op where i am i going wrong?
The problem is that script tags are not executed by browser automatically when injected with innerHTML (what happens in case of templateUrl). Normally this tags are evaluated programmatically (eval). jQuery does it but jqLite (internal jQuery-like implementation of Angular) does not.
In your case the fix is simple, move jquery script tag before angular, then Angular will use jQuery for DOM manipulations:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Also, you need to clean up your test.html template, leave only body content. This is how test.html should look:
hi how are you
<script type="text/javascript">
alert("stop");
</script>
And finally, I don't know why you need to have script tag inside of partial template, but in most cases this is bad idea, and there are better approaches.
In partials html page(test.html), No need to write doctype, head and body tags. Just write your html elements and script. It should work.
Related
I have just started to learn angular.js but ng-init is not working in my code. I searched through internet but wasn't able to find any answer.
Here is my code thanks in advance !!
<!DOCTYPE html>
<html lang="en">
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-init="message='hello, World!'">
<h1 ng-model="message">{{ message }}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Add the code below in your app.js
var ngClassifieds=angular.module("ngClassifieds",[]);
I think the problem is with script loading
<head>
<title>ngClassifieds</title>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</head>
add your scripts in header tag
Html Code
<body ng-controller="DemoCtrl" ng-app="main" ng-init="data='welcome'">
{{data}}
</body>
Script Code
var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {
});
I want to include all of my directive templates within a single file to reduce the number of HTTP requests required to load a directive heavy page.
I have this directive
angular.module('bwDirectives', [])
.directive('bwInfoCard', function () {
return {
restrict: 'E',
transclude: false,
replace: true,
scope: { title: '=' },
templateUrl: "one-template",
};
})
If I specify the templates in-line like this then it loads the directive template properly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Directive Test Fixture</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
<script src="../../../Libraries/angular.min.js"></script>
<script src="../Widget.js"></script>
<script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
<h1>Base Info Card</h1>
<script type="text/ng-template" id="one-template">
<div>This is first template</div>
</script>
<script type="text/ng-template" id="two-template">
<div>This is second template</div>
</script>
<div ng-controller="InfoCardFixture">
<bw-info-card title="title"></bw-info-card>
</div>
</body>
</html>
If I try to include the templates via NgInclude it however fails. I guess it tries to load the template for the directives before doing NgInclude (even though it is earlier in the file). The correct script tags are getting included on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Directive Test Fixture</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
<script src="../../../Libraries/angular.min.js"></script>
<script src="../Widget.js"></script>
<script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
<h1>Base Info Card</h1>
<div ng-include src="'templates.html'"></div>
<div ng-controller="InfoCardFixture">
<bw-info-card title="title"></bw-info-card>
</div>
</body>
</html>
Is there something that I am missing or can you not NgInclude templates for use with directives?
Thanks.
Take a look at this discussing where Pete Bacon Darwin explains the order that directives are linked/compiled. https://groups.google.com/forum/#!topic/angular/3HsNz4ncnYA/discussion. You could probably rearange your html to get this working but this is not really what ng-include was meant to do. I'd recommend using something like angular-templatecache if you don't want to load your templates with AJAX.
I have been following a tutorial to learn Angular js, and i am using Web Storm 9.0.1.
I have simply created a Html page and loaded the Angular.js file to the project.
this is my simple code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
</script>
</body>
</html>
But all i get when i run the page is :{{helloMessage}} as a header 1 !
What should i do ? what i am missing here ?
You need:
<body ng-app>
This ngApp is needed to make understand AngularJS where it has to work
Here's your the working code:
http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview
You just haven't initialized the Angular application. All you need to do is modify your body tag a bit. Notice the ng-app attribute in the body tag below:
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</body>
check Angular hello word in plunker
<html ng-app="plunker">
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
You always need to put the directive first. You can also do it in or any other html tag. The ng-app directive tells the browser 'hey, this is an Angular app, let's see the script'. After the ng-app it will recognize all Angular directives.
It's also better practice to put the angular script loading at the bottom of the html, after the body. It's advised to load it last for performance and screen loading reasoning.
Thanks all, Yes indeed the problem was with the missing ng-app directive.
Note: the tutorial i was following missed this point!
A working Code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Missing the ng-app directive:
<body ng-app="">...</body>
Try this code if you have not found any solution yet.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Hello World </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>
<script>
// INITIALIZE THE APP.
var hello = angular.module('HelloWorldApp', []);
// ADD THE CONTROLLER.
hello.controller(
'HelloWorldCtrl',
['$scope', function ($greet) {
$greet.helloMessage = 'Hello World!';
} ]
);
</script>
</body>
</html>
I have defined the "ng-app" directive inside the DIV element and later initialized it in the script. This way I can add multiple view and controller inside the DIV element.
For example. Add another DIV below the header tag.
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<div ng-controller="greet">
<span> {{greetings}} </span>
</div>
Later add this code inside the script tag.
// ADD THE SECOND CONTROLLER.
hello.controller(
'greet',
['$scope', function ($greet1) {
$greet1.greetings = 'Good Morning';
} ]
);
All you need to do is to define an AngularJS application on your page. The ng-app directive defines an AngularJS application. You can do it on your page like :
<html ng-app=""> or
<body ng-app=""> or
<div ng-app="">
Make sure you do it before you start writing other angular JS code.
For more on the fundamentals of Angular JS :
http://www.w3schools.com/angular/angular_intro.asp
change you angular version to 1.2, I did it and it worked.
here it is:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js
trying beginner's Angular using tutorial here: https://www.youtube.com/watch?v=WuiHuZq_cg4. i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" https://gist.github.com/9ad771c60d33fc020216.git, but also here: [what am i missing??]
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.0.0rc3/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
</head>
<body>
<div ng-controllers="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
todo.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
Try
ng-controller="TodoCtrl"
instead of
ng-controllers="TodoCtrl"
S won't tag with controller
i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk :
http://plnkr.co/MxXzlenAuGcDy8iljKYX
the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed.
i am using this under chrome and i don't get any errors in my localhost console
I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:
http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'sidebar.html'"></div>
<div ng-view></div>
</body>
</html>
JS
// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/products/:prodId",{templateUrl:"products.html"})
.when("/products",{templateUrl:"products.html"})
.when("/", {templateUrl:"home.html"})
.otherwise({redirectTo:"/"});
})