angularjs: controllers with routeproviders - javascript

I am trying to load two controllers dynamically using routeproviders in angularjs. But it only returns a blank page instead of showing the default page. What is the error I have done? The code is given below.
Index.html
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<div ng-view=""></div>
</body>
<script>
var demoController = angular.module('demoController',[]);
demoController.config = function ($routeProvider){
$routeProvider
.when('/customers',{
controller:'sampleController',
templateUrl:'template/customers.html'
})
.when('/location',{
controller:'nextController',
templateUrl:'template/location.html'
})
.otherwise({redirect:'/customers'});
});
var dumpControllers={};
dumpControllers.sampleController=function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
};
dumpControllers.nextController=function ($scope){
$scope.location=[{city:'Chennai'},{city:'Bangalore'},{city:'Mumbai'}];
}
demoController.controller(dumpControllers);
</script>
location.html
<ul>
<li ng-repeat="loc in location | orderBy: 'city'">{{ loc.city }}</li>
</ul>
customers.html
<input type="text" ng-model="searchName">
<ul>
<li ng-repeat="cust in customers | filter:searchName | orderBy:'country'">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
Can help me with this working? Thanks!!!

Put this in your head after you load angular:
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
and inject the module:
var demoController = angular.module('demoController',['ngRoute']);
and another problem:
.when('/location',{
controller:'nextController',
templateUrl:'template/location.html'
})
.otherwise({redirect:'/customers'});
};//Removed parenthesis

Related

What does equals in ngRepeat do?

What does the equals in the ng-repeat attribute value mean?
<li ng-repeat="person in people = (people | orderBy: firstname)">
instead of doing:
<li ng-repeat="person in people | orderBy: firstname">
I can't see any examples explaining its use in the documentation for ngRepeat.
It is usefull for count how many objects were filtered, eg.
function People($scope) {
$scope.people = [{
firstname: 'a'
}, {
firstname: 'c'
}, {
firstname: 'b'
}, {
firstname: 'c'
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="People">
<ul>
<li ng-repeat="person in filteredPeople = (people | filter: 'c')">{{person.firstname}}</li>
</ul>
Total filtered: {{ filteredPeople.length }}
</div>
#Krzysztof - There is no requirement of "=" operator usage to show number of objects filtered. It can be done without it. So, you are completely wrong.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in people | orderBy: 'age'">{{x.name}},{{x.age}}</p>
<p>Total Filtered: {{people.length}}</p>
<script>
//Module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope,$timeout){
$scope.people = [{name:"Peter",age:15},{name:"Julie",age:28},{name:"Roger",age:17}];
});
</script>
</body>
</html>

Cannot get angular.isString to work with ng-repeat

I'm trying to do an angular.isString comparison with ng-if inside an ng-repeat. But all items in the array are returned.
So I tried to just output the angular.isString result but it doesn't output anything.
Here is what I would like to do:
<li ng-repeat="item in data">
<div ng-if="angular.isString(item)">
{{ item }}
</div>
</li>
function MyCtrl($scope)
{
$scope.data =
[
"Hello",
"-",
123
];
}
Here's a fiddle: http://jsfiddle.net/m6k13whh/2/
Angular expressions are evaluated against the scope. You can create a function which returns angular.isString:
<li ng-repeat="item in data">
<div ng-if="isString(item)">
{{ item }}
</div>
</li>
$scope.isString = function(item) {
return angular.isString(item);
}
You can also just filter all of the items with that function:
<li ng-repeat="item in data | filter:isString">
<div>
{{ item }}
</div>
</li>
The best solution is to pass reference to angular method into scope
$scope.isString = angular.isString
then in partial you can just use ng-if="isString(item)"
http://plnkr.co/edit/5keCUQrHQnbl4Wg0oKp1?p=preview
Hej,
Make sure you only import one library.
Because in the fiddle you have include two angular scripts.
Remove the one in External Resources!
<div ng-app="myApp" ng-controller="MyCtrl">
<!-- this if comparison is what I want to do -->
<ul>
<li data-ng-repeat="item in data">
<div data-ng-if="isString(item)">
{{ item }}
</div>
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [
"Hello",
"-",
123
];
$scope.isString = function(value) {
return angular.isString(value);
};
});

