I have tried writing angularJS controller inside experimental javascript of variation in optimizely. it does not seems to work.
Basically i would like to insert HTML snippet like this
<div ng-app="myApp">
<div ng-controller="MainController">firstApp</div>
</div>
and an controller for this like below:
var myApp = angular.module("myApp", []);
myApp.controller("MainController", function($scope, $window) {
alert("Angularjs call function on page load");
});
i have tried few ways and its not working, Is there any way to make it work
Plnkr code: Demo
Your html should be
<div ng-app="testApp">
<div ng-controller="MainController">firstApp</div>
</div>
and js
var myApp = angular.module("testApp", []);
myApp.controller("MainController", function($scope, $window) {
alert("Angularjs call function on page load");
});
Module app name should be same to ng-app and value of ng-controller is the name of the controller you will use
Related
The first time I used angular.js, using http request to dynamically render data, I encountered such a strange problem, there is no problem with the following code alone, but if you put it in the page I want to do , it will give an error:
Error: [ng:areq] Argument 'customersCtrl' is not a function, got undefined
But I have defined customersCtrl,
<div ng-controller="customersCtrl">
This is my code:
<div ng-app="myApp" >
<div ng-controller="customersCtrl">
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
});
</script>
</div>
You must define the <script> tag outside of the ng-app element. Should you use inline js, the script tag must be defined before the ng-app element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = ["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas"]
// $http.get("http://localhost:17900/flower/flowers?flowerName")
// .then(function (result) {
// $scope.names = result.data.body;
// });
});
</script>
<div ng-app="myApp">
<div ng-controller="customersCtrl">
<p ng-repeat="name in names">{{name}}</p>
</div>
</div>
Note
I recommend you to use version 1.7.5
The problem is you include the angular controller in html tags before you define it, So angular compiler could not find the customersCtrl as function.
Edit Your code like this :
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl',['$scope','$http' function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
}]);
</script>
<div ng-app="myApp" >
<div ng-controller="customersCtrl"></div>
I have injection problem. I have no idea why my html is not rendering.
Render HTML in the view; it should be processed/created in the controller, and then rendered in the html view.
This code is currently not working as the html appears as text:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', myController);
myController.$inject = ['$scope']
function myController($scope) {
$scope.html = "<b>HTML inserted</b>";
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-controller="MyCtrl as vm">
<div>Html</div>
<div>{{html}}</div>
<br/>
</div>
For rendering of html in angular try the ng-bind-html attribute.
In your case:
<div ng-bind-html="html"></div>
More info:
ngBindHtml in AngularJS
Edit: Also add ngSanitize dependence:
ngSanitize
try adding 'ngSanitize' in your module dependencies if you're using ng-bind-html
I have got a problem with calling a controller(not just a function) from another controller. My HTML looks like:
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div id="msg"></div>
</div>
</div>
And the script:
var module = angular.module('MyApp', []);
module.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
test();
});
}]);
module.controller('test', [function() {
document.getElementById('msg').innerHTML = 'Hello';
}]);
Please see the jsfiddle here: http://jsfiddle.net/y35emhny/
Is there any way how I can achieve it?
I am have trying to fix this but not able to find a solution since a long time. I an angular newbie and trying to make my website home an angular app. The angular app has a controller and 2-3 directives. In the head section of the page I have:
Home.cshtml:
<head>
//Some other stuff....
<script src="/Scripts/angular.min.js" type="text/javascript"></script>
<script src="/Scripts/myapp.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HomeController">
<page-tile-grid></page-tile-grid>
</div>
</body>
And myapp.js has
var myapp= angular.module('myapp', [])
.controller("HomeController", function($scope){......})
.directive('page-tile-grid', function () {....})
.directive('page-tiles', function () {....})
.directive('page-tile-info', function () {....})
I see no error on the console. But template in the directive does not load. And see this warning on the Batarang Angular console:
Module "myapp" was created but never loaded.
What if you try something like:
var app = angular.module('myapp', []);
app.controller('HomeCtrl', function($scope) {
$scope.title = "Homepage";
...
});
app.controller('AboutCtrl', function($scope) {
$scope.title = "About";
...
});
I am kind of new to angular JS and this might be the simple question but i am stuck on this.
What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..
-- Main Page HTML --
<html ng-app="myApp">
<body ng-controller="MyAppCtrl">
<my-component>
</my-component>
</body>
</html>
-- Main page JS --
var myAppModule = angular.module('myApp');
myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
return {
restrict: 'E',
templateUrl: 'myComponent.aspx'
};
});
-- Template(myComponent.aspx) --
<html>
<!-- include template script -->
<body ng-controller="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</body>
</html>
-- Template page JS --
var templareModule = angular.module('myApp', []);
templareModule.controller('ComponentCtrl', function ($scope, $http) {
$scope.showAlert = function () {
alert("clicked");
}
});
So for this I am unable to get alert on click.
Thanks in advance.
You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.
index.html:
<html ng-app="myApp">
<body>
<h1>Test</h1>
<div ng-view></div>
<script> (Insert paths to required Angular scripts and your JS files)</script>
</body>
</html>
App JS file:
Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'myComponent.aspx',
controller: 'ComponentCtrl'
})
}])
.controller('ComponentCtrl', function ($scope) {
$scope.showAlert = function () {
alert("clicked");
}
});
myComponent.aspx:
<div class="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</div>
Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.