Angular $injector modulerr error on injecting ngRoute - javascript

When I include ngRoute for routing I get this error $injector MOdulerr, Kindly let me know what am I doing wrong. Any help would be greatly appreciated.
Below are my two files, index.html and app.js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
<script type="text/javascript" src='app.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
app.js
var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider,$locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/sign-in', {
templateUrl: 'templates/sign-in.html',
controller: 'appctrl'
})
})
myapp.controller('appctrl', function ($scope) {
});

Related

Angular error 'ContactController' is not a function, got undefined

<div ng-app="app" ng-controller="ContactController" >
</div>
Above is my html file and This is controller file.
var app = angular.module('app', []);
app.controller('ContactController', function ($scope, ContactService,$window) {
});
This is my html section to have look. Please let me know if any mistake
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/controller/contactController.js"></script>
<script type="text/javascript" src="/service/contactService.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script type="text/javascript">
//var module = angular.module('app', [ContactService]);
</script>
</head>
I am getting error as Argument 'ContactController' is not a function,got undefined. Please help to resolve the issue.

Maybe you forgot the () in the first line.

Try change order of import js file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"
</script>
<script type="text/javascript" src="/service/contact.service.js"> </script>type="text/javascript"></script>
<script type="text/javascript" src="/controller/contact.controller.js">

Angular JS ui router not showing template (no js console errors)

Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html

To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview

How to separate routes in angularjs

So i created a simple app.js like this
var app = angular.module('app', ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
});
but when i create a separate file routes.js
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
});
The homepage is not shown. I double checked everything and i added the routes.js to the index page.
But it gives me this error : Uncaught ReferenceError: app is not defined.
But i don't know why? the app is not an anonymous function.
This is my index page
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.js"></script>
<script type="text/javascript" src="routes.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

Since you use app variable in routes.js you need to load this file after app.js where this variable is created:
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="routes.js"></script>
Alternatively you could setup routes in separate modules and use those modules as dependencies to main module:
var app = angular.module('app', ['ngRoute', 'ngResource', 'main', 'admin']);
and then for example in main-moudle.js:
angular.module('main', []).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});

Getting Unknown provider: $routeProvider with ngRoute included

I have upgraded from Angular.JS 1.1.5 to 1.2.26 and now im geting
Error: [$injector:unpr] Unknown provider: $routeProvider
Here is my index.html:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div ng-app="app">
<header ng-include="'partials/menu.html'"></header>
<div id="body">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
Here is my app.js:
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tasks', {
templateUrl: 'partials/tasks.html',
controller: 'tasksCtrl'
}).
when('/goals', {
templateUrl: 'partials/goals.html',
controller: 'goalsCtrl'
}).
when('/notes', {
templateUrl: 'partials/notes.html',
controller: 'notesCtrl'
}).
otherwise({
redirectTo: "/"
});
}
]);
I also tried Angular and Angular-route versions 1.2.6, 1.2.9, 1.3.0 but same issue.
I need Angular features that are only 1.2.0+, so downgrading is not an option.

Error in Routing in Angular JS

I am new to angular js
I was trying to load another html dyamically, below is the code i was trying
My Base HTML include
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="Module/app.js"></script>
</body>
</html>
and my app JS
var app = angular.module('LoginModule', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/login',
{
controller: '',
templateUrl: '/Module/View/Login/Login.html'
})
.otherwise({ redirectTo: '/login' });
});

Put your jquery and angular script in the body tag:
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
</head>
<body>
<div ng-view></div>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
<script src="Resource/angular-route.js"></script>
<script src="Module/app.js"></script>
</body>
</html>
Also I would set ng-view with ng-view=""
<div ng-view=""></div>
EDIT:
You forgot to include the ngRoute module. Please look at the following plnkr to more detail: http://plnkr.co/edit/A5X4BNsnuXxhmgPVOXpv
var app = angular.module('LoginModule', ['ngRoute']);

Categories

Resources