Using ngAside for opening a simple left-menu Modal - javascript

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

ng-model is not working inside ng-view with global controller

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>

Why is $location.absUrl(), $location.$$url, $location.$$path blank in href?

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;

angular.min.js:118 Error: [ng:areq]

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

Cannot access http json service in angular js

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

AngularJS routing not working, but no errors are thrown

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", ...)
}

Categories

Resources