I am very new to angular js and want to make a very simple website, that does the following:
when clicking on a button, it will randomly generate a number, and if the number is odd, redirect to google, otherwise redirect to apple website. I have done the following:
<!doctype html>
<html lang="en" ng-app="homeapp">
<head> ... all imports </head>
<body ng-controller="homeappCtrl">
Click
</body>
</html>
and then in the controller.js, I have:
var homeapp= angular.module('homeappController', []);
homeappController.controller('homeappCtrl', ['$scope',
function($scope) {
if (Math.floor((Math.random() * 10) + 1)%2==0)
{$scope.urlToPick = 'http://google.ca';}
else
{$scope.urlToPick = 'http://apple.com';}
}]);
The problem is that when I click on the link, the urlToPick is not resolved and therefore the link returns error. (the link url is something like xxx/{{urlToPick}} )
I guess I have done something wrong but please tell me where... Thanks!
Your ng-app and your angular.module definitions are different.
Change
var homeapp= angular.module('homeappController', []);
to
var homeapp= angular.module('homeapp', []);
Related
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.
I have diferents controllers in my webpage, each controller is in a different .php document. Each .php document represents a diferent part of the webpage. (It's similar to spotify).
player.php: (Where the user can play some music with an audio player)
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
panel_admin.php: (where the user can modify its data and some data of the webpage)
<html lang="en" ng-app="decibels-admin">
<body ng-controller="AdminController as AdminCtrl" ng-init="AdminCtrl.sessionCtrl()">
player.php and panel_admin.php have its respective player.js and panel_admin.js with its .controllers running correctly.
player.js:
var decibelsInteractive = angular.module("decibels-interactive", []);
decibelsInteractive.controller('InteractiveController', function ($scope, $log) {
panel_admin.js:
var adminControl = angular.module("decibels-admin", []);
adminControl.controller("AdminController", function($scope){
Now, I have the menu bar in menu.php, where I use in player.php document, imported with:
//player.php
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
<?php include('includes/menu.php'); ?>
//here some html code
</body>
</html>
menu.php: (menu is a menu bar where the user have some options, and it also have its username and logout option)
<div class="navbar-fixed" ng-controller="InteractiveController as menu2">
//some html code
</div>
menu.js:
app.controller('menu2', function($scope) {
$scope.content = '';
});
The problem that I have is that as you can see, I import the document menu.php inside player.php.
I also want to import the menu.php inside panel_admin.php and be able to use some methods that I have in menu.js, so the code that I have in menu.php (ng-controller="") is not correct (or I think so). -Because when I use it in panel_admin.php it will be in conflict with ng-controller name.
Someone told me that I should use services, or that I should define menu in separate module and use it as dependency where I want.
I am new with angularJS so now I'm a little lost. I've been searching information about services and dependencies without success.
I hope to solve this problem and being able to continue programming!
Thank you!
I'm working on learning some Angular for an application I'm building.
After going through some tutorials, I had a basic program working which had two views and some routing to flip between them. I'm running it now in the browser, and it's coming up blank. There are no console errors, and I swear I haven't touched it since I had it working last.
Here's my main file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<style>
body
{
font-family: arial;
padding: 20px;
}
</style>
</head>
<body ng-app = "journal_program">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "app.js"></script>
<div ng-view>
</div>
</body>
</html>
And my Javascript:
var journal_program = angular.module ("journal_program", []);
journal_program.config (['$routeProvider', function ($routeProvider)
{
$routeProvider.
when ('/AddNewOrder',
{
templateUrl: 'templates/add_order.html'
}).
when ('/ShowOrders',
{
templateUrl: 'templates/show_orders.html'
});
}]);
The first view:
<h2>Add New Order</h2>
Show Order
The second view:
<h2>Show Orders</h2>
Back<br>
Any ideas are appreciated. I'm not sure what to check at this point.
UPDATE:
Here are the 3 important things I figured out from this little exercise:
1) Angular views don't have a default route unless you set one with "otherwise". Basically, even if you've set up a couple different routes, ng-view is blank when the page first loads unless either the user loads a route by clicking a link outside the view, or if you've set a default by adding "otherwise" to your route controller.
otherwise (
{
templateUrl: 'templates/add_order.html'
});
This link is extremely helpful:
http://blog.kevinchisholm.com/angular/angular-js-basics-routes-part-iii-creating-a-default-route/
2) Apparently nothing you put inside the html of ng-view will be rendered unless you have a " when ('/' " route in the controller.
3) Angular doesn't work so well when run off the hard drive. You've got to upload it to a server first, for whatever reason.
After adding these steps I got my demo working again. Looking back now, I'm not sure how I got it working the first time around without this knowledge.
It working fine...
Take a look at this Demo
Working Demo
<div ng-view>
</div>
<h2>Show Orders</h2>
Show Order
<h2>Add New Order</h2>
Add Order
<br>