how to inject an html element with angular directives using jquery? - javascript

I want to inject one HTML element which has been announced with angular directives. With jquery. but the application is not working.
<!doctype html>
<html>
<head>
<title>test angular</title>
</head>
<body>
<div id ="header" ng-app="loginApp"></div>
<script src="js/jquery.js"></script>
<script src="js/angular.js"></script>
<script>
$("#header").load("header.html");
var app=angular.module("loginApp",[]);
app.controller("loginCtrl",function(){
$scope.data="mydata";
});
</script>
</body>
</html>
and the header.html is :
<div ng-controller="loginCtrl">
{{data}}
</div>
but there is no result also no error messages:

You can use the ngInclude directive for that:
<div ng-controller="loginCtrl">
<div ng-include="'header.html'"></div>
</div>

Related

jQuery templates not working (jQuery 3.4.1)

I am not sure what is wrong with my code. When I open it in Firefox, it doesn't do anything.
However, copying it into fsfiddle it works
Am I missing a JavaScript file for jQuery templates but I thought this was added to jQuery in 1.5
why
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.4.1.js"></script>
<script src="scripts/main.js"></script>
<meta charset="UTF-8">
<title>Exam Random Generator</title>
</head>
<body>
<div id ="mainContainer"> </div>
<script id="questionTemplate" type="text/x-jQuery-tmpl">
<div class="questionContainer">
<p class="question">${sQuestionText}</p>
</div>
<br/>
</script>
<script type="text/javascript">
// Render the books using the template
$("#questionTemplate").tmpl(oQuestions).appendTo("#mainContainer");
</script>
</body>
</html>

Simple Angular JS app not working and not showing any errors

My Simple Angular JS app isn't working. Can anybody help me out, the following is the code. Index.js is the main file which includes a script file controller.js .
The browser does not shows any errors when I try to run the app:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="Angad";
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
</head>
<body ng-controller="myCtrl">
<nav>Navigation</nav>
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>{{name}}</h1>
</div>
<footer>Copyright-2017</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
it is due to script loading statement
change
<script src="js/angular.min.js" />
<script src="js/controller.js" />
with
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Simple Angularjs app works without a webserver.
Your example will also work.
Just close the script tag properly.
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>

Angular.js not found, but no error on link

I picked up Angular.js yesterday as part of an internship, and Node.js the day before, so I'm a complete beginner with these technologies.
Basically, I tried to make a really simple page with an input field which would print the input text right next to the field, like such. As you can see, it works in a jsfiddle.
But when I try this locally, I get a ReferrenceError at the angular.module call of my controller, and this error in my browser.
Here's my index.html:
<div ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
And my controller.js:
var myApp = angular.module("myApp", []);
myApp.controller('AppCtrl', function($scope) {
$scope.query = "";
$scope.queryResult = function(){
return $scope.query;
};
});
Any idea what I'm doing wrong ?
you should include
<script src="./controller.js"></script>
after angular js files
The order of your controller file and AngularJS CDN is the problem. Please add your JS file beneath AngularJS CDN.
And also You have added ng-app to a div which does not have a closing tag. It might cause problems too.
Try the following code:
<html ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>
It looks like you are including jQuery after angular. jQuery should be first.
It also looks like you are including angular twice.
angular.min.js and angular.js

AngularJS ng-hide / ng-show

Im learning about AngularJS but I have a problem with the "ng-hide" directive, its doesnt work.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba ng-hide/ng-show</title>
</head>
<body>
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
And this is my script for Angular
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js (of course, between "script" tags)
You need to initialize your application.
Add ng-app to your html
<html ng-app="MyApp">
...
Then create your app module
<script>
var app = angular.module("MyApp", []);
</script>
You aren't bootstrapping your application.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app"> <!-- You're missing this -->
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
</html>
script.js
var app = angular.module('app', []); // You're also probably missing this
Plunker
Currently you haven't compiled page by angular compiler, for that you need add ng-app directive(basically it takes module name, but in sample you should do only this to make) it working.
Markup
<body ng-app="">
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
Demo Plunkr
Technically you should create a module and add components to that module (in enterprise world).
Jose you have to tell your page that it is an Angular app
<html lang="en" ng-app="app">
and you have to create your app in the JS file:
angular.module('app', []);

Uncaught Error: [$injector:modulerr] - Angular ng-include

I'm using ng-include to attach some HTML pages to one HTML page in AngularJS.
Find the Main.html page code
<!DOCTYPE html>
<html ng-app="Test">
<head>
<link rel="stylesheet" href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-controller="userController">
<div class="container">
<div ng-include="'test1.htm'"></div>
<div ng-include="'test2.htm'"></div>
</div>
</body>
</html>
test1.html code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Full Name:
</body>
</html>
Seems like nothing wrong in my code. But when I load it in browser nothing is displayed and I get console error says,
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=Test&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A387)
Please help me to resolve the issue.
The Error is here
<html ng-app="Test">
you have to define a new module to use it as app
something Like that
MainModule.js
var app =angular.module("myApp",[]);
app.controller("myCTRL"["$scope",function($scope){
}]);
then include that js file into your project to use it
Like that
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="assets/js/MainModule.js"></script>
</head>
<body ng-controller="myCTRL">
<div class="container">
<div ng-include="'test1.htm'"></div>
<div ng-include="'test2.htm'"></div>
</div>
</body>
</html>
you have to include the 'angular route java script file in head tag.
Like this,
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.route.js"></script>
</head>

Categories