I'm newbie to AngularJs and when I try to use version 1.4.9 of Angular instead of 1.2.9 (that i used with no problem) i get error. I read about the need of declare new function in this way:
angular.module('scotchApp', []).controller('prenotazioneController', [function ($scope) {
//$scope.message = 'Pagina Delle info!!!';//
}]);
instead of:
function getTask($scope, $http, Base64) {
//do something
};
But i got always this error:
Error: ng:areq
Bad Argument ---
Argument 'mainController' is not a function, got undefined
I think the error refer to this code, but i already changed the way i declare the function.
In JS:
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'view/home.html',
controller: 'mainController'
})
// route for the about page
.when('/prenotazione', {
templateUrl: 'view/prenotazione.html',
controller: 'prenotazioneController'
})
.when('/login', {
templateUrl: 'view/login.html',
controller: 'loginController'
});
});
// create the controller and inject Angular's $scope
angular
.module('scotchApp', [])
.controller('mainController', [function ($scope) {
// create a message to display in our view
$scope.message = 'Vai alla Prenotazione';
}]);
angular.module('scotchApp', []).controller('prenotazioneController', [function ($scope) {
/* $scope.message = 'Pagina Delle info!!!';*/
}]);
angular.module('scotchApp', []).controller('loginController', [function ($scope) {
$scope.message = '*Necessario per eseguire una prenotazione';
}]);
In HTML:
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400italic,400,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="style.css" rel="stylesheet" type="text/css">
<!-- SPELLS -->
<script src="//code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.9/angular-route.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="test.js"></script></head>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img class="hidden-xs" src="image/logo.png" alt="">
<img class="visible-xs" src="image/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</div>
You are referencing the app module incorrectly:
Your code:
angular.module('scotchApp', [])
.controller(...)
By using the angular.module('scotchApp', []) with the brackets [ ] you are essentially overwriting your app module every time.
Change it to this:
angular
.module('scotchApp')
.controller(...)
You only need to create the app module once and then reference it.
Creating a module:
angular.module("app", []); // creates a module.
Referencing a module:
angular.module("app"); // reference a module.
Here is a simple example below:
(function () {
var app = angular.module("app", []);
app.controller("MainController", MainController);
MainController.$inject = ["$http"];
function MainController($http) {
}
})();
Here is a Plnkr Example using your style of code. Hope this helps and clarify a few things.
Related
i'm new on angular js.
I have this HTML page (dowloaded from tutorial)
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
<li><i class="fa fa-comment"></i> Logout</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<footer class="text-center">
<p>View the tutorial on Scotch.io</p>
<p>View a tutorial on Animating Your Angular Single Page App</p>
</footer>
</body>
</html>
with this script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'aboutController'
})
// route for the contact page
.when('/logout', {
templateUrl : 'pages/logout.html',
controller : 'logoutController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
scotchApp.controller('logoutController', function($scope) {
$scope.message = 'Logout';
});
I also have 4 simple HTML pages (home, contact, about and logout) that have the same structure like this
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
I've just added logout page, the related tags in index.html and the route within the script. but it isn't been loaded. I don't understand why.
I started with AngularJS, and my route doesn't work. I searched in google and try some solution found but nothing works.
My index.html (public/index.html)
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projet Web</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--<li class="active">Link <span class="sr-only">(current)</span></li>-->
<li>Véhicules</li>
<li>Agences</li>
<li>Agents</li>
<li>Statut</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- div pour les templates-->
<div ng-view>
</div>
</body>
</html>
My app.js (javascript/app.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : '../views/index.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/vehicules', {
templateUrl : '../views/vehicules.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/agents', {
templateUrl : '../views/vehicules.html',
controller : 'AgentsCtrl'
})
// route for the about page
.when('/agences', {
templateUrl : '../views/vehicules.html',
controller : 'AgencesCtrl'
})
// route for the about page
.when('/status', {
templateUrl : '../views/vehicules.html',
controller : 'StatusCtrl'
})
.otherwise({redirectTo: '/'});
});
And my controller (controllers/VehiculesCtrl.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet) {
$scope.text = 'Salut ! je teste le controleur';
var url = '127.0.0.1:3000/vehicules';
//console.log("curieux", VehiculesGet);
var res = VehiculesGet.getAllVehicules(url, function(data, status){
console.log("test",status);
console.log("test",data);
$scope.result = data;
});
});
// GET ALL VEHICULE
myApp.factory('VehiculesGet', [ '$http', function($http) {
//var url = 'http://127.0.0.1:3000/vehicules';
var result;
var data;
return {
getAllVehicules: function(url, callback) {
$http.get('http://127.0.0.1:3000/vehicules')
.success(function (data, status) {
// données récupérées avec succès
callback(data, status);
}).error(function(data,status){
callback(data, status);
});
}
};
}]);
My tree:
public
javascripts
controllers
VehiculesCtrl.js
app.js
views
index.html
Help me please :) ...... And sorry for my english x)
Thanks
I think you should add
<body ng-controller="VehiculeCtrl">
to your controller and remove
var myApp = angular.module('myApp', ['ngRoute']);
from your controller.
Then export your controller from app.js like
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)
Try to load the angular-route after the angular, not after your controller, this should work
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
</head>
You are missing the ng-view element in your markup. This is where the routing functionality places the templateUrl content. See this link for documentation: https://docs.angularjs.org/api/ngRoute/directive/ngView
You should remove var myApp = angular.module('myApp', ['ngRoute']) from VehiculesCtrl.js. In VehiculesCtrl.js you should use myApp variable which is declared in app.js
I am going through ng-grid tutorial present at http://blog.backand.com/ng-grid-and-a-simple-rest-api/
When I follow all the steps it shows following error in console
Error: [$injector:unpr] Unknown provider: gridServiceProvider <- gridService <- homeController
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=gridServiceProvider%20%3C-%20gridService%20%3C-%20homeController
at http://localhost:9000/js/libs.min.js:9269:12
at http://localhost:9000/js/libs.min.js:13200:19
at Object.getService [as get] (http://localhost:9000/js/libs.min.js:13347:39)
at http://localhost:9000/js/libs.min.js:13205:45
at getService (http://localhost:9000/js/libs.min.js:13347:39)
at invoke (http://localhost:9000/js/libs.min.js:13379:13)
at Object.instantiate (http://localhost:9000/js/libs.min.js:13396:27)
at http://localhost:9000/js/libs.min.js:17655:28
at link (http://localhost:9000/js/libs.min.js:39064:26)
at invokeLinkFn (http://localhost:9000/js/libs.min.js:17419:9) <div ng-view="" class="ng-scope">libs.min.js:20800
(anonymous function)libs.min.js:17750
(anonymous function)libs.min.js:17421
invokeLinkFn libs.min.js:16928
nodeLinkFn libs.min.js:16281
compositeLinkFn libs.min.js:16160
publicLinkFn libs.min.js:16299
boundTranscludeFn libs.min.js:16955
controllersBoundTransclude libs.min.js:39022
update libs.min.js:23908
Scope.$broadcast libs.min.js:38705
(anonymous function)libs.min.js:22376
processQueuelibs.min.js:22392
(anonymous function)libs.min.js:23589
Scope.$evallibs.min.js:23405
Scope.$digestlibs.min.js:23694
Scope.$applylibs.min.js:18852
donelibs.min.js:19042
completeRequestlibs.min.js:18983 requestLoaded
Why does it show this error? My gridService.js is
'use strict';
angular.module('angularGruntSeed')
.factory('GridService', ['$http', '$q',
function($http, $q) {
var contributorsFile = 'json/contributors.json';
var contributors = [];
function getContributors() {
var deferred = $q.defer();
$http.get(contributorsFile)
.then(function(result) {
contributors = result.data;
deferred.resolve(contributors);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
return {
getContributors: getContributors
};
}
]);
homeController.js is
angular.module('angularGruntSeed')
.controller('HomeController', ['$scope', 'GridService',
function($scope, gridService) {
gridService.getContributors().then(function(data) {
$scope.myData = data;
});
$scope.gridOptions = {
data: 'myData'
};
}
]);
app.js
'use strict';
// Declare core application module which pulls all the components together
angular.module('angularGruntSeed', [
'ngAnimate',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngGrid',
]);
app-routes.js
'use strict';
angular.module('angularGruntSeed')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/templates/home.html',
controller: 'homeController'
})
.otherwise({ redirectTo: '/' });
}]);
<!doctype html>
<html lang="en" ng-app="angularGruntSeed">
<head>
<title>Angular Grunt Seed Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/ng-grid/ng-grid.css" rel="stylesheet">
<link href="css/starter-template.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Angular Seed</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div ng-view></div>
<!-- build:js js/libs.min.js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/fastclick/lib/fastclick.js"></script>
<script src="../bower_components/ng-grid/ng-grid-2.0.14.debug.js"></script>>
<!-- endbuild -->
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<script src="js/app-routes.js"></script>
<script src="js/homeController.js"></script>
<!-- endbuild -->
</body>
</html>
Put the HomeController,js before the other js files:
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<script src="js/gridService.js"></script>
<script src="js/homeController.js"></script>
<script src="js/app-routes.js"></script>
Order matters, it can't find the controller because it's not yet declared.
Not new to programming. But I'm new to angularjs. So it's probably a daft question..
I've been following a tutorial...but for some reason the page routing doesn't work.
I have a nav bar on the top, home, about, contact etc. Typical stuff.
I would like to be able to click on "about" and be routed to the about.html file on the same page.
Nothing appears! The index.html is in a partials file. Please note I'm a newbie to angular and I've followed the instructions. My server works fine. The Nav bar looks good but doesn't link properly.
This is the code for index.html. Thanks
<!-- define angular app -->
<html ng-app="financeApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- define angular controller -->
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view> </div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
and this is the code for script.js
// create the module and name it financeApp
// also include ngRoute for all our routing needs
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#', {
templateUrl : 'partials/index.html',
controller : 'mainController'
})
// route for the about page
.when('#about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('#contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
The following should work for you.
You need to create partials/main.html
INDEX.HTML
<!DOCTYPE HTML>
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<!-- <img class="logo" src="img/logo.png" /> -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</div>
</header>
<body>
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
SCRIPT.JS
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/main.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/'
})
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I guess you followed this tutorial and at least it explains everything what you need.
Possible errors could be:
Wrong folder name -> check again if the templateURLs match your file system
Errors in the template files
If you provide us some error messages from the console, we can help you better.
So I followed this guide: http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
But when I try to change the view nothing happens, anybody a idea what I do wrong?
This is the code I got.
Home.php:
<!DOCTYPE html>
<html ng-app="lax">
<head>
<meta name="author" content="Koen Desmedt" />
<meta name="description" content="CMS Belgium Lacrosse" />
<meta name="keywords" content='Lacrosse, BLF, Belgium' />
<meta name="googlebot" content="noarchive" />
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="lax.js"></script>
<link href="css/style.css" rel="stylesheet">
<title>CMS Belgium Lacrosse</title>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/home">
<span class="glyphicon glyphicon-home"></span> BLF
</a>
</li>
<li>
Players
</li>
<li>
Club
</li>
<li>
Games
</li>
</ul>
</nav>
</div>
</header>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
</body>
</html>
lax.js:
var lax = angular.module('lax', []);
lax.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'views/news.php',
controller: 'NewsController'
}).
when('/players', {
templateUrl: 'views/players.php',
controller: 'PlayersController'
}).
otherwise({
redirectTo: '/home'
});
}]);
lax.controller('NewsController', function($scope) {
$scope.message = 'This is Add new order screen';
});
lax.controller('PlayersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
From angular 1.2.0, ngRoute has been moved to its own module. You have to load it separately and declare the dependency.
Update your html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
And Js:
var lax = angular.module('lax', ['ngRoute']);
For more information: http://docs.angularjs.org/guide/migration
Angular routes require the route module to be included as well. Here is the documentation that covers this.
So, I think you may be missing the:
<script src="angular-route.js"></script>
In the <head> of the page.
*Note: this module used to be part of Angular, but was moved out recently (1.2?). So, some tutorials are still assuming that $route is built-in.
Adding this would work :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
but it will not work without internet access when running for a first time ,Therefore you should ng-route dependency to your project and refer that in your html file
How to add ng-route dependency