I just want to test opening a left modal with the help of ngAside used at the following Repository:
https://github.com/dbtek/angular-aside
I think I am doing it right, still can find a js error. Can someone help?
index.html:
<html>
<head>
<!-- Required CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Required Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="../js/angular-aside.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
{{name}}
<script>
//module declaration
var app = angular.module('myApp',['ui.bootstrap', 'ngAside']);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
var asideInstance = $aside.open({
templateUrl: 'aside.html',
controller: 'AsideCtrl',
placement: 'left',
size: 'lg'
});
});
app.controller('AsideCtrl',function($scope){
});
</script>
</body>
</html>
aside.html
Hello World!
ERROR:
To use the aside service, you have to inject it like this (notice the $aside injection in the constructor) :
app.controller('myCtrl',function($scope, $aside){
...
});
Related
It seems very simple but i could not fix it, my controller can not read ng-model related to input box inside ng-view. here are my codes
main.html
<html ng-app="myapp" ng-controller="main_controller">
<head>
<title>test</title>
</head>
<body>
<section ng-view>
</section>
<!--Jquery-->
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../angularjs/angular.js" type="text/javascript"></script>
<!--Angular js-->
<script src="../angularjs/angular-route.js" type="text/javascript"></script>
<script src="../app.js" type="text/javascript"></script>
</body>
</html>
view.html
<input type="text" ng-model="input_value">
<button ng-click="read_input()">print</button>
app.js
var app = angular.module('myapp', ['ngRoute'])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'view.html',
})
})
app.controller('main_controller', function ($scope) {
angular.element(document).ready(function () {
//some Ajax request
})
$scope.read_input = function () {
console.log($scope.input_value)
}
})
When i write anything inside input box and press print button, it should prints data in the console log, but it gives me undefined.
i know that i didn't provide controller at config of routeProvider but i included ng-controller at top of page it is because i want to use one controller for all of my views,as you see i have ajax request when the document is fully loaded, if i provide same controller for each page in the routeProvider at each chang of view my ajax will be called and i don't want this. Is there a better solution?
Try Below. Your controller scope is not reaching html.
<div ng-controller="main_controller">
<input type="text" ng-model="input_value">
<button ng-click="read_input()">print</button>
</div>
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;
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
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'm following this video tutorial and messed something up in the haste.. The problem is that I got rid of all the errors I made, but it still doesn't work as expected. The search form box doesn't display.
Full code can be found here: plnkr code
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script scr="app.js"></script>
<script src="MainController.js"></script>
<script src="github.js"></script>
</head>
<body >
<h1>Gihub Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
main.html
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="Username to find"
ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
Any help would be appreciated
The problem is that you are redefinig the module in the controller and factory code:
var app = angular.module("githubViewer",[]);
Instead of gettingthe created module:
var app = angular.module("githubViewer");
A module should be created once, then retrieve and add the controller, config, factory, etc...
Here some help.
Basically you all js file has wrong IIFE pattern.wrong
It should be
})();
instead of
}());
Also there are typos. In index.html:
<script scr="app.js"></script>
Must be:
<script src="app.js"></script>
And in MainController.js. This code:
app.controller("MainControler", MainController);
Must be changed to:
app.controller("MainController", MainController);
You are misunderstanding how to implement a module and a controller. In both MainController.js and app.js, you have the line:
var app = angular.module("githubViewer", ["ngRoute"]);
angular.module actually creates a new module. You are effectively trying to create two modules with the same name, which isn't allowed.
The pattern to follow is
var app = angular.module(...)
app.config(...)
var controller = app.controller("MainController", ["$scope", function() {
]]);
If you really want the MainController code to be in a separate file, create a function:
function createMainController(app) {
app.contoller("MainController", ...)
}