I have a main page like this:
index.html
<div id="ajaxContent"></div>
<button onclick="callAjax()">Click</button>
<script>
function callAjax() {
$.ajax({
type: "POST",
url: "angular.html",
data: data,
success: function (response) {
$("#ajaxContent").html(response);
}
});
}
</script>
And in angular.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>angular.module("myApp").controller("myCtrl", function ($scope) {
$scopr.test="hello!";
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
{{test}}
</div>
but after loading by ajax always says "angular is not defined" is there any way to do this?thanks.
First thing I would say, no need use jQuery for AJAX when you can use the angular's $http service.
If you want to load the whole html file based on some condition you can use a directive or angular's routing.
In my opinion it's wrong to try doing it this way, what are you trying to achieve?
I am quite sure that your problem with angular not being defined comes from the fact that you don't put the <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> in the page where you are trying to insert this HTML.
Related
Somehow, I am unable to display the data from my backend in the component. Console logging response.data gives me my data. I put it in the movies variable within the scope, but it doesn't bind. Here is the code:
INDEX.HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movies - AngularJS</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" id="app">²
<div class="box" ng-repeat="movie in movies">
<h2 ng-class="movie.genre">{{ movie.genre }}</h2>
<h1>{{ movie.title }}</h1>
<p>Change the values of the movie.</p>
<input ng-change="onChange" ng-model="movie.title" type="text">
<input ng-change="onChange" ng-model="movie.genre" type="text">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
MAIN.JS FILE
const app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
axios.get(`http://localhost:3001/api/movies`)
.then(response => {
$scope.movies = response.data;
console.log($scope.movies); // logs the data correctly
})
.catch(e => console.error(e.message));
});
I think it has something to do with Async/sync'ness but I don't know how to solve it. Thanks for the help! :)
Use angular $http instead of axios to make your requests since it will internally call for view digest when you update scope within callbacks
Any time you use code outside of angular context to update scope you need to tell angular to run a digest
Also will remove axios as unnecessary dependency to load in page since $http already exists in angularjs core
I do not see any issues with your code, probably you need to force the rendering manually using $scope.$apply();
$scope.movies = response.data;
$scope.$apply();
Since you are using axios and wrapping your angular $scope inside it, the digest cycle is unable to read that change
Use, angular's $http instead of axios
OR
If you want to use axios then, you can use $scope.$apply and wrap $scope.movies = response.data; inside it.
like
$scope.$apply(function () {
$scope.movies = response.data;
});
You need to tell angularjs to update - call
$scope.$evalAsync();
after set data
I have a problem with my single Page Application. When I start my Project with the keyuser.html as first site(home page) the Table from the connected Database is shown with the Data. When I use the normal home.html as entry Point for my Program, I can click the Hyperlink to my keyuser.html file, the controller does the necessary routing and I am on my keyuser.html site. But here is just the update Button, but not my Table with my Data.
+++++++++ keyuser.html ++++++
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="update()">Update</button>
<div id="flexGrid"></div>
</body>
</html>
<script>
var cv = new wijmo.collections.CollectionView();
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid');
flexGrid.itemsSource = cv;
// Get Data
wijmo.httpRequest("/api/Colors", {
success: function (xhr) {
cv.sourceCollection = JSON.parse(xhr.response);
}
});
</script>
++++++++++++ control.js ++++++++++++++
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/keyuser", {
templateUrl: "keyuser.html"
});
++++++++++++ home.html ++++++++++++++
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
</head>
<body>
<div ng-app="myApp">
Stammdaten
<div ng-view></div>
</div>
There are multiple things wrong here.
First of when loading HTML templates with routing the entire template gets loaded into the ng-view element. Which means that in your case the doctype tag, html tag, body tag and all the other tags are loading twice which might break your page.
Secondly when using AngularJS do not write your javascript in script tags, instead start using controllers, directives, componentens and services.
And last, make sure to include the correct AngularJS scripts like angular.js and angular-route.js
In general i highly recommend just going through the basics of AngularJS before proceeding because i feel like you are missing those.
I've just started learning AngularJS and built a small yet simple application, which consists of multiple controllers as shown here:
I have a SiteMaster.html page, inside this page I use ng-view as shown here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/app.js"></script> <!-- Consists of Routing -->
<script src="Templates/Params/paramsController.js"></script>
<title>Angular Routing Tutorial</title>
</head>
<body ng-app="mainApp">
<h1>sitemaster Template</h1>
<div ng-view></div>
</body>
</html>
As you can see the last script tag is the controller for the params page, Ideally I don't want this script tag reference on the SiteMaster instead I would like to place it inside the params.HTML page that way it's only loaded when it's required, now I've moved this script tag from the SiteMaster.Html to the params.Html page as shown here:
<script src="paramsController.js"></script>
<div ng-controller="paramsCtrl">
<h1>
Passed a parameter via url
</h1>
</div>
Yet when I run the project I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.5.2/ng/areq?p0=paramsCtrl&p1=not%20a%20function%2C%20got%20undefined
So my question is, how do I get this paramsController.js reference to work within the params.html page? instead of having it on the SiteMaster.html page?
Please note, when the paramsController.js is placed inside the SiteMaster.Html page it works as expected.
Any help would be appreciated.
Update
After adding ocLazyLoad I have done the following:
Added the script reference to sitemaster.html
Inside my app.js I have done the following:
var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);
Inside my paramsController.js I have the following:
angular.module("mainApp").controller('paramsCtrl', function ($scope, $routeParams, $ocLazyLoad) {
console.log($routeParams);
var param1 = $routeParams.page_number;
alert(param1);
});
And now I've hit a road block I'm unsure where or how I go about loading this controller via ocLazyLoad ? I following this documentation : https://oclazyload.readme.io/docs
First of all, your path is wrong. Change
<script src="paramsController.js"></script>
to
<script src="Templates/Params/paramsController.js"></script>
Also, include the following in your <head> section:
<base href="/">
And the second thing, I'm not sure, even that will not work as Angular has already been initialized. So you need to use a library like ocLazyLoaded to dynamically load resources.
Also, consider reading this post https://stackoverflow.com/a/17675432/2405040
Update:
In your params.html
<!-- Remove this line
<script src="paramsController.js"></script>
-->
<div ng-controller="paramsCtrl">
<h1>
Passed a parameter via url
</h1>
</div>
And now modify your $routeProvider configuration:
(From the docs https://oclazyload.readme.io/docs/with-your-router)
$routeProvider.
when('/foo', {
templateUrl: 'Templates/Params/params.html',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('Templates/Params/paramsController.js');
}]
}
})
This is my Index page
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Content/efDirective.js"></script>
<script src="~/Content/EmployeeForms.js"></script>
<html ng-app="AngularModule">
<body>
<div employee-form></div>
</body>
</html>
This is DirectiveJs
var app = angular.module("AngularModule", []);
app.directive("employeeForm", function () {
debugger;
return {
restrict: 'EA',
//template: 'helloworld',
templateUrl: 'Content/efTemplate.html'
}
});
Content in efTemplate.html is not displaying on index.cshtml page.
Check the message in browser console, probably there will be some error message. Maybe the url to template is not correctly resolved?
Did you specify the base url for angular?
The other option is to pre-render the template directly in your html index file. That has the benefit of saving the extra http request.
Like this:
<script type="text/ng-template" id="templateUrl">
<h1>your template </h1>
</script>
Example here https://docs.angularjs.org/api/ng/directive/script
I am trying to iterate with ng-repeat, using data served from a REST service. I manage to recover the data in my main.js file, but I can't get the data to be injected into the HTML.
I just started learning nodejs and angular, so it is very probable that I am not clearly getting it. I am logging twice the call to the REST service, getting the data in one of them (using a callback function) and getting a promise in the other (Which I assume happens because the call is synchronous, I didn't use any callback function here).
What I don't understand is why the HTML doesn't get the data.
Anyway, here's the code:
main.js
var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('restservice', function ($resource) {
var source = $resource(
"http://rest-service.guides.spring.io/greeting/");
var data =source.get({},function(){
//this log shows the data
console.log (data);
})
return data;
});
function AvengersCtrl($scope, $resource, restservice) {
$scope.servicedata = restservice;
//this log shows the promise
console.log($scope.servicedata);
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<!-- <link rel="stylesheet" href="vendor/foundation/foundation.min.css"> -->
</head>
<body>
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$">
<table>
<tr ng-repeat="resource in servicedata | filter:search">
<td>{{resource.id}}</td>
<td>{{resource.content}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-resource.js"></script>
<script type="text/javascript" src="/angular/app/main.js"></script>
</body>
</html>
Thanks in advance, regards
The code looks good to me.
The problem is the service returns a Json object instead of list.
If you wrap it with a list like this, you will see the result
$scope.servicedata = [restservice];