Add template conditionally in Angular

I have some data:
$scope.posts = [
{ 'name' : 'post1', 'templateName' : 'template1.html' },
{ 'name' : 'post2', 'templateName' : 'template2.html' }
]
...and I have two templates:
<script type="text/ng-template" id="template1.html">
<p><span>{{post.name}}</p></li>
</script>
<script type="text/ng-template" id="template2.html">
<p>{{post.name}}</p>
</script>
They are to be inserted into a list that is backed by $scope.posts, which in turn is listed with:
<li ng-repeat="post in posts"></li>
How do I iterate over $scope.posts and insert the right template, based on 'templateName', but also populate it with post.name?
I would use ngIf for something like this, you can also use ngSwitch
<p ng-if="post.templateName == myTemplate"></p>
<p ng-if="post.templateName == myOtherTemplate"></p>
So I ended up doing the following:
<li ng-repeat="post in posts">
<ng-include src="post.template"></ng-include>
</li>
Just to be safe:
<li ng-repeat="post in posts">
<div ng-include="post.templateName"></div>
</li>
In case some Browsers(IE) don't like non standard tags.

AngularJS push item does not work

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:
When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.
<script type="text/javascript" src="angular.js" ></script>
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
</div>
</div>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
<script type="text/javascript">
var App = angular.module("App", []);
App.controller("MyController", function($scope){
$scope.names = [
{ first : "Thomas"},
{ first : "Geferson"},
{ first : "Jenny"},
{ first : "Maria"},
];
$scope.AddName = function(){
$scope.names.push({
name : $scope.Namer.name;
});
};
});
</script>
Working DEMO
var App = angular.module("App", []);
App.controller("MyController", function ($scope) {
$scope.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}];
$scope.AddName = function () {
$scope.names.push({
first: $scope.Namer.name
});
};
});
You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name" />
<input type="submit" data-ng-click="AddName()" />
</div>
</div>
Move your inputs to inside your MyController so that it executes code in the scope created by the controller:
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
</div>
</div>
Another mistake is that you need to change name to first to match with your existing object
$scope.AddName = function(){
$scope.names.push({
first : $scope.Namer.name //change to first and remove the ;
});
};
DEMO

AngularJS: Error: Unknown provider

Simple thing - works in the jsfiddle but not in my file. I'm trying to add some data to "factory" of the module and then use it within my controllers.
This is the relevant code:
var challengesApp = angular.module('challengesApp', []);
challengesApp.factory('Challenges', function() {
var challenges = [
{
'program': {
"num": "1",
"name": "aaa"
},
'challengeDesc': "desss",
'items': [
{title:"aaa",
desc:"bbb",
link: "www.google.com",
fiction: true},
]
}
];
return challenges;
});
function ChallengeCtrl($scope, Challenges) {
$scope.challenges = Challenges;
etc...
}
function ChallengeListCtrl($scope, Challenges) {
$scope.challenges = Challenges;
etc..
}
and the HTML:
<body ng-app="challengesApp">
<div ng-controller="ChallengeCtrl">
<div id="question">
<h2>{{ challenge.challengeDesc }}</h2>
<ul>
<li ng-repeat="item in challenge.items">
<strong>{{ item.title }}</strong> - {{ item.desc }}
</li>
</ul>
</div>
</div>
<div ng-controller="ChallengeListCtrl">
<div id="programs_list">
<ul>
<li ng-repeat="program in challenges | orderBy:orderProp:reverse">
<a href="" ng-click="changeChallenge(program)">
{{ program.program.num }} - {{ program.program.name }}
</a>
</li>
</ul>
</div>
</div>
<script src="js/main.js"></script>
</body>
anything here that I'm missing?
So, as I suspected, it was a dumb mistake. the <html> tag was:
<html ng-app>
blocking the correct ng-app attribute at the <body> tag.

Categories