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;
});
Related
I am new to angularjs,i try a demo test for routing ,below is my codes
app.js
var app=angular.module("tutorialApp",["ngRoute","tutorialCtrlModule"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl:"views/tutorial.html",
controller:"TutorialCtrl"
})
.when("/tutorialsecond",{
templateUrl:"views/tutorialSecond.html",
controller:"TutorialCtrl2"
});
});
tutorialCtrl.js
angular.module("tutorialCtrlModule",[])
.controller("TutorialCtrl",["$scope",function($scope){
$scope.name = 'dipti';
$scope.bindvalue = 2;
$scope.timesTwo = function(){
$scope.bindvalue *=2;
}
}])
.controller("TutorialCtrl2",["$scope",function($scope){
$scope.name = 'Dipti';
}]);
index.html
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Tutorial App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
this is my routing pages
tutorial.html
<u><h3>Route Page</h3></u>
<u>Expression</u>
<br>
{{ name }}
<br>
<u>Data Binding</u>
<br>
<label>Name</label>
<br>
<input ng-model="name">
<br>
<p>My first expression: {{ 5 + 1 }}</p>
<br>
Tutorial Second Page
When i load my project the default page tutorial.html will show,but ! sign will come in my url like http://localhost/Angular_demo/#!/
When i click on link in tutorial.html page for routing it not working and this url will show http://localhost/Angular_demo/#!/#%2Ftutorialsecond.How i will slove it.
Configure your hash prefix correctly
angular.module('myApp').config([
'$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix(''); // or whatever you want
}
]);
Extra:
make sure html5mode is active
$locationProvider.html5Mode(true);
and that your base is set
<base href"/"/>
So I am trying to build the simplest Angular JS application and no idea what I am doing wrong.
It is made of 4 files:
index.html - which I use like a layout to display main.html
app1.js - used for defining simple routing rules like /main should redirect to main.html in combination with MainController; when it doesn't find a valid path, revert to a default which equals the previous path
MainController.js - I just have some timer functions here
main.html - displays a search button and search textbox
For some reason, I can't see mainvtemplate from my index.html which should redirect me to /main.
Here is the code:
index.html file
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
the app1.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
the main.html file:
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
You may ignore the countdown, this is a timer created in MainController.js. I render its simplified logic:
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
$scope.countdown = 5;
};
app.controller("MainController", MainController);
}());
Isn't weird I'm not able to see the search button and search textbox? Maybe I am missing sth really obvious here.
in your index.html
<script src="app.js"></script>
replace with
<script src="app1.js"></script>
main.html
<div ng-app="githubViewer" ng-controller="MainController ">// add ng app ang nd cntroller
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
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'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)
I'm new to web development and I'm trying to understand how the DOM works.
I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'
See below for the code.
Main Page
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
Code Returned
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
The Updated DOM - notice that my new javascript aren't seen.
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
What I'm trying to understand is;
1) Where does my new script code exist?
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
is it in memory only and not in the DOM?
2) I can get the warning to show correctly i.e $(".showmsg").click
fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?
3) What is the best way to trouble shoot this code if I cannot see it in my browser?
Many thanks!
If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild
An example of doing this would be
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);
Here is a fiddle showing this.