simple angularjs app, but I'm getting {{ this should be the data }} - javascript

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

Related

$http.get reutrns source code instead of html results

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);
});

How to use AngularJS Controller for Dynamics CRM development

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.

Angular MVC View only Structure problems

I'm geting problems with angularjs structure. I pretend to have a translation controller or service or wathever and one controller per group of pages (I will explauin that point).
The idea is an index page that loads all the .js files and .css (that are global on the entire web site). That page will load the login file (in it´s body), with its angular controller. Then it will load a template with nav, header, footer, etc... templates, and in the article section I pretend to load diferent pages (links in the nav menu) each page (or group) with its controller. I'm starting with angularjs and it doesn't works. The idea will be similar at next code:
index (reduced for the example):
<!DOCTYPE html>
<html **ng-app="app" ng-controller="translationsCtrl"**>
<head>
<title>something</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--GLOBAL STYLES (WILL BE MORE, ONLY EXAMPLE)-->
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="loginCtrl" ng-include="'views/login.html'"></div>
<!--GLOBAL SCRIPTS (WILL BE MORE, ONLY EXAMPLE)-->
<script src="assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="controllers/translationsCtrl.js"></script>
</body>
</html>
in login.html it will be like this:
<!--STUFF-->
<script src="controllers/loginCtrl.js"></script>
controllers will be:
loginCtrl.js:
angular
.module('app', [])
.controller('loginCtrl', function($scope) {
$scope.login = 'login';
})
translationsCtrl.js
angular
.module('app', [])
.controller('translationsCtrl', function($scope) {
$scope.text = 'text';
});
how can I do something similar working? Are there any better method for doing it? The web app is to huge so I can't use requirejs or simplepage angular.

Initiating AngularJS

I'm having an issue getting started with AngularJS. I have downloaded the minified file and have it living in a JS directory along with a app.js file. Everything works until I try calling the app.js file. Then it breaks. Here's my code.
index.html
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>My App</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<h1>Intro to Data Binding</h1>
<div ng-controller="DBController">
<input type="text" ng-model="userName" />
<p>Hello, {{userName}}.</p>
</div>
</body>
app.js
function DBController($scope) {
$scope.userName;
}
on your body tag do ng-app="app"
then, in your .js file...
angular.module('app', [])
.controller("DBController", function($scope){
$scope.userName = "My Name";
})
It also might be helpful to get a basic understanding of angular
the angular team provides a lot of useful videos and other resources
https://docs.angularjs.org/misc/started
Free Video Tutorials: https://www.codeschool.com/courses/shaping-up-with-angular-js

AngularJS ng-view not loading template file content

I'm trying to set up a demo angular app but for some reason my partial (partials/test.html) content isn't loading into the layout file. Here's the index.html:
<!DOCTYPE html>
<html lang="en" ng-app="btq">
<head>
<meta charset="utf-8" />
<title>NgView Test</title>
</head>
<body>
<p>Some stuff on the page.</p>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
AngularJS is version 1.0.7. app.js contains the following:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('btq', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/dashbaord', {templateUrl: 'partials/test.html', controller: 'DashboardCtrl'});
$routeProvider.otherwise({redirectTo: '/dashboard'});
}]);
/* Controllers */
angular.module('btq.controllers', []).
controller('DashboardCtrl', [function() {
}]);
I'm obviously missing something simple. Any help would be appreciated!
May be its because of "typo". You wrote "dashbaord" instead of "dashboard" here:
$routeProvider.when('/dashbaord' , ...
Change
angular.module('btq.controllers', [])
to
angular.module('btq')
otherwise this creates a second app in your app.js

Categories