I keep getting the error: Error: [ng:areq] Argument 'ActsController' is not a function, got undefined. I've seen several other people have similar errors, usually due to typos. But I don't think I've misspelled the controller name anywhere.
I am working with Angular and Rails, by the way.
app.js
var controllers, snowball_effect;
snowball_effect = angular.module('snowball_effect', [
'templates',
'ngRoute',
'ngResource',
'controllers'
]);
snowball_effect.config([
'$routeProvider', function($routeProvider) {
return $routeProvider
.when('/', {
templateUrl: "static_pages/index.html",
controller: 'StaticPagesController'
})
.when('/acts/index', {
templateUrl: "acts/index.html",
controller: 'ActsController'
});
}
]);
controllers = angular.module('controllers', []);
controllers.controller("StaticPagesController", ['$scope', function($scope) {}]);
controllers.controller("ActsController", [
'$scope',
'$routeParams',
'$location',
'$resource',
function($scope,$routeParams,$location,$resource) {
$scope.acts = [
{
id: 1,
name: "Plant a Flower",
description: "Plant a flower in your garden or along the street."
inspires: 1
}
];
}]);
javascript/templates/acts/index.html
<div class="actions_body">
<h2>Listing Actions</h2>
<div ng-controller="ActsController" class="body">
<table class="row">
<thead>
<tr>
<th class="col-md-offset-1 col-md-2 active">
<label>Name</label>
</th>
<th class="col-md-4">Description</th>
<th class="col-md-2">Inspires</th>
<th colspan="2" class="col-md-2">Modify</th>
</tr>
</thead>
<tbody ng-repeat="act in acts">
<td class="col-md-offset-1 col-md-2">{{act.name}}</td>
<td class="col-md-4">{{act.description}}</td>
<td class="col-md-2">{{act.inspires}}</td>
<td>Edit</td>
<td>Delete</td>
</tbody>
</table>
<br>
New Action
</div>
</div>
Edit:
Now that I think about it, I'm also having another problem. Whenever I refresh the page, the main partial vanishes. I guess this question is more Rails/Angular specific.
views/home/index.html.erb
<div ng-app="snowball_effect">
<div class="view-container">
<div ng-include="'layouts/index.html'"></div>
</div>
</div>
assets/javascript/templates/layouts/index.html
<div ng-include="'layouts/navigation.html'"></div>
<div ng-view class="view-frame animate-view"></div>
assets/javascript/templates/static_pages/index.html
<div class="body">
<div class="container">
<div class="introduction">
<h1>Welcome to Snowball Effect</h1>
</div>
<div class="body">
<h2>A social media platform that brings people together in a spirit of community service.</h2>
</div>
</div>
</div>
So, in the layout/index.html, the navigation bar loads fine, but the ng-view only after the first page load.
Is app.js included in index.html??
<script src="js/app.js"></script>
Related
i try to make a nested view in my app.
This is how I try, I have parent UI-view
<div class="ui-view-container col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-12 col-xs-12" ng-cloak>
<div ui-view></div>
</div>
where I change all state on my web app. For example, this is one state
.state('distributorItem', {
url: '/distributorItem',
templateUrl: 'distributorItem.html',
controller: 'distributorItem',
authentication: {roles: ["distributor"]}
})
Inside this state, I want to make another MENU, where user can select item and find information by ID, below is example how I pass ID params and add child UI-view
<table class="table-hover">
<thead>
<tr>
<th>Item ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in itemIdInClientDetail">
<td><a ui-sref="client/info/{{value.id}}">{{value.id}}</a></td>
</tr>
</tbody>
</table>
<div class="col-lg-11 col-md-11 col-sm-10 col-xs-12">
<div ui-view></div>
</div>
There is child state
.state('distributorItem.client/info/:itemID', {
url: '/client/info/:itemID',
templateUrl: 'clientItemInfo.html',
controller: 'clientItemInfo',
authentication: {roles: ["distributor"]}
})
And this not working, because I get this error in console
angular.js:12477 Error: Could not resolve 'client/info/1126' from state 'distributorItem'
Pls, help... thnx
EDIT:
I make a change like #Maxim Shoustin answered. Now state changed, but in child navigation when I click on item, parent ui-view is full refreshed (child navigation and ui-view) not only child
now my state looks like this
.state('client', {
url: '/client/info/:itemID',
templateUrl: 'clientInfo.html',
controller: 'detailControllerClient as vm',
})
.state('client.detail', {
url: '/detail/:itemID',
templateUrl: 'itemInfoById.html',
controller: 'detailControllerClient as vm',
})
And html is here. (infoDisplay.html is parent view inside index.html. This ui-view in code bellow is child view (client.detail))
infoDisplay.html
<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12">
<table class="table-hover">
<thead>
<tr>
<th>item ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in clientDetail">
<td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
You have to use this format
.state('detail', {
url: '/client/info/{itemID}',
and
ui-sref="detail({itemID: '1126'})"
for more see Give URL with ID in Angular UI Router and How to pass parameters using ui-sref in ui-router to controller
try this
.state('distributorItem', {
url: '/distributorItem',
abstract:true,
templateUrl: 'distributorItem.html',
controller: 'distributorItem',
authentication: {roles: ["distributor"]}
})
.state('distributorItem.client', {
url: '/client/info/:itemID',
templateUrl: 'clientItemInfo.html',
controller: 'clientItemInfo',
authentication: {roles: ["distributor"]}
})
I am trying to call an api on click of a link and show the data in a new view , but i am not seeing any data neither an error on console.I tried using Log also but thats also not giving me any clue.
Here is my code in View:
<tr class="well-new" ng-repeat="product in gettempdata.FoodItems| orderBy:'Id' | filter:search"">
<td class="tdCenter" >
{{product.Id}}
</td>
<td class="tdCenter">
<img ng-src="{{product.ImageUrl}}" alt="{{product.Name}}" />
</td>
<td>
<b>{{product.Name}}</b><br />
{{product.Category}}
</td>
</tr>
</table>
I am trying to call GetItemDetails(Id).
Controller code:
myStore.controller("Home", function ($scope, StoreService, $log, $window) {
var onComplete = function (data) {
$scope.gettempdata = data;
}
var onError = function (reason) {
alert(reason.errorcode);
}
$scope.GetItemDetails = function (Id) {
$log.info("wait for 5 secs");
StoreService.getItemDetails(Id).then(onComplete, onError);
$log.info("done");
}
});
App.js code:
var myStore = angular.module('groceries', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.
when("/Home", {
templateUrl: "/Index.html",
controller: "Home"
}).
when("/Name", {
templateUrl: "Store/Product.html",
controller: "Home"
}).
otherwise
({
redirectTo: "/Home"
})
});
The Home view:
<html ng-app="groceries">
<head>
<script> ALL scripts</scripts>
<title></title>
</head>
<body>
<!--
bootstrap fluid layout
(12 columns: span 10, offset 1 centers the content and adds a margin on each side)
-->
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well">
<b>Store </b>
</h1>
<!-- Click here to navigate to Store-->
<div ng-view ></div>
</div>
</div>
</div>
</body>
</html>
Please check the case of the variables, .id instead of .Id
{{product.id}} {{product.imageUrl}}{{product.name}}{{product.category}}
Anchor tag has precedence for href over ng-click and so that won't work.
I modifed my code as below:
<td >
<a ng-href="" ng-click="GetItemDetails(product.Id,window.location.href='/Name')"><b>{{product.Name}}</b></a><br /></td>
I'm trying to get books to display based on the assignment above but can't figure out what is wrong for the life of me.
I built the service and modified the controller and view pages to the point where I believe they should display the books in the view, but I'm just seeing a blank page.
I feel like I am probably not retrieving the data properly and accessing it in the view/html.
Any ideas? Link to jsFiddle.
Index.html
<body ng-app="ReaderApp">
<div class="header">
<div class="container">
Reader
</div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
js/apps.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirecTo: '/books'
});
});
js/services/books.js
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
js/controllers/BookshelfController
app.controller('BookshelfController', ['$scope', 'books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
js/views/bookshelf.html
<div class="bookshelf row">
<!--
TODO: Loop through myBooks and display each one with this HTML
<div class="book col-md-3">
<a href="#/books/{{$index}}">
TODO: Add the book's cover here
<h3 class="title"> </h3>
<p class="author"> </p>
</a>
</div>
-->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}">
<img ng-src="{{ book.cover }}">
<h3 class="title">{{ book.title }}</h3>
<p class="author">by {{ book.author }}</p>
</a>
</div>
</div>
I think I had the same trouble and my problem was in the router. Try adding array brackets ( [ ] ) and the '$routeProvider' string in your config method (app.js) like this:
app.config(['$routeProvider', function($routeProvider) {
// Normal router stuff goes here
}]);
Coming from Ember, the syntax is a little weird so I've been using this tutorial as reference when I get stuck.
I'm trying to practice angular and I'm stuck this this.
How do I make ng-click load the displayController? Or am I doing this wrong way?
The Angular
var bible = angular.module('bible', []);
// Load the Books
bible.controller('listController', ['$scope', '$http', function($scope, $http) {
$http.get('books.json').success(function(data) {
$scope.books = data
});
}]);
bible.controller('displayController', function($scope) {
$scope.test = "TEST TEXT";
});
The HTML
<div class="row">
<div class="col-md-12" ng-controller="listController">
<table class="table">
<thead>
<th>Testament</th>
<th>Title</th>
<th>Chapters</th>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{book.testament}}</td>
<td>{{book.title}}</td>
<td>{{book.chapters}}</td>
</tr>
</tbody>
</table>
<div class="display-book" ng-controller="displayController">
{{test}}
</div>
</div>
</div>
You don't need the additional controller there. I guess you want to display additional infos about the clicked book.
Use a reference and ngIf
var bible = angular.module('bible', []);
// Load the Books
bible.controller('listController', ['$scope', '$http', function($scope, $http) {
$scope.selectedBook = null;
$http.get('books.json').success(function(data) {
$scope.books = data
});
}]);
And html:
<div class="row">
<div class="col-md-12" ng-controller="listController">
<!-- will be shown, as long as not book is selected -->
<table data-ng-if="selectedBook == null" class="table">
<thead>
<th>Testament</th>
<th>Title</th>
<th>Chapters</th>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{book.testament}}</td>
<td>{{book.title}}</td>
<td>{{book.chapters}}</td>
</tr>
</tbody>
</table>
<!-- will be shown, when a book got selected -->
<div data-ng-if="selectedBook != null" class="display-book">
<!-- display the selection table again -->
<button data-ng-click="selectedBook = null">Back</button>
{{selectedBook.title}}
</div>
</div>
</div>
Why do you want to call a separate controller cant you implement the functionality in a separate function like below ,
bible.controller('listController', ['$scope', '$http', function($scope, $http) {
$http.get('books.json').success(function(data) {
$scope.books = data
});
$scope.display = function(){
// **YOUR CODE COMES HERE**
}
}]);
<td>{{book.title}}</td>
I have an app where the sidebar will show a list of to do messages, and a list of processed messages (navigate with tabs), and clicking on it will show the details of the message on the main section to the right of the sidebar. The view on the right has some form inputs whwere the user fills out the details of the message, press a button, and the message is moved from to-do to processed.
<div id="sidebar" data-ng-controller="MessageController">
<ul class="nav nav-tabs" id="message-tab">
<li>To-do</li>
<li>Processed</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="to-do">
<table class="table table-hover">
<tr data-ng-repeat="message in todoMessages | orderBy: id">
<td>
<span>{{message.name}} </span> <small style="float:right;">{{message.type}}</small>
</td>
</tr>
</table>
</div>
<div class="tab-pane" id="processed">
<table class="table table-hover">
<tr data-ng-repeat="message in processedMessages | orderBy: id">
<td>
<span>{{message.name}} </span> <small style="float:right;">{{message.type}}</small>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="main-panel">
<div class="message-preview " data-ng-view="">
</div>
</div>
The problem I am having is that the main section on the right uses ng-view with the $routeProvider providing the template when the URL hash changes. When trying to update a $scope object in the template view, the sidebar's lists does not update.
app.js
var app = angular.module('messageApp', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/todo/:messageId',
{
controller: 'MessageController',
templateUrl: 'app/partials/todoView.html'
})
.when('/processed/:messageId',
{
controller: 'MessageController',
templateUrl: 'app/partials/processedView.html'
})
.otherwise({ redirectTo: '/' });
});
However, if I put the same markup that's in the sidebar into the template view, the two-way binding works properly as I can see that the list updates when manipulating the scope objects.
What am I doing wrong and how can I have the sidebar using ng-controller update properly?