I'm New to Angular JS. I'm trying a simple Example but it seemed to be not working.
I created a script.js with following code:-
var myApp = angular.module("myModule", []).controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial";
});
And HtmlPage1.html :-
<script src="Script.js"></script>
<script src="Scripts/angular.min.js"></script> </head> <body>
<div ng-app="myModule">
<div ng-controller="myController">
{{ message }}
</div>
</div>
But I'm getting this result:-
{{ message }}
I don't know what's wrong . Please Help...
Load Script.js after loading reference of angular.js, because your module declaration needs the reference of angular.
You need to do is make sure that the angular module is created before you attempt to register controller on it .
<script src="Scripts/angular.min.js"></script>
<script src="Script.js"></script>
DEMO
<script src="Scripts/angular.min.js"></script>
<script src="Script.js"></script> </head> <body>
<div ng-app="myModule">
<div ng-controller="myController">
{{ message }}
</div>
</div>
Include controller after angular library (y)
Related
I want to move the angular to its own .js file, so I looked at Using an HTML button to call a JavaScript function.
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
As far as I understand, an event has to be triggered when I click on the button, so I tried following this example on w3schools
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
It simply counts the number of times a button has been clicked and it works. However, when I move the <script> to its own .js, the function is not found. Am I missing something? a dependency perhaps?
New files:
HTML:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
</body>
</html>
.js
<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
So two problems.
First, in your .js file you can remove the <script> tags. You only need this for javascript in html files.
Second, in your .html file, you need to add a reference to your script file. This needs to go below the angular script since it is dependent on that script, so just add, <script src="[link to your script file]"></script> to your html right below the angular script.
.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
When I try to send html as parameter in translate decorator my html code is displayed as text and not as html. Like in code under:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.15.2/angular-translate.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.15.2/angular-translate-interpolation-messageformat.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.15.2/angular-translate-storage-cookie.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.15.2/angular-translate-storage-local.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.15.2/angular-translate-loader-url.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.15.2/angular-translate-loader-static-files.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.15.2/angular-translate-handler-log.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<p>{{ 'HEADLINE' | translate }}</p>
<p>{{ 'PARAGRAPH' | translate }}</p>
</div>
</body>
var translations = {
HEADLINE: 'What an awesome module!',
PARAGRAPH: 'This is cool link test Check it out!'
};
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// add translation table
$translateProvider.translations('en', translations);
$translateProvider.preferredLanguage('en');
}]);
app.controller('Ctrl', ['$scope', function ($scope) {
}]);
As a result I get:
This is cool link test Check it out!
html code it self in browser instead of anchor html representation.
I want anchor to be processed as html tag.
Anybody has a suggestion?
In order to actually process the HTML instead of outputting it as characters, you can use the ng-bind-html directive. In your case, it will look like this:
<p ng-bind-html="'PARAGRAPH' | translate"></p>
I have written a simple example to demonstrate the use of bootstrap notify but its not working.
Below is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="bootstrap-notify.js"></script>
<script src="bootstrap-notify.min.js"></script>
<script>$.notify("Hello World");</script>
</head>
<body>
</body>
Replace your script as below just add ready function it work fine. and also add bootstrap css for look good.
<script>
$(document).ready(function(){
$.notify("Hello World");
});
</script>
I have a html setup in my app folder and this is copied in the dist folder by gulp.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../dist/css/style.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
<!-- build:jsLib js/libs.js -->
<script src="../libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<!-- build:jsApp js/app.js -->
<script src="app.js"></script>
<!-- endbuild -->
<script src="../libs/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
</body>
</html>
That part is used to make fake service calls and I don't want it in deployment files:
//something like *ignore this*
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
Is is possible to ignore this line with gulp?
Yes this is possible. A nice plugin to do this would be the gulp-remove-code plugin.
Below is an example of how you would use it
HTML:
<div>
<!--removeIf(production)-->
<div class="sandbox-banner">Running in sandbox environment</div>
<!--endRemoveIf(production)-->
<span>Removing code is ready.</span>
</div>
GULP:
var gulp = require('gulp');
var removeCode = require('gulp-remove-code');
HTML_FILES = '/path/to/html/**/*.html';
gulp.task('clean-html', function() {
return gulp.src(HTML_FILES)
.pipe(removeCode({ production: true }))
.pipe(gulp.dest('dist/'));
});
And then you just call it by saying
gulp clean-html
Anything inside of those comment tags will be removed. Also, the object passed to removeCode is not namespace specific. So you can change the naming to whatever.
I am trying to load templates from a file into an HTML file using a script tag. I want to use this as a template in UnderscoreJS - but I'm not able to load the file:
//main.js
this.template = _.template($("#add-question").html());
console.log("testing");
console.log(this.template({
question: "How are you doing?",
yesOrNo: true
}))
//console output:
testing Main.ts:37
Main.ts:38
//main html file:
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<script type="text/template" id="add-question" src="client/add-new-question.html"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
</html>
// client/add-new-question.html
<form id="testForm">
<span>"<% question %></span>
<input id="questionInput" type="text">
<span>"<% yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
Update:
Here's the updated HTML in in which I've tried loading the html though a script tag in the body. Still doesn't work. This is how its expected to be done when rendering the template with UnderscoreJS. I want to be able to load the template with requireJS but render it using the underscoreJS template function.
<body>
<script type="text/template" id="add-question">
<form id="testForm">
<span>"<%= question %></span>
<input id="questionInput" type="text">
<span>"<%= yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
You have to use <%= to output variables instead of <%.
It looks like you are using requirejs.
So you could also use the tpl extension and store your underscore template in .tpl files:
https://github.com/ZeeAgency/requirejs-tpl
define(['tpl!client/add-new-question.html'], function(tpl) {
console.log(tpl({
question: "How are you doing?",
yesOrNo: true
}));
});
Links:
How to use underscore.js as a template engine?
and underscore.js