Here is the code in concern:
<div ng-app="">
https://www.facebook.com/sharer/sharer.php?u={{$location.absUrl()}}
https://www.facebook.com/sharer/sharer.php?u={{$location.$$url}}
https://www.facebook.com/sharer/sharer.php?u={{$location.$$path}}
</div>
We need the value of the u parameter to be current page.
Where are we wrong?
You cannot do that in HTML, alternatively you can get the current location like this,
Assign the curren location to a scope variable,
$scope.a = window.location.href;
Then in HTML,
<br>Link = <a ng-href="https://www.facebook.com/sharer/sharer.php?u={{a }}" target="_blank">facebook</a>
DEMO
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope', function($scope) {
$scope.a = window.location.href;
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="a">
<br>a={{a}}
<br>
<br>Link = <a ng-href="https://www.facebook.com/sharer/sharer.php?u={{a}}" target="_blank">facebook</a>
</div>
</body>
</html>
The property which are present of $scope variable those are only available to use on HTML as binding. So $location service you have to expose on $scope
//inject $location to controller before use it.
$scope.$location = $location;
Related
I am new to angularjs and I want to know why it isn't working.
The code has a flaw and am not sure about the same.
Thinking from java perspective,httpController defined has nested function defined inside.
Here it is my code
index.html
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName:{{user.name}}</div>
</div>
</body>
</html>
Script.js
var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
});
var httpApp=angular.module("httpService",[]);
httpApp.controller("httpController",function($scope,$http){
var onUserComplete=function(response){
$scope.user=""response.data"";
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
}
);
Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.
var httpApp = angular.module("httpService", []);
httpApp.controller("httpController", function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName: {{user.name}}</div>
</div>
NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.
https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview
<body ng-app="httpService">
<div ng-controller="httpController">
<div>FirstName: {{user.key}}</div>
</div>
</body>
This link is working fine...just try it out
Do not use ng-app more than once in your program...Your code would not work
I've been following an Angular.js tutorial, however it is a bit old and this is not compatible after version 1.2.5
HTML file
<!DOCTYPE html>
<html ng-app="">
<head>
<script data-require="angular.js#*" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="HelloController">
<h1>{{message}}</h1>
</body>
</html>
js file
var MainController = function($scope)
{
$scope.message = "Hello, Angular!";
}
how do I do this in 1.4.3 ? thanks
In your html you mentioning HelloController instead of MainController
You can create a controller and add it to an angular module.
Be careful, angular.module() provide getter and setter syntax :
getter : angular.module('myModuleName')
setter : angular.module('myModuleName', [])
Controller
(function(){
function Controller($scope) {
$scope.name = 'john';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller='ctrl'>
Hello {{name}}
</body>
Working Plunker
Below is my very simple example where I am trying to implement controller.
{{8/2}} is giving correct output i.e. 4 but {{message}} remains same.
It should be replaced by some value e.g. First Controller
I downloaded the angular js from https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>{{8/2}}</h1>
<div ng-controller="HomeController">
{{message}}
</div>
</body>
</html>
Script.js
var HomeController = function($scope) {
$scope.message = "First Controller";
};
I downloaded the angular js from
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js
Well angularjs version 1.4x does not support raw functions controllers to be used as controllers. change the angularjs version to 1.2.x OR use angular.module('someName').controller() syntax to make it work.
Here's the same plunkr you shared(with angularjs 1.2.8)
Here's the plnkr with angular.module() syntax
Update your html from
<html ng-app>
to
<html ng-app="myApp">
Update your script.js to
angular.module("myApp", []).controller("HomeController", function($scope){
$scope.message = "First Controller";
});
replace your Script.js with this
var ng_app = angular.module('ng_app',[]);
ng_app.controller('HomeController', ['$scope', function($scope) {
$scope.message = "First Controller";
}]);
edit ng-app in your html to ng-app='ng_app'
There was a problem with your angular version If you will use a older version then it works fine
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app>
{{8/7}}
<div ng-controller="HomeController">
{{message}}
</body>
</html>
<script >
// Code goes here
var HomeController = function($scope) {
$scope.message = "First Controller";
};
</script>
You are using old syntax that is no longer supported.Instead of defining controller as var. Add ng-app="app", then create a module
var myApp = angular.module('app',[]);
Now define your controller -
myApp.controller("HomeController",function($scope){
$scope.message = "Hello";
});
With the code below, I see my button (angular 1.3.15, DevExtreme 15.1.4)
HTML :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Testing</title>
<link href="Content/dx.common.css" rel="stylesheet" />
<link href="Content/dx.light.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.11.3.min.js"></script>
<script src="/Scripts/jquery.globalize/globalize.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-sanitize.min.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/dx.webappjs.js"></script>
<script src="/app/app.js"></script>
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
</body>
</html>
app.js file :
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope','dx', myCtrl]);
function myCtrl($scope, dx) {
var vm = this;
}
}());
I see the button and no error but when I add the controller in the div :
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
I get this error :
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=dxProvider%20%3C-%20dx%20%3C-%20myCtrl
R/<#http://localhost:51314/Scripts/angular.min.js:6:417
You are attempting to inject the dx module into your myCtrl controller. Try removing it:
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope) {
var vm = this;
}
}());
For future reference, following the link given in an Angular error can help reveal problems like these.
Right I've got a really dumb one for you, and I've been looking at this code all day with no result.
I have a simple textbox which goes through a controller and updates a variable inside a service (The service will eventually fetch/update data from somewhere else).
At the moment, I am able to retrieve the variable value all the way to the view and it works, but the textbox is unable to update the variable inside the service in order to then display the new variable value in the view again....
I really appreciate any help and hope I have made sense!!!
// APP/APP.JS
(function(){
var app = angular.module('appMod', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'introController',
templateUrl: 'app/partials/intro.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('nameController', function($scope, dataService) {
var nameValue;
this.name = dataService.getName();
this.submitName = function(nameVal) {
nameValue = this.nameCtrl.nameVal;
dataService.setName(nameValue);
};
});
app.controller('introController', function($scope, dataService) {
this.name = dataService.getName();
});
app.service('dataService', function () {
var name = "f";
this.getName = function() {
return name;
};
this.setName = function(nameVal) {
name = nameVal;
};
});
})();
<!-- INDEX.HTML -->
<!DOCTYPE html>
<html ng-app="appMod">
<head>
<link rel="stylesheet" type="text/css" href="content/css/normalize.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/style.css">
<link rel="stylesheet" type="text/css" href="content/css/animation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-timer.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="nameController as nameCtrl">
<img src="content/images/sitelogo.png" class="logo">
<h2 class="welcomeMessage fade">Welcome <span class="fade" ng-show="!nameCtrl.name == ''">{{nameCtrl.name}}</span><span class="inline fade" ng-hide="nameCtrl.name !== ''">Friend</span> <small>(We like to get personal!)</small></h2>
<div class="namebox fade">
<h2>Welcome <small class="fade">Please type your name</small></h2>
<form class="fade">
<div class="form-group">
<input type="text" class="form-control" ng-model="nameCtrl.nameVal" autofocus>
</div>
<button type="submit" style="width:100%;" class="btn btn-default fade" ng-click="nameCtrl.submitName()" >Submit</button>
</form>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
You need to be binding to name and not nameVal on your input
Then just pass that in your setName call, i don't think the rest of the code is needed in there, you can get rid of the nameValue var too.
this.submitName = function() {
dataService.setName(this.name);
};
The nameValue var is local to the controller and not available on the $scope to bind to your view, so even though you were changing it, the view didn't know about it as it couldn't see that var.