I have the following controller.js
var eclassApp = angular.module('eclassApp', []);
eclassApp.controller('StudentsListCtrl', ['$scope','$http',
function($scope, $http){
$http.get('/static/js/students.json').success(function(data){
$scope.students = data;
});
$scope.orderProp = 'last_name';
}]);
My html is the following
<!DOCTYPE html>
<html lang="en" ng-app="eclassApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="../static/js/controller.js" type="application/javascript"></script>
</head>
<body ng-controller="StudentsListCtrl">
<h3>Class B3</h3>
<div class="row">
<div class="col-xs-3">
Search: <input type="text" ng-model="query">
</div>
<div class="col-xs-5">
<select ng-model="orderProp">
<option value="last_name">Alphabetical</option>
<option value="age">Youngest</option>
<option value="-age">Oldes</option>
</select>
</div>
</div>
<div class="row">
<ul>
<li ng-repeat="student in students | filter:query | orderBy:orderProp">
<p>{{student.name}}</p>
<p>{{student.last_name}}</p>
</li>
</ul>
</div>
</body>
</html>
my json file gets accessed normally (from chrome's developer's console) but still I get the following errors.
SyntaxError: Unexpected token ]
at Object.parse (native)
at pc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:14:208)
at Zb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:76:379)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:77:237
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:7:302)
at Zc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:77:219)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:78:349)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:112:20
at l.$get.l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:125:305)
at l.$get.l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:122:398)
Am I missing a tokken that I can't see?
EDIT: I'm sorry..As a python developer I'm used in putting commas after last element in an array, something json arrays don't work well :). I had forgotten a comma on my json file. Removed it and works great
Try this -
eclassApp.controller('StudentsListCtrl', function($scope, $http){
$http.get('static/js/students.json').success(function(data){
$scope.students = data;
});
$scope.orderProp = 'last_name';
});
Related
Ive been trying for the past couple of hours but for I can't seem to figure out why I can access $scope.FeatureGroup to add to my url
Any ideas?
angular.module('ngRepeat', ['ngAnimate',]).controller('repeatController', function($scope, $http) {
$scope;
$scope.FeatureGroup = 50000;
$scope.ShowMeData = function($scope){
var url = 'URLHERE' + $scope.FeatureGroup;
$http.get(url).success(function(data) {
console.log(data);
//$scope.Object = data;
});
}
});
<html lang="en"><head>
<meta charset="UTF-8">
<title>Example - example-ng-repeat-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
There are Features - Please click them to see the page:
<br><input type="number" ng-model="FeatureGroup" ng-value="10" ng-keyup="ShowMeData()">
<br><input type="search" ng-model="q" placeholder="filter Features..." aria-label="filter friends">
<ul class="example-animate-container">
{{FeatureGroup}}
<!-- ngIf: Objects.length === 0 -->
<!-- ngRepeat: feature in Object | filter:q as results -->
</ul>
</div>
</body>
</html>
That is because of following line. You are overriding the $scope variable:
$scope.ShowMeData = function($scope){
You are really not passing any scope variable while calling the function
ng-keyup="ShowMeData()".
Just change it to:
$scope.ShowMeData = function(){
and it should work.
I'm building a cordova app and want to use angular to build out pages a the user selects content. I'm building out in the web right now before I move to cordvoa.
<!doctype html>
<html ng-app="nanoApp">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body>
<div id="content" class="scroller" ng-view></div>
</body>
</html>
angular-script.js:
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'HomeController as homeSlides',
templateUrl:'../content/home.html'
});
});
home.html:
<div id="home" class="container paralax">
...
</div>
That's because you didn't define HomeController.
Try to create controller first
Like this
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp.controller("HomeController",["$scope",function($scope){
//put your code here
}]);
So I'm trying to run an Angular app with a Rails API on Chrome.
I'm trying to render very simple views from their respective controllers.
My users.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: '/views/users.html',
controller: 'UsersCtrl'
});
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost:3000/api/users/').success(function(data) {
$scope.users = data.users;
});
$scope.foos = ['foo', 'bar', 'baz'];
}]);
users.html view:
<div ng-controller='UsersCtrl'>
<h1>Users</h1>
<ul ng-repeat="user in users">
<li>{{user.first_name}}</li>
</ul>
<ul ng-repeat="foo in foos">
<li>{{foo}}</li>
</ul>
</div>
The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).
My main.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.awesomeThings = [
'foo',
'bar',
'baz'
];
$scope.addThing = function() {
$scope.awesomeThings.push($scope.newThing);
$scope.newThing = '';
};
}]);
main.html view:
<div ng-controller="MainCtrl">
<form ng-submit='addThing()'>
<div class="form-horizontal">
<input type="text" ng-model="newThing">
<input type="submit" value="Add Thing">
</div>
</form>
<li ng-repeat='thing in awesomeThings'>
{{thing}}
</li>
<h4>Awesome things: {{awesomeThings}}</h4>
<h4>Cool things: {{coolThings}}</h4>
</div>
When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.
The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.
index.html:
(scripts are at the bottom)
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="rantlyApp">
<header class='nav-header' role='navigation'>
<div class='content'>
<a class="navbar-brand" href="#/">Rantly</a>
<nav>
Rants
Users
Styleguide
Sign Up
</nav>
</div>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/users.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.
Any help is greatly appreciated. Thanks!
When you write
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js.
Instead define your module once, and retrieve it with:
var rantlyApp = angular.module('rantlyApp');
Check the documentation.
Hey I have problem with getting data from webpage to my own page.
I'm using Angularjs and try to take data from http://irys.wi.pb.edu.pl/bibWS/books I look my page in chrome and get:
ReferenceError: $http is not defined
My page:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
</head>
<body>
<script src="angular.min.js"></script>
<script>
function LibraryController($scope) {
var urlBase = 'http://irys.wi.pb.edu.pl/bibWS/books';
$scope.books = $http.get(urlBase);
}
</script>
<div ng-controller="LibraryController">
Title: <input type="text" ng-model="searchText" /><br />
<ul>
<li ng-repeat="book in books">
<strong>{{book.title}}</strong> -
<em>{{book.author_id}}</em></li>
</ul>
</div>
</body>
</html>
You have to inject $http service into your controller
function LibraryController($scope, $http)
You should add $http to your controller:
function LibraryController($scope, $http)
...
I have just started learning angularjs. I am trying the tutorial one given on their official website.
http://docs.angularjs.org/tutorial/step_08
What i am trying to achieve is to build multiple views by adding routing.
when i access home.html it is displaying all the mobile list perfectly but once i click on the link to get the details of any of the mobile the next page gives me this error
[$injector:unpr]
do notice there is no unknown provider error
and all the expression on phone-detail.html is being printed as it is not being evaluated.
here is my app.js code
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
then my controller.js code is
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
alert(data);
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http',function($scope, $routeParams,$http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}]);
home.html code
<html lang="en" ng-app="phonecatApp">
<head>
<title>Hello world example from angular js</title>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<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/app.js"></script>
<script type="text/javascript" src="scripts/controller.js"></script>
</head>
<body>
<div class="row">
<div class="container">
<div ng-view></div>
</div>
</div>
</body>
</html>
phone-list.html code -
<div class="col-lg-12">
<hr>
<p class="pull-right col-lg-4">
<input type="text" ng-model="query" class="form-control col-lg-6" placeholder="Search" style="width:auto;">
<select ng-model="orderProp" class="form-control col-lg-6" style="width:auto;">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
<option value="-age">Oldest</option>
</select>
</p>
<p class="col-lg-6">Total number of phones: {{phones.length}}</p>
<div class="clearfix"></div>
<hr>
<h3 ng-bind-template="Thumbnail view | Search for : {{query}}">List view</h3>
<div class="row">
<div class="col-lg-4" ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<div class="thumbnail">
<a href="#/phones/{{phone.id}}">
<img src="{{phone.imageUrl}}" data-src="{{phone.imageUrl}}" alt="{{phone.name}}">
</a>
<div class="caption">
<h3>{{phone.name}}</h3>
<p>{{phone.snippet}}</p>
</div>
</div>
</div>
</div>
</div>
phone-detail.html code -
<div class="phone-images">
<img ng-src="{{img}}"
class="phone"
ng-repeat="img in phone.images"
ng-class="{active: mainImageUrl==img}">
</div>
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
I got it where was the problem.
It was because i copied content in phone-detail.html from github which should come in a later step. in phone-detail there was some code like
{{phone.hardware.accelerometer | checkmark}}
here checkmark is a filter but i didn't introduced filter at all.
So solution was I added filter.js with content
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
then import script.js in home.html and it worked fine.
So i did two mistake -
1. Introducing code for filters without registering any filter.
2. Didn't post the whole code for phone-detail.html so that you can figure out the mistake number one.
A special thanks to #Lorenzo to help me dig out the problem.
As you defined an App module with var phonecatApp = ... you have to use it to create your controllers for Angular to know that phonecatController "belongs to" phonecatApp.
So just replace angular.module with phonecatApp.controller
Replace this line
var phonecatControllers = angular.module('phonecatControllers', []);
//------------------------^-------------^---------------------------
With this
var phonecatControllers = phonecatApp.controller('phonecatControllers', []);
//------------------------^--------------------^---------------------------
Or you can do
angular.module('phonecatApp').controller('phonecatControllers', []);