I have a problem with my code, I'm getting this error when trying to work with $http. Anyone had a problem like this in the past?
angular.js:14794 TypeError: http.get(...).than is not a function
at new <anonymous> ((index):57)
at Object.instantiate (angular.js:5112)
at angular.js:11083
at Object.link (angular-route.js:1209)
at angular.js:1383
at wa (angular.js:10611)
at q (angular.js:10000)
at f (angular.js:9240)
at angular.js:9105
at angular.js:9496 "<div ng-view="" class="ng-scope">"
this is my code
<body>
<nav>
<div class="nav-wrapper">
Logo
<ul class="left">
<li class="active">
CD
</li>
<li>
DVD
</li>
<li>
DVD-DL
</li>
</ul>
</div>
</nav>
<div ng-view></div>
<script>
var app = angular.module("diskManagment", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "discs.htm",
controller: "cd"
})
.when("/dvd", {
templateUrl: "discs.htm",
controller: "dvd"
})
.when("/dvddl", {
templateUrl: "discs.htm",
controller: "dvddl"
});
});
app.controller("cd", ['$scope', '$http', function(scope, http) {
http.get("discs.php?type=cd")
.than(function (response) {
scope.discs = response.data.discs;
});
}]);
app.controller("dvd", ['$scope', '$http', function ($scope, $http) {
$http.get("discs.php?type=dvd")
.than(function (response) {
scope.discs = response.data.discs;
});
}]);
app.controller("dvddl", ['$scope', '$http', function ($scope, $http) {
$http.get("discs.php?type=dvddl")
.than(function (response) {
scope.discs = response.data.discs;
});
}]);
</script>
</body>
I cant seem to find out what causing the problem, I tried every way I found that was supposed to work
I can really use some help, thanks!
I was mistaked when wrote .than instead of .then
Related
I have some problem with binding when i use ui-router. I am trying to make the app modular and keep it clean and simple.
I have the following app.js
// main routing - index.html
var app = angular.module('mainApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'pages/main.html'
})
.state('cars', {
url: '/cars',
templateUrl: 'pages/Cars_model/main.html'
})
.state('cars.audi', {
url: '/audi',
templateUrl: 'pages/Cars_model/audi.html'
})
.state('cars.ford', {
url: '/ford',
templateUrl: 'pages/Cars_model/ford.html'
})
});
app.controller('indexController', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
app.controller('carsCtrl', function($scope, $location) {
if($location.path() === '/cars/audi')
{
$scope.pageHeader = "AUDI";
$scope.curentMenu = "Best Cars";
$scope.title = "Audi Specs";
}
if($location.path() === '/cars/ford')
{
$scope.pageHeader = "FORD";
$scope.curentMenu = "Best Cars";
$scope.title = "Ford Specs";
}
});
and the file where i want to use binding
<div class="container" ng-controller="carsCtrl">
<div class="page-header">
<h1>{{pageHeader}}</h1>
</div>
<!-- The first row -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sd-12">
<ol class="breadcrumb">
<li>Home</li>
<li>{{curentMenu}}</li>
<li class="active">{{pageHeader}}</li>
</ol>
</div>
</div>
</div>
The problem is when i load the page the binding work only once, for the second i have to refresh the page.
I am not sure if i used the corect logic
if($location.path() === '/cars/ford')
I think i found the solution
Using
ui-sref-opts="{reload: true}"
in the menu solve the problem
<a ui-sref="cars.audi" ui-sref-opts="{reload: true}">Audi</a>
Plunker
I'd like to set a scope for a different route but it seems not working...
var app = angular.module('AngularApp', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'menu.html',
controller: 'MenuController'
}).when('/slides/:menuItem', {
templateUrl: 'slides.html',
controller: 'SlidesController'
});
});
app.controller('MenuController', function($scope, $http) {
$http.get('database.json').then(function(response) {
$scope.bottomBar = 'no';
$scope.pageClass = 'menus';
$scope.database = response.data;
});
});
app.controller('SlidesController', function($scope, $http, $routeParams) {
$http.get('database.json').then(function(response) {
$scope.bottomBar = 'yes';
$scope.pageClass = 'slides';
$scope.database = _.find(response.data.menuItems, {'url': $routeParams.menuItem});
});
});
<body ng-app="AngularApp">
<div class="line">
<div class="col-12">
<img src="images/logo.jpg">
</div>
</div>
<div class="page {{pageClass}}" ng-view></div>
<div class="bottom-bar">
<ul>
<li>Retour {{bottomBar}}</li>
</ul>
</div>
</body>
bottomBar is empty...
Looks like you are putting html in app directly.
You can move below code in a template and use ng-include to add this template in you all views.
<div class="bottom-bar">
<ul>
<li>Retour {{bottomBar}}</li>
</ul>
</div>
This is because your controller scope is present in this div with ngView. Therefore anything outside this div won't have scope binding.
<div class="page {{pageClass}}" ng-view></div> <!-- controller active here only -->
I'm trying to create my first angularjs page. A small wishlist to my family.
My simplified html:
<body ng-controller="memberController">
<nav>
<div class="container">
<ul class="nav navbar-nav">
<li ng-repeat="member in members" ng-class="{'active': isActive(member)}">
<a ui-sref="member({memberId:member.pk})" ng-bind="member.name"></a>
</li>
</ul>
</div>
</nav>
<div ui-view></div>
My wish-list.html (simplified)
<ol class="breadcrumb">
<li><a ui-sref="home">Hjem</a></li>
<li class="active">{{member.name}}</li>
</ol>
And here is my app.js
'use strict';
var wishApp = angular.module('wishApp', [
'ui.router',
'memberController',
'memberService',
]);
wishApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: static_url('partials/index.html'),
})
.state('member', {
url: "/member/:memberId",
templateUrl: static_url('partials/wish-list.html'),
controller: 'WishFilterCtrl',
})
});
controllers.js
'use strict';
var memberController = angular.module('memberController', []);
memberController.controller('memberController', ['$scope', '$stateParams', 'Member', function($scope, $stateParams, Member) {
$scope.members = Member.query();
$scope.isActive = function(member){
if (member.pk == $stateParams.memberId)
$scope.member = member;
return member.pk == $stateParams.memberId;
};
}]);
services.js
var memberService = angular.module('memberService', ['ngResource']);
memberService.factory('Member', ['$resource', function($resource){
return $resource('/api/members/:memberId/', {memberId: '#pk'}, {
query: {method:'GET', isArray:true},
});
}]);
So my simple question is. Is this the right way to show member.name in breadcrumb or are there a more correct way to show this info inside the wishlist?
The member id is used to show wishes connected to a member. So should the call also return the member.name?
I hope this make sense or else please ask for further details.
Started working in angular 2, so i close this question.
I am trying to route 2 partials to my index page, but so far only one route seem to work, the other is unresponsive. I have gone through the codes so many times, but can't seem to spot the issue. Would appreciate any insights.
Heres are my controllers:
app.controller('HomeController', ['$scope','stream', function($scope, stream) {
stream.then(function(data) {
$scope.photos = data;
});
}]);
This is the controller for the partial that fails to load
app.controller('PhotoController', ['$scope','stream', '$routeParams', function($scope, stream, $routeParams) {
stream.then(function(data) {
$scope.descript = data.items[$routeParams.photoid];
});
}]);
This is the
<div class="container" ng-repeat="photo in photos.items" >
<div class="photo" >
<div>
<img class="col-md-2 thumbnail" ng-src="{{photo.media.m}}">
</div>
<div class="col-md-8" style="height: 119px; width: 641px">
<div class="row" id="title"><p1>{{photo.title}}</p1></div>
<div class="row list-desc">
<p1 id="author">{{photo.author}}</p1>
<p1 id="pub-date">Published:{{photo.published | date}}</p1>
<a id="view-link" href="description/{{$index}}">View on flickr</a>
</div>
</div>
</div>
</div>
This is the one that fails to load.
<div class="container" ng-repeat="desc in descript" >
<h1>{{desc.title}}</h1>
</div>
This is my routing:
var app = angular.module('angularOne', ['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
}).
when('/description/:photoid', {
controller: 'PhotoController',
templateUrl: 'views/photo.html'
}).
otherwise({
redirectTo:'/'
});
$locationProvider.html5Mode(true);
}]);
desc should descript in the html, or the other way around in the js.
I have a NavigationController that has a selectedItem for the current selected item in a navigation list. It uses $location.path() to try and set it to a default value. It's in hashbang mode. Here is a simplified version:
App.controller("NavigationController", ['$scope', '$location', function($scope, $location) {
$scope.currentSelection = $location.path() || "/dashboard";
$scope.select = function( name ) {
$scope.currentSelection = name;
}
}]);
And the html:
<body ng-app="App">
<div class="container-fluid absoluteFill">
<div class="row-fluid fill" ng-controller="NavigationController">
<div class="span2 nav-bubble fill">
<ul class="nav nav-list">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div ng-view></div>
</div>
</div>
</body>
And the config:
angular.module("App", ["ngResource"])
.config(function($routeProvider) {
$routeProvider.
when( '/', { redirectTo: '/dashboard' }).
when( '/dashboard', {
controller: 'DashboardController',
templateUrl: '/gpa/app/views/dashboard.html'
}).
otherwise({redirectTo: '/'});
})
The problem is that when I navigate to /home/index (without a hash bang) $location.path() returns "/index" where it used to return null prior to 1.1.15. However, if I go to "/home/index#/dashboard it returns "/dashboard" as expected. I tried redirecting when someone goes to "/" to "/dashboard", but NavigationController is called prior to being redirected so it continues to get "/index".
So how can I at least tell when the hashbang is not included? $location.hash() always seems to return "". I don't want to hard code "/index" in my code to know when nothing is on the URL.
I think you want to use the $route service and hook into the $routeChangeSuccess event.
App.controller("NavigationController", function($scope, $location) {
$scope.$on("$routeChangeSuccess", function (scope, next, current) {
$scope.currentSelection = $location.path() || "/dashboard";
});
$scope.select = function( name ) {
$scope.currentSelection = name;
}
});