I am trying to learn the route features of angularJS, but what I have happened so far doesn't work.
If I ever click Load, Display, or Play (in my example: the links to possible action urls)
then <div ng-view></div> still exist in the DOM (when I inspect it) , moreover it is not replaced by the related html partial file as indicated in the templateUrl of the route provider.
The Chromium log console displays an error:
Uncaught ReferenceError: LoadCtrl is not defined from my_app
If I put all the when in comments while defining the route provider, then the error is no longer thrown.
So I have thought it could depend upon the order of definition of the controllers regarding the definition of the route provider. So I have tried putting them before, or after, also in a seperate controllers.js file... But that doesn't change anything.
I suppose I am making a obvious mistake, but I cannot catch it. Any idea ?
content of index.html:
<!DOCTYPE html>
<html ng-app="my_app">
<body>
<section class="section_command">
<ul>
<li>Load file</li>
<li>Display file</li>
<li>Play file</li>
</ul>
</section>
<section class="section_content">
<div ng-view></div>
</section>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
content of app.js:
var app = angular.module('my_app',[]);
app.controller('LoadCtrl', function($scope, $http, $routeParams){});
app.controller('DisplayCtrl', function($scope, $http, $routeParams){});
app.controller('PlayCtrl', function($scope, $http, $routeParams){});
app.config(['$routeProvider', function($routeProvider)
{
$routeProvider.
when('/load', {templateUrl: 'partials/load.html', controller: LoadCtrl}).
when('/display', {templateUrl: 'partials/display.html', controller: DisplayCtrl}).
when('/play', {templateUrl: 'partials/play.html', controller: PlayCtrl}).
otherwise({redirectTo: '/'});
}]);
the partial html files are as simple as can be:
load.html : <span>Loading</span>
display.html : <span>Displaying</span>
play.html : <span>Playing</span>
I'm pretty sure you need to address your controllers by their string name:
when('/load', {templateUrl: 'partials/load.html', controller: 'LoadCtrl'}).
Related
This is my very first AngularJs app and created it after going through many examples on the web but I am doing something wrong here. It is highly likely because files are stored in dedicated folders. The HomeView.html template gets loaded fine but the controller doesn't. I mean I cannot get greetingMessage printed in the template. All I see is {{ greetingMessage }} instead of "Welcome!". What am I missing?
Error
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=HomeController
App Structure
app
conponents
home
HomeView.html
HomeController.js
...
...
index.js
index.html
index.html
<body ng-app="myApp">
<h3>AngularJS</h3>
<hr />
<p>Home</p>
<div ng-view></div>
<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.min.js"></script>
<script src="index.js"></script>
</body>
index.js
var module = angular.module('myApp', ['ngRoute']);
module.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'components/home/HomeView.html',
controller: 'HomeController'
// I tried -> controller: 'components/home/HomeController'
})
.otherwise({
redirectTo: '/'
});
});
HomeView.html
<div ng-controller="HomeController">
<h4>Home</h4>
<p>{{ greetingMessage }}</p>
</div>
HomeController.js
var module = angular.module('myApp', []);
module.controller('HomeController', [
'$scope',
function(
$scope
) {
$scope.greetingMessage = 'Welcome!';
}]);
The main reason is you haven't referred homeController.js on index.html, it should place right after index.js. This will not solve your issue. The other thing I'd like to mention is, you shouldn't be creating myApp module again while registering your controller with your myApp module. By declaring new module will flush out former registered component. So just use module getter like angular.module('myApp') and append further components to it.
<script src="components/home/HomeController.js">
Code
angular.module('myApp')
.controller('HomeController', [ '$scope',
function($scope) {
$scope.greetingMessage = 'Welcome!';
}
]);
You must be attach app file and next attache your controller file in your hoem page or master page.
This example helped you
Angular js routing
I'm trying to swap views when I click a link using AngularJS.
My index.html is something like that:
<head>
<script src="media/static/js/angular-route.js"></script>
<script src="media/static/js/angular.js"></script>
<script src="media/static/js/app.js"></script>
<script src="media/static/js/controller.js"></script>
</head>
<body ng-app="demoApp">
View1
View2
<div ng-view></div>
</body>
My app.js is something like that:
angular.module('demoApp', ['ngRoute']).
config(['$routeProvider', function( $routeProvider) {
// Define routes
$routeProvider
.when('/view1',
{ templateUrl: 'templates/view1.html'})
.when('/view2',
{ templateUrl: 'templates/view2.html'})
.otherwise({redirectTo: 'view1'});
}]);
I'm completely new with Angular and I'm going crazy trying that.
Thanks in advance.
Sometime ago, I wrote a snnipet for this, you can found it here. Please give a feedback if it's useful and is still working.
HTML
<!DOCTYPE html>
<html ng-app="adaniapp">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="main">
<div ng-view></div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Javascript
var adaniapp = angular.module('adaniapp', ['ngRoute','ngResource']);
// configure our routes
adaniapp.config(['$scope', '$routeProvider', '$resource',function($scope, $routeProvider, $resource) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'page/login.html',
controller : 'mainController'
})
// route for the about page
.when('/home', {
templateUrl : 'page/home.html',
controller : 'HomeController'
})
// route for the contact page
.when('/meter', {
templateUrl : 'page/meter.html',
controller : 'MeterController'
})
.when('/viewbill', {
templateUrl : 'page/viewbill.html',
controller : 'ViewbillController'
});
}]);
// create the controller and inject Angular's $scope
adaniapp.controller('mainController',['$scope', '$routeProvider', '$resource', function($scope, $routeProvider, $resource) {
}]);
adaniapp.controller('HomeController',['$scope', '$routeProvider', '$resource', function($scope, $routeProvider, $resource) {
}]);
adaniapp.controller('MeterController',['$scope', '$routeProvider', '$resource', function($scope, $routeProvider, $resource) {
}]);
adaniapp.controller('MeterController',['$scope', '$routeProvider', '$resource', function($scope, $routeProvider, $resource) {
}]);
included ng-resource.js file and route.js file are included in index.html, but still its showing error in my console as
"Error: [$injector:modulerr]
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0="
all controller included.
I'm guessing you're actually missing some scripts. Try bower installing them or add them manually if not using bower. Missing angular-route.js, which is not included with angular, is especially common. If there are any 404's in your web developer console, they would help confirm that suspicion (although there's a small chance your web server might not be serving them as 404's if it's configured in an unusual way).
You can't inject $scope during configuration phase.
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
You can't inject $routeProvider in controllers since it is already configured, use $route service instead.
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
I'm trying to get into angularJS by writing the most basic app. However I'm unable to get even this small amount of code working - the controller doesn't seem to be displaying any of the views. This is almost a direct copy from a popular angularjs video I saw online. I have a feeling its not something big, and my guess is that I possibly have something wrong with the ng-view.
Any insight on what I'm doing wrong would be helpful.
index.html
<!doctype html>
<html ng-app="fastsql">
<head>
</head>
<body>
<div class="well">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="fastsql.js"></script>
</body>
</html>
fastsql.js
// setup fastsql as angular app "module"
var fastsql = angular.module("fastsql", []);
// set routeProvider rules in .config()
fastsql.config(function($routeProvider) {
// set what views are displayed for each change in the URL.
$routeProvider
.when("/", { controller: 'loginCntl', templateURL: 'test.html' })
.otherwise({ redirectTo: '/' });
});
// controllers
fastsql.controller("loginCntl", function($scope) { $scope.message = "hey"; });
templateURL should have been templateUrl.
you need to pass an array into the config function, the name of the services to injected, and then the function in to which they are injected.
fastsql.config(["$routeProvider", function($routeProvider) {
// do your thing
}]);