Getting started - Controller not a function got undefined - javascript

I am getting started with Angular routes. When I define the angular route for someNameController by putting its code into a controllers file and putting the html into a html file, the controller does not seem to bind well with the html. However, it is working correctly with my other controllers.
Links I have tried:
ngRoute not working. is there something i am doing wrong
angularjs ngRoute not working
https://docs.angularjs.org/error/ng/areq?p0=controllers%2FsomeNameController&p1=not%20a%20function,%20got%20undefined
index.html
<!DOCTYPE HTML>
<html>
<head>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="controllers/someNameController.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<div ng-app="someApp">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
someCustomersView.html
<div>
<h2>
Hello, world!
</h2>
<p>
{{ desc }}
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
<input type="text" class="form-control" ng-model="someName"/>
<br>
<p>{{ someName | uppercase }}</p>
<ul ng-repeat="customer in customers">
<li class="list-group-item">{{ customer | lowercase }}</li>
</ul>
</div>
someNameController.js
someApp.controller("someNameController", function($scope){
$scope.customers = ["Customer2", "Customer3", "Customer4", "Customer5"]
})

I made a mistake while declaring routes in config.js file.
I was assigning directory while assigning routes even after including the scripts for controllers in the html along with the directory. I was doing this in config.js:
someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
$routeProvider.when("/showSomeButtonsGroup", {
templateUrl : "views/view3.html",
controller : "controllers/page67Controller"
})
.when("/", {
templateUrl : "views/someCustomersView.html",
controller : "someNameController"
})
}])
instead of doing like this:
someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
$routeProvider.when("/showSomeButtonsGroup", {
templateUrl : "views/view3.html",
controller : "page67Controller"
})
.when("/", {
templateUrl : "views/someCustomersView.html",
controller : "someNameController"
})
}])

Related

Partial templates are not able to connect to the controller

command promt errorIn home.html, the value of {{message}} is not displayed .Infact it displays {{message}}
node.js is used to run the application.I guess there is a problem in connecting to the controller or the server.Please help to find the solution.
var app=angular.module('Demo',["ngRoute"])
.config(function ($routeProvider,$locationProvider)
{
$routeProvider
.when("/home",{
templateUrl:"home.html",
controller:"homeController"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
})
$locationProvider.html5Mode(true);
})
.controller("homeController",function($scope)
{
$scope.message="hey home page";
})
<!DOCTYPE>
<html >
<head>
<title>angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="router.js"></script>
<base href="./" />
</head>
<body ng-app="Demo">
<div>
<h1>website header</h1>
</div>
<div>
<ul>
<li>home</li>
</ul>
</div>
<div class="mainContent">
<ng-view></ng-view>
</div>
<h1>footer</h1>
</body>
</html>
<h1>{{message}}</h1>
<div>
message from controller will be displayed here
</div>
Try to use this <li>home</li> Maybe you missed the #in the a tag

How to do routing in angular js?

I am trying to do angular js routing application its works fine but i have facing an error that was i am clicking [View Students List] that is not working and page is not navigating to another page..
below is my code..
main.js
var app = angular.module("mainApp", ['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
enabled:true,
requiredBase:false
});
}]);
app.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Mark Waugh', city:'New York'},
{name: 'Steve Jonathan', city:'London'},
{name: 'John Marcus', city:'Paris'}
];
$scope.message = "Click on the hyper link to view the students list.";
});
below is my home.html
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a ng-href="/viewStudents"> View Students List</a>
</div>
below is my viewStudents.html
<div class="container">
<h2> View Students </h2>
Search:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>
<a ng-href="/home">Back</a>
</div>
below is my index.html code
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="mainApp">
<ng-view></ng-view>
</body>
</html>
You need to change the Home.html as,
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a ng-href="#/viewStudents"> View Students List</a>
</div>
DEMO
change
<a ng-href="/viewStudents"> View Students List</a>
to
<a ng-href="#/viewStudents"> View Students List</a>
try it
If you want to enable html5 mode, make sure you include your base tag AFTER your scripts are loaded. Like this
<!DOCTYPE html>
<html>
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>
<script src="js/main.js"></script>
<base href="/" />
</head>
<body ng-app="mainApp">
<ng-view></ng-view>
</body>
</html>
And it should work fine.
Take a look at working plunk

ui-router nested routes not working

Hello guys i am trying to use angular ui-router for nested routing in my website but i don't know where i am going wrong
this is my code
app.js
var faqApp = angular.module('faqApp', ['ui.router']);
faqApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('home.contactform', {
templateUrl: 'templates/contactform.html',
})
});
home.html
<div class="faq_head clearfix">
<img src="images/backbtn.png">
<h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
<h2 class="faq_heading">FAQs</h2>
<ul>
<li ng-repeat="option in faqoptions">
<a href="{{option.url}}" class="clearfix">
<span class="icon">
<img ng-src="{{option.image}}">
</span>
<span class="faq_name">{{option.name}}</span>
<span class="arrow">
<img src="images/right_arrow.png">
</span>
</a>
</li>
</ul>
</div>
<div class="bottom_btn_box">
Terms & Conditions
Credits
</div>
index.html
<!doctype html>
<html>
<head>
<title>Frequently ask questions</title>
<link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div ng-app="faqApp">
<div ui-view></div>
</div>
<script src="js/libs/jquery-1.12.3.min.js"></script>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/homeCtrl.js"></script>
</body>
</html>
In the above code i am calling 'home.html' in index.html through ui-view and then calling contactform.html in home.html but contactform.html is not loaded.
You need to define the url too,
.state('home.contactform', {
url: "/contactform",
templateUrl: 'templates/contactform.html',
})
DEMO

Use nested controllers in ngRoute - AngularJS

I have this in main.html:
<div ng-controller="MainCtrl">
<form ng-controller="SearchCtrl">
<input ng-model="query" ng-change="changed(query)" />
</form>
</div>
And, index.html:
<html>
<head>
<title>Dashboard</title>
</head>
<body ng-app="MyApp">
<nav ng-controller="NavCtrl">
...
</nav>
<div ng-view></div>
</body>
</html>
And, my ngRoute config is as follows:
module.config(function($routeProvider)){
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'SearchCtrl'
});
}
I tried accessing $scope.$parent in SearchCtrl.js looking for $scope of MainCtrl but I am getting undefined.
I tried changing the controller in my config but then, I am not able to access SearchCtrl. What should I do?
Based on structure shown everything inside ng-view will be in controller set by the route config .... SearchCtrl.
Then inside would be MainCtrl and inside that another (new instance) of SearchCtrl
So should probably change route controller to MainCtrl and remove ng-controller="MainCtrl"
module.config(function($routeProvider)){
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
}
main.html
<div>
<form ng-controller="SearchCtrl">
<input ng-model="query" ng-change="changed(query)" />
</form>
</div>
The main.html already in SearchCtrl scope and you don't need to define the scope again in the view.
Then, defining MainCtrl inside main.html which is under "SearchCtrl" scope will not take MainCtrl as its parent.
Hence remove both controller from main.html
<form>
<input ng-model="query" ng-change="changed(query)" />
</form>
Now in index.html, put the MainCtrl as parent to ng-view
.......
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
.......
Now try accessing $scope.$parent in your SearchCtrl then you could see it.

Error: [$injector:unpr] in angular.js

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', []);

Categories