I am using two controllers(In diffrent js files) for different views.
My main HTML
================================================================================
<html ng-app="MyApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/JS/utilityJS/angular.min.js"></script>
<script type="text/javascript" src="/JS/utilityJS/angular-route.js"></script>
<script type="text/javascript" src="/JS/app.js"></script>
<script type="text/javascript" src="/JS/controllerLocation.js"></script>
<script type="text/javascript" src="/JS/controllerItem.js"></script>
</head>
<body>
<div id="populateDiv" >
<div id="header" ng-include src="'/pages/header.html'"></div>
<div id="footer" ng-include src="'/pages/footer.html'"></div>
<div id="groceryBg" class=" mainContentBg" style=""> </div>
<div ng-view=""></div>
</div>
</body>
</html>
App.js // main js file
angular.module('controllersModule', []);
var AppModule = angular.module('MyApp', ['ngRoute','controllersModule']);
AppModule
.service('locationService', function ($http) {
......
}
AppModule .config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Load/', {
templateUrl: 'location.html',
controller: 'locationCtrl'
}).
when('/Items/', {
templateUrl: 'items.html',
controller: 'itemsCtrl'
}).
otherwise({
redirectTo: '/Load/'
});
}]);
controllerLocation.js // location controller
angular.module('controllersModule').controller('locationCtrl', ['$rootScope', '$scope','$route', '$http','$location','locationService', '$routeParams',
function($rootScope, $scope, $route,$http,$location,locationService, $routeParams)
{
$location.path("/Items");
}
controllerItem.js // Item controller
angular.module('controllersModule').controller('itemsCtrl' ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
console.log("Scope id Items is:- " + $scope.$id);
}
location.html // Location html
<html>
<head>
</head>
<body>
<div>
Location.....
</div>
</body>
</html>
items.html
<html>
<head>
</head>
<body>
<div>
Items.....
</div>
</body>
</html>
================================================================================
When I am calling /Load and debugging its showing the location.html content and loading controllerLocation as well. But after $location.path("/Items"); its loading items.html but not loading controllerItem and throwing erroenter code herer http://errors.angularjs.org/1.2.22/ng/areq?p0=itemsCtrl&p1=not%20aNaNunction%2C%20got%20undefined.
Can you please help in finding what is the problem?
You forgot a comma and a closing square bracket in the declaration of itemsCtrl
angular.module('controllersModule').controller('itemsCtrl', ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
console.log("Scope id Items is:- " + $scope.$id);
}]);
Related
I am getting error when i use ngSanitize.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile',
function($scope, $templateCache, $compile) {
//$templateCache.remove("templateCache.html");
$scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
}
])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ng-bind-html="caches"></span>
</body>
Help me out what wrong in this code
Does this works with your files?
I removed ngSanitize dependency, injected $sce in your controller and used ng-bind-html-unsafe in HTML.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile', '$sce', function($scope, $templateCache, $compile, $sce) {
//$templateCache.remove("templateCache.html");
$scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
}
])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ng-bind-html-unsafe="caches"></span>
</body>
ng-bind-html on bind safe html like
<b>,<p>,<h1> etc
But not like input,button tags
in that case you can use angular.element()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile','$rootElement', function ($scope, $templateCache, $compile, $rootElement) {
var cache = $compile( $templateCache.get("templateCache.html"))($scope);
angular.element($rootElement).find("span").append(cache);
}])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ></span>
</body>
I am trying to do routing in angular Js in mvc but I am not able to find solution for this errors.
$injector:modulerr this Error i am getting
Uncaught ReferenceError: controller is not defined
<html lang="en" ng-app="APP">
<head><script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script>
var app = angular.module('APP', ['ngResource']).
config(function ($routeProvider) {
$routeProvider.
When('/', { templateUrl: '/Project/Template/RouteTemplate.html', controller: 'directoryController'}),
When('/view', { templateUrl: '/Project/Template/Home.html' })
});
controller('directoryController', ['$scope', '$http', function ($scope, $htp) {
alert("hai");
}])
</script>
</head>
<body>
<div class="">
<div ng-controller="directoryController">
<div ng-view>
</div>
</div>
</div>
you need app.controller and it is $http not $htp
controller('directoryController', ['$scope', '$http', function ($scope, $htp) {
should be:
app.controller('directoryController', ['$scope', '$http', function ($scope, $http) {
Your not chaining, after the end of .config remove the ; and add another . to chain the controller call:
angular.module('APP', ['ngResource']).config({}).controller()
^^ MISSING THIS
I'm trying to pull some data out of url to pass into a controller for use in the controller. I've been trying to do it via Angular Routing.
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
$routeParams in the controller is always null. Why?
Secondly, the url of the page that this is used on will be something like this: http://www.blah.com/angularroute/edit/32432 Is this an appropriate use of Angular routing?
Hi it looks like you miss reference to angular-route.js script please see example here: http://plnkr.co/edit/RZxt3t9dNQxbyW94V9jQ?p=preview
JS:
var app = angular.module('app', ['ngRoute']);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController',
templateUrl: 'http://run.plnkr.co/d8ZBAv3VEkfIJI4h/search.html'
});
$locationProvider.html5Mode(true);
});
app.controller('firstCtrl', function($scope) {
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
console.log($routeParams);
$scope.SearchText = $routeParams.sometext;
}
html:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl">
Search for elephant<br/>
Search for horse<br/>
Search for tigger<br/>
</div>
<div ng-view="">
</div>
</body>
</html>
Had the same problem with AngularJS 1.3.0, updating to 1.3.13 fixed it.
I have 2 js files in different directories for each module. if i start my app, i get the error, that the controller SubAppCtrl cannot be found ... can anyone tell me, why do i get this error message?
Code in mainAPP:
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/test', {templateUrl: 'components/test/test-list.html', controller: SubAppCtrl});}]);
Code in subAPP:
var myapp = angular.module('subAPP', []);
myapp.controller('SubAppCtrl', ['$scope', '$rootScope', '$translate', function ($scope, $rootScope, $translate){ .... ]);
html
<!doctype html>
<html ng-app="mainAPP" lang="en">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="components/test/subAPP.js"></script>
<script src="js/mainAPP.js"></script>
...
</head>
<body>
<div ng-view></div>
</body>
</html>
mainApp should read
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config([
/******/ '$routeProvider',
function ($routeProvider) {
$routeProvider.when('/test', {
templateUrl: 'components/test/test-list.html',
controller: 'SubAppCtrl'
});
}
]);
note quotes around the controller name.
I've got an incredibly simple AngularJS template, I'm trying to get routing to work but when I load the page I'm just seeing the H1 tag from my index.html.
My app is in a sub directory, /angular-route/, and I know that the partials exist, I can visit /angular-route/partials/interest.html and the page renders fine.
Have I missed something really basic here?
<html>
<head ng-app="myApp">
<title>AngularJS Routing</title>
<base href="/angular-route/" />
</head>
<body>
<h1>AngularJS Routing</h1>
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
'use strict';
var myApp = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/interest', {
templateUrl: 'partials/interest.html',
controller: 'InterestCtrl'
}).
when('/catalogue', {
templateUrl: 'partials/catalogue.html',
controller: 'CatalogueCtrl'
}).
otherwise({redirectTo: '/interest'});
}]);
myApp.controller('InterestCtrl', function($scope, $routeParams) {
console.log('InterestCtrl');
});
myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
console.log('CatalogueCtrl');
});
</script>
Beside the base tag, which you will need, you've also placed the ng-app directive on wrong element (head). In your code, the Application is initialized only inside the header. Rest of the HTML is ignored by Angular.
WORKING PLUNKER
<html ng-app="myApp">
<head>
<title>AngularJS Routing</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script type="text/ng-template" id="partials/interest.html">
<h2>Inereset</h2>
</script>
<script type="text/ng-template" id="partials/catalogue.html">
<h2>Catalogue</h2>
</script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul>
<li>Interest</li>
<li>Catalogue</li>
</ul>
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
'use strict';
var myApp = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/interest', {
templateUrl: 'partials/interest.html',
controller: 'InterestCtrl'
}).
when('/catalogue', {
templateUrl: 'partials/catalogue.html',
controller: 'CatalogueCtrl'
}).
otherwise({redirectTo: '/interest'});
}]);
myApp.controller('InterestCtrl', function($scope, $routeParams) {
console.log('InterestCtrl');
});
myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
console.log('CatalogueCtrl');
});
</script>
</body>
</html
Following configuration worked for me!
Let's say we want to access our app using http://localhost:8000/app/
Then have your base tag with the following highlighted