i am trying to add angular app in already existing jquery app.
Suppose i have a simple button in html.
I am trying to load angular app and run controller code on button click. I load the angular app mannually using angular.bootstrap(document, ['myApp']) . and also i am trying to pass some data from jquery to angular app. Can it be possible??
Have a look-
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<title>jA</title>
</head>
<body>
<button id="myButton" value="25">Hello world</button>
</body>
<script>
angular.module('myApp', []) // I defined the angular app.
.controller('MyController', ['$scope', function ($scope) {
console.log('Hello world'); // This should run on button click.
}]);
$(document).ready(function () {
$("#myButton").click(function(){
var some_value = '25'; //value i am trying to pass to angular app to use in angular app.
angular.bootstrap(document, ['myApp']); //load angular app
});
});
</script>
</html>
jQuery and AngularJS don't "talk" to each other directly, but Angular does "see" any other native javascript you have, so lets say - if you define a global variable and change it via jQuery when AnuglarjJS will access it - it can read and use the value.
Giving your example - who's using/calling MyController ?
check out the fiddle I've created for you as an example: https://jsfiddle.net/b29rng12/2/
<div id="myAngularApp">
<button id="myButton" value="25"> click to bootstrap</button>
<p ng-controller='MyController'>
this section will be bind to the controller. {{ test }} and the value is {{ some_jquery_value }}
</p>
</div>
<script>
var some_value = '25'; //value i am trying to pass to angular app to use in angular app.
angular.module('myApp', []) // I defined the angular app.
.controller('MyController', ['$scope', function ($scope) {
console.log('Hello world'); // This should run on button click.
$scope.test = "ricky";
$scope.some_jquery_value = some_value; // This is your predefined variable
}]);
$("#myButton").click(function(){
some_value = 30;
angular.bootstrap($("#myAngularApp"), ['myApp']); //load angular app
});
</script>
So just to explain - the app starts when its not bootstrapped, this is why you'll see {{ }} instead of values.
After you'll click the button ( as in your example ) - the app is bootstrapped - it still doesn't mean that this code will use the specific controller that you had in mind ( angular module can have 100 controllers - so who will use what ?! )
So I've defined <p ng-controller='MyController'> - is what binds the controller after the app has been bootstrapped.
I hope it helps ....
Related
I have a problem. I create a component in AngularJs and I want to pass data from controller to Component.
Data comes to template component, but in the controller on component is undefined!
This is my code.
The controller
angular.module('testModule')
.controller('testController', ['$scope',
function($scope){
var vm = this;
vm.name = "John";
}
]);
The component. Here in the console.log(vm.name) its undefined! This is my problem.
angular.module('testModule')
.component('testComponent', {
bindings: {
"name": '='
},
controllerAs: 'ctrl',
controller: ['$scope', function ($scope) {
var vm = this;
console.log(vm);
console.log(vm.name);
}],
template: "<h2>Hi {{ctrl.name}}</h2>",
});
HTML
<html ng-app="testModule">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="app.module.js"></script>
<script src="testController.js"></script>
<script src="testComponent.js"></script>
</head>
<body>
<div ng-controller="testController as ctrl">
<test-component name="ctrl.name"></test-component>
</div>
</body>
</html>
Here is the Plunker
Any idea? Thanks!
You should be hooking up over $onInit method to see what component bindings has.
vm.$onInit = function(){
console.log(vm.name);
}
The things which you were trying to do was totally doable till angular 1.5.X, but since AngularJS 1.6+ version they disabled prepopulating context of controller by introducing preAssignBindingsEnabled over $compileProvider. By default it is set to false. If you really want to see this working you could try to set the flag by below code(but I'd not recommend to use this). The main reason behind introducing this change is to make Angular and AngularJS API to look similar by design & architecture, eventually it will make one step closer to migration to Angular.
.config(function($compileProvider){
$compileProvider.preAssignBindingsEnabled(true);
})
Plunker
I am trying to delay the module creation, but it doesn't work (I am using Chrome). Here is my code TRY THE JSFIDDLE
<!doctype html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"> </script>
</head>
<body>
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
<script>
//initApp();
setTimeout(initApp, 1000);
function initApp() {
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl',
function($scope) {
$scope.name = 'Superhero';
});
}
</script>
</body>
</html>
If I remove the setTimeout and simply call initApp(), then it works. Can anyone explain why?
I am trying to embed an angular app into a page, and I am not allowed to add script tags to the HEAD. So I have to figure out some way to postpone the angular module initialization until after the angular.min.js is loaded and parsed.
It's not how you do it in angular way.
First i don't see any ng-app tag so your controler won't ever be called.
Second in order to delay the bootstrapping (and not using ng-app tag) you use angular.boostrap :
//initApp();
setTimeout(initApp, 1000);
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl',
function($scope) {
$scope.name = 'Superhero';
});
function initApp() {
angular.bootstrap('myApp');
}
For dynamic loading of javascript file see : lazy loading javascript the second point of the author of the post should do the job.
There is no need to use setTimeout. Browsers parse the JavaScript in the order they are declared in the HTML unless the async attribute is used.
I am using Material Design in my AngularJS app and I want to add a progress bar while my page is loading.
MD uses md-progress-* Directive to get a loading bar:
<md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
In my app I tried to get loading progress complete on $viewContentLoaded:
HTML:
<html ng-app="app">
<body ng-controller="AppCtrl">
<md-progress-circular ng-if="determinateValue === 100" md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
...
</body>
</html>
JS:
'use strict';
angular.module('app', ['ngMaterial', 'ngAnimate'])
.controller('AppCtrl', function ($scope) {
$scope.determinateValue = 0;
$scope.$on('$viewContentLoaded', function(){
$scope.determinateValue = 100;
});
});
But it doesn't work and I do not get any error.
ps. the <md-progress-linear> tag is disappeared from the DOM.
Firstly, use md-mode="indeterminate" as your loading is binary and has only two states. get rid of the ng-if and use the value attribute bound to $scope.determinateValue. So:
<md-progress-circular md-mode="indeterminate" value="determinateValue"></md-progress-circular>
I'd rename the determinateValue to something more precise and reflective also. Also the tag disappears cause the determinateValue is always at some point being assigned to 100 ie your content is loading
I'm new to web designing and angular, and am copying something similar to this, where I consume a RESTful web service and use AngularJS to display the info in the JSON.
It doesn't seem to be working for me. My main.jsp file looks like:
<!doctype html>
<html ng-app>
<head>
<title>Your Bill</title>
<!-- Include the AngularJS library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- BillParser script -->
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="GetBill">
<p>The ID is {{bill.id}}</p>
<p>The content is {{bill.content}}</p>
</div>
</body>
</html>
And my app.js looks like:
function GetBill($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
success(function(data) {
$scope.bill = data;
console.log('INITTED');
});
}
But it looks like the following on localhost/billparser/index:
The ID is {{bill.id}}
The content is {{bill.content}}
Is there something obvious I'm missing here? Excuse the 'bill' naming, it's going to eventually be something relating to bills, I just want to get Angular working first!
It looks like I'm getting the following error:
https://docs.angularjs.org/error/ng/areq?p0=GetBill&p1=not%20a%20function,%20got%20undefined
What do I need to do to fix this? I've never used js before so this is all new to me!
Thanks for your time.
It seems to me that you've missed something here: actually creating a Controller and registering it in your AngularJS application.
From The AngularJS documentation on Controllers (link here), that is what your app.js file should look like:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
That is the featured example. In your case, more precisely, it would be:
var myApp = angular.module('myApp',[]);
myApp.controller('GetBill', ['$scope', '$http', function($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').success(function(data) {
$scope.bill = data;
// console.log('INITTED');
});
}]);
... and that should do it!
I sure hope that you had this inside the controller as:
app.controller('GetBill', ['$scope', '$http', function($scope , $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
success(function(data) {
$scope.bill = data;
console.log($scope.bill);
});
}]);
Check the console for correct data. console.log($scope.bill);
After creating the controller as suggested by the other guys here, depending on your data, you will probably need an ng-repeat in your view.
If, for example, the data returned by getBill is an array of objects; after assigning the data to $scope.bill (which you did already) you would have to go into the view and change it to this:
<div ng-controller="GetBill">
<div ng-repeat="b in bill">
<p>The ID is {{b.id}}</p>
<p>The content is {{b.content}}</p>
</div>
</div>
But if you are not getting an array, you don't have to worry about it.
My html...
<body id="main">
{{pageName}}
</body>
My JS:
angular.module('myApp',[])
.controller('myController', function($scope){
console.log('init');
$scope.pageName = 'My page';
});
angular.element(document).ready(function(){
angular.bootstrap(document.getElementById('main'), ['myApp']);
});
My Resulting HTML:
{{pageName}} instead of 'My Page'
I can do this
<body id="main" ng-controller="myController">
</body>
and it will start working. But, what is the point. Why do I necessarily have to use ng-controller ?
I hope I have made myself clear. Hoping someone would respond to this.
I think the reason is that you are setting pageName in myController but the div cannot use it as the controller is neither defined on it or its parent.
pageName should be set on $rootScope to make it work. You can define that at the run block of module like
angular.module('myApp',[]).run(function($rootScope) {
$rootScope.pageName='My Page';
});
This run block runs after angular has bootstrapped the application. See here
http://docs.angularjs.org/guide/module