I am learning routing with angular java script ,
this is my index.html
<html lang="en" ng-app="eventsApp">
.....
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Create Event</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
This is my app.js,
var eventsApp = angular.module('eventsApp', ['eventsApp', 'ngRoute'])
eventsApp.config(function($routeProvider) {
$routeProvider.when('/newEvent',
{
templateUrl:'templates/NewEvent.html',
controller: 'EditEventController'
}).....
When i click on the button it do nothing and also doesn't load new event .
and get this error
"Error: [$injector:modulerr] Failed to instantiate module eventsApp due to:"
here is the controller
'use strict';
eventsApp.controller('EditEventController',
function EditEventController($scope, eventData) {
$scope.event = {};
$scope.saveEvent = function (event, form) {
if(form.$valid) {
eventData.save(event);
}
};
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
};
}
);
One of the things I'm noticing looks wrong is that you're passing in eventsApp as a dependency of itself.
var eventsApp = angular.module('eventsApp', ['eventsApp', 'ngRoute'])
Should be:
var eventsApp = angular.module('eventsApp', ['ngRoute'])
Secondly, you may want to check that you've included ngRoute into the page:
See installation instructions here: http://docs.angularjs.org/api/ngRoute
Check out a working example on Plunkr:
http://plnkr.co/edit/VZgTnBvi0Q8qtcpOUTx0
Related
When I click the Not heart div, all Not heart div must hide and all Hearted div will show. When I click the Hearted div, all Hearted div must hide and all Not heart div will show. The same interaction to collection component. When the hearted div is showing, the heartNumber have to add 1. When the Not heart div is showing, the heartNumber have to delete 1.
My application architecture is like this:
heart folder is on:
https://jsfiddle.net/jiexishede/Ltsgnn86/1/
collection folder is on:
https://jsfiddle.net/jiexishede/hq6dju3c/1/
show folder is on:
https://jsfiddle.net/jiexishede/e9bxf1f9/1/
The code in index.html is below :
<body ng-app="app" ng-controller="controller">
<div style="margin-bottom: 10px">
<heart is-heart="heartBoolean"></heart>
<collection is-collection="collectionBoolean"></collection>
</div>
<div>
<shownumber collection-number="10" heart-number="10"></shownumber>
</div>
<div style="margin-top: 10px">
<heart is-heart="heartBoolean"></heart>
<collection is-collection="collectionBoolean"></collection>
</div>
</body>
<script src="angular.js"></script>
<script src="collection/collectionComponent.js"></script>
<script src="heart/heartComponent.js"></script>
<script src="show/showComponent.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('controller', function ($scope) {
$scope.heartBoolean = true;
$scope.collectionBoolean = true;
})
</script>
<script>
collectionComponentFactoryFun('app','./collection');
showComponentFactoryFun('app','./show');
heartComponentFactoryFun('app','./heart');
</script>
Now, I have changed the text in the demo. The demo uses the variable named collectionBoolean and the variable named heartBoolean. If you change the boolean state in the component. I will vote your code, due to your code is not coupled.
I hope that is not too late.... According to what I see in your code I reckon that the main issue is with the way that you are setting up your main module and components.
I've just worked around a little bit I came up with this hope it will work.
angular.module('plunker', []);
angular
.module( 'plunker' )
.controller( 'MainCtrl', function ( $scope ) {
$scope.isHeart = true;
$scope.isCollection = true;
});
var HeartCtrl = function () {
var ctrl = this;
ctrl.$onInit = function () {
var isHeart = angular.copy( ctrl.isHeart );
console.log( 'isHeart : ', isHeart );
};
ctrl.$onChanges = function ( changes ) {
if ( changes.isHeart && !changes.isHeart.isFirstChange() ) {
ctrl.isHeart = angular.copy( changes.isHeart );
}
};
ctrl.clickHeartFun = function (boolean_number) {
ctrl.isHeart = boolean_number;
};
};
angular
.module( 'plunker' )
.component( 'heart', {
bindings: {
isHeart : '<'
},
templateUrl : 'heart.tpl.html',
controller : HeartCtrl
});
http://plnkr.co/edit/RJwYJ2iAxEQOV5jBwyXj?p=preview
In my MVC program simple angular value controllers values are not binding.
My code is as follows :
_Layout.cshtml
<body data-ng-app="ShoppingCartApp">
<div class="container body-content">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Scripts/angular.js")
#Scripts.Render("~/Scripts/Custom/App.js")
#Scripts.Render("~/Scripts/Custom/ShoppingCartController.js")
#RenderSection("scripts", required: false)
<hr />
</div>
</body>
App.js
var app = angular.module('ShoppingCartApp', []);
ShoppingCartController.js
app.controller('ShoppingCartController', function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";
// On load events
// $scope.loadValues();
});
My Html Code is follows :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script></script>
<h2>Index</h2>
Total {{2+2}} // This value workd FINE
<div ng-controller="ShoppingCartController">
<div class="row">
<div class="nav navbar-nav navbar-left">
<h3>Total {{2+2}}</h3> // Not working THIS
</div>
<h1>{{test}}</h1> // Not working THIS
</div>
</div>
When i try to access value in controller or access directive inside controller it's not working. What i miss in here?
Change your controller to:
app.controller('ShoppingCartController', function($scope, $http) {....});
Or create a function named ShoppingCartController and then pass it to controller:
app.controller('ShoppingCartController', ShoppingCartController);
Also change $scope.ShoppingCartObj.products to $scope.ShoppingCartObj = {}; and then add products to that object $scope.ShoppingCartObj.products = []; because, prev you havnt defined what $scope.ShoppingCartObj is, so this object will be undefined.
If you're using Bundler you need to specify the Dependency Injection values
Also - ShoppingCartObj isn't declared anywhere so you can't assign to a property products
app.controller('ShoppingCartController', ['$scope', '$http',
function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj = {},
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";
}]);
Here's a working Jsfiddle
I have a listing of blog posts and I want to be able to click on the title and have it dynamically redirect to the proper posting.
So far it works except when I click on the anchor tagged title it redirects to:
blog/#/post/:post
rather than
blog#/post/:post
I've tried to change the href to data-ng-href,
using target="_self"
and tried changing the href="#/post/{{post}}" and href="/post/{{post}}"
Routes:
(function(){
'use strict';
angular.module('ghpg')
.config(Config);
Config.$inject = ['$routeProvider'];
function Config($routeProvider){
$routeProvider
.when('/listing', {
templateUrl: '/angular/views/listing.client.view.html'
}).otherwise({
redirectTo:'/'
}).when('/post/:title',{
templateUrl: '/angular/views/post.client.view.html',
controller: 'postController',
controllerAs: 'post'
}).otherwise({
redirectTo:'/listing'
});
}
})();
Listing View:
(function(){
'use strict';
angular
.module('ghpg')
.controller('listingController', listingController);
listingController.$inject = ['$scope', 'blogContent'];//,'blogContent'] //, 'blogContent'];
////
function listingController($scope, blogContent){
var vm = this;
vm.articles = [];
grabData();
function grabData(){
return blogContent.getContent().then(function(data){
console.log(data.articles);
vm.articles = data.articles;
return vm.articles;
},function(err){
console.log(err);
vm.data = [];
});
}
}
})();
App.js:
(function(){
'use strict';
var dependencies = [
'ghpg',
'ngRoute'
];
angular.module('blogger', dependencies)
.config(Config);
Config.$inject = ['$locationProvider']
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
if (window.location.hash === '#_=_'){
window.location.hash = '#!';
}
//bootstrap angular
angular.element(document).ready(function(){
angular.bootstrap(document, ['ghpg']);
});
})();
LISTING VIEW:
<div class="container-fluid" data-ng-Controller="listingController as vm">
<h2> Listings </h2>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="post-listing" data-ng-repeat="post in vm.articles">
<h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title }} </a></h3>
<div class="article-container">
<div class="article-date"><span class="article-date">{{ post.date }}</span></div>
<div class="article-post>"><span class="article-content"> {{ post.content }} </span></div>
</div>
</div>
</div>
</div>
</div>
Having trouble where I went wrong. I strongly suspect that it's some small typo or something with my SPA location/locationProvider in app.js but it looks the same in my other apps, unless my eyes are fooling me (which could be totally happening!)
What I did for a fix was simply this:
changed the listing view's anchor:
<h3 class="article-title"><a target="_self" data-ng-href="/post/{{post.title}}"> {{ post.title }} </a></h3>
to include the /blog# portion in the href so that I have:
<h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title }} </a></h3>
Simple fix, cause only the blog portion or webpage of my website is the angularJS, everything else is not so the routing was not being called to route it until it saw /blog# as part of the app.
I am trying to make a simple project where i want to populate the section with ng-view directive and i keep getting the following error:
I also included in index.html the angular files:
1-angular min js
2-angular-route min js
3-angular-resource min js
Error: $injector:modulerr Module Error Failed to instantiate module
booksInventoryApp due to: Error: [$injector:modulerr]
How can i fix this?
My code is:
index.html
<!DOCTYPE html>
<html ng-app="booksInventoryApp">
<body>
<section ng-view></section>
<script src="js/index.js"></script>
</body>
</html>
index.js
var app = angular.module('booksInventoryApp', ['booksInventoryApp.bsm','booksInventoryApp.allBooks']);
//route provider
app.config(['$routeProvider', function($routeProvider){
$routeProvider
// route for the index page
.when('/', {
templateUrl : '../allBooks.html',
controller : 'booksCtrl'
})
// route for the best selling month page
.when('/bsm/:id', {
templateUrl : 'bsm.html',
controller : 'bsmCtrl'
})
// route for the root
.otherwise({
redirectTo : '/'
});
}]);
bsm.js
var app = angular.module('booksInventoryApp.bsm', []);
app.controller('bsmCtrl', function($scope) {
$scope.book = "Bla Bla";
});
bsm.html
<section class="container">
{{book}}
</section>
allBooks.js
var app = angular.module('booksInventoryApp.allBooks', []);
// controllers
app.controller('booksCtrl', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.success(function(data) {
$scope.data = data;
});
});
allBooks.html
<section class="row">
<section class="col-sm-6 col-md-2" ng-repeat="book in data.books">
<section class="thumbnail">
<img ng-src="{{book.url}}">
<section class="caption">
<h3>{{book.name}}</h3>
<p>Author: {{book.author}}</p>
<p>ID: <span class="badge">{{book.id}}</span></p>
<p>Available: <span class="badge">{{book.amount}}</span></p>
<p>Price: <span class="badge">${{book.price}}</span></p>
<p><a ng-src="#/bsm/{{book.id}}"><button class="btn btn-info">Best selling month</button></a></p>
</section>
</section>
</section>
</section>
You need to add ngRoute module in your app and also the script reference of the angular-route.min.js write after the angular.js, Also you need to add bsm.js and allBooks.js in your html after above two mentioned file has loaded.
Code
var app = angular.module('booksInventoryApp', [
'booksInventoryApp.bsm',
'booksInventoryApp.allBooks',
'ngRoute'
]);
Note
Both the version of angular.js & angular.route.js should be the
same otherwise it will show some wierd issue. Preferred version is 1.3.15
In your index.html page you not included bsm.js and allBooks.js files which contains the required dependencies of your app.
Since you have specified the dependency of 'booksInventoryApp.bsm','booksInventoryApp.allBooks' in your app angular is not able to find those modules and hence you are getting that error.
Also you need to include angular route script reference and ngRoute in your dependencies because you are using angular routing in your app.
var app = angular.module('booksInventoryApp', ['ngRoute', 'booksInventoryApp.bsm', 'booksInventoryApp.allBooks']);
following code create error like this
Uncaught Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=subCtrl&p1=not%20a%20function%2C%20got%20undefined
how can i fix it?
sample code here
http://plnkr.co/edit/i3KmuFd09puvCyfqoX39?p=preview
index.html
var myapp = angular.module("myapp",[]);
myapp.controller( "mainCtrl" , ["$scope","$compile",function($scope,$compile){
var p = $scope;
p.getSub = function() {
var url = "sub.html";
$.ajax({url:url,success:function(html) {
$("#content").html(html);
$compile(html)($scope);
}});
}
}]);
<body ng-controller="mainCtrl">
<button ng-click="getSub()">getSub</button>
<div id="content">
sub.html
</div>
</body>
sub.html
<script>
myapp.controller( "subCtrl" , ["$scope",function($scope){
alert("subCtrl created");
}]);
</script>
<div ng-controller="subCtrl">
sub.html loaded.
</div>
the problem is in the nested controllers. So you use "main" controller with $compile, and in the very next time you include nested controller in the same html.
So the solution is:
$.ajax({url:url,success:function(html) {
$("#content").html(html);
$compile(html)($scope);
alert("subCtrl created");
}});
and in the sub.html:
<div>
sub.html loaded.
</div>
Good luck.
in HTML:
<body ng-controller="mainCtrl">
<button ng-click="getSub()">getSub</button>
<div ng-if="showSub">
<div ng-include="{{mySub}}.html"></div>
</div>
</body>
your controller:
myapp.controller( "mainCtrl" , ["$scope",function($scope){
$scope.showSub = false;
$scope.mySub = '';
$scope.getSub = function(){
$scope.mySub = "sub"; // change this to include other files
$scope.showSub = true;
};
}]);