I'm new to AngularJS. Using $http service, i'm requesting an HTML page from localhost. But i'm getting the source code of that page instead of the result.
http_service.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJs | HTTP Service</title>
<script src="js/angular.min.js"></script>
<script>
// Initialize the Angular Application
var app = angular.module('myApp', []);
// Initialize an Angular Controller
app.controller('controller', function($scope, $http){
// Ruquest a page from the remote server
$http.get('files/myFile.html')
// After initializing the $http object, run a succes function
.then(function(response){
$scope.reqData = response.config;
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="controller">
<h4>{{reqData}}</h4>
</body>
</html>
files/myFile.html
<!DOCTYPE html>
<html>
<head>
<title>My file</title>
</head>
<body>
<h1>Hello from AngularJS by Google</h1>
</body>
</html>
how can i show the heading in myFile.html instead of the source code.
can you try to assign the value by injecting $sce and use the code change as below,
$http.get('files/myFile.html').then(function(response){
$scope.reqData = $sce.trustAsHtml(response.config);
});
Related
This is mine html file.
<!DOCTYPE html>
<html lang="en">
<head ng-app="drawings">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.5/lodash.min.js"></script>
<script src="drawings_core.js"></script>
</head>
<body ng-controller="mainController">
</body>
</html>
This is mine drawings_core.js file.
var app = angular.module('drawings',[]);
var drawing;
function mainController($scope,$http){
$http.get('/get_drawing').success(function(data){
console.log(data);
}).error(function(err){cosnole.log(err);});
}
Content of mainController function wont't get called.
Get request is not sent.
You need to register your controller in your application. The code could look like this, but this is not tested, you might need to make some small alterations.
I would suggest creating separate methods for your functionality. You can then call them like I did in this example.
Even better would be to create a separate service where you deal with the http stuff.
I have an example here: https://eidand.com/2015/01/22/starting-with-angular-part-3-services/
It's old, but it should be enough to get you started.
app.controller(mainController, ['$scope', '$http', function ($scope, $http) {
$scope.getDrawing = function ()
{
$http.get('/get_drawing').success(function(data){
console.log(data);
}).error(function(err){console.log(err);});
}
$scope.getDrawing();
}]);
})();
I integrate an angularjs app in my CRM 365 as a web ressource type HTML then i add the Canuular controller as a web ressource type javascript and add his dependency in my html view the issue is that my controller isn't loded
is there a specifiq configuration in CRM for angularjs developpment
there is my code HTML:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
**<script src="tit_releveDeCompteurPourTableauDeBordAngularController" type="text/javascript"></script>**
<script src="tit_releveDeCompteurPourTableauDeBordAnularService" type="text/javascript"></script>
<title>titleTest</title>
</head>
<body ng-controller="TestController">
<div class="container" style="font-family: undefined;">
<h1>xxxxxxxxx</h1>
</div>
</body></html>
and my controller is like bellow :
var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('TestController',['$scope', 'serviceFactory', function ($scope, serviceFactory) {
debugger;
alert("TestController");
$scope.name = "nametest";
}]);
You have not defined an ng-app in your html.
Please add ng-app to your body or div or ... like this:
<body ng-app="ngAppDemo">
ng-app tells angular where it should be active on your page.
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', []);
simplest angularjs app
I've create asp.net mvc4 app and I'm installed angularjs package from nuget.
Layout.cshtml is cleared and it's looked like this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/AngularJSApp/main.js"></script>
</head>
<body>
<div ng-controller="homeController" class="container body-content">
{{ testData }}
#RenderBody()
</div>
</body>
</html>
I've created main.js where I stored module and correspoding controller, just simple one
var app = angular.module("myApp");
app.controller('homeController', ['$scope', function ($scope) {
$scope.testData = "this is test data";
}]);
I've double checked file references from _Layout.cshtml (both .js files are loaded)
but on rendering page I'm getting {{ testData }} instead of actual data.
What I'm missing here?
If you declare module, you should use:
var app = angular.module("myApp", []);
This notation:
var app = angular.module("myApp");
could be used later to retrive that module and append stuff to it
The more other modules you will need, you can inject them into that array, e.g.
var app = angular.module("myApp", ['ui.router']);
Try with this in your main.js
var app = angular.module("myApp", []);
You are missing the second parameter of the module method
Angular module reference
I'm new to Angular.js so bear with me. I found Angular's routing pretty neat which is why I want to try my first Webpage with it. My approach is the following:
<!doctype html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>testrouting</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="inject" ng-view></div>
</body>
</html>
and the an app.js
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'routes/index.html'
});
});
problem is, that index.html is not shown. Inside index.html I have a plain <p> element with some text. But no text is showing on my root index. As far as I know angular is a front-end framework, so is there any Webserver neccessary which causes the problem?
Thanks
I've seen places that say that routing requires a server:
http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating