Getting Unknown provider: $routeProvider with ngRoute included - javascript

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.

Related

Angular $injector modulerr error on injecting ngRoute

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) {
});

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

What url to reach "/phone" in an Angular project?

what url should I use to reach the "/phone" part from the routing? I am trying this http://localhost:8888/workspace/AngA/phones but the page is blank. Or maybe the url is correct, and I forgot something else.
Here is the whole code (2 html pages for the view, 2 js pages) :
//in home.html
<h1>home</h1>
<p>
Add a {{ test }}
</p>
----
//in index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view>hello</div>
</body>
</html>
----
//in app.js
'use strict';
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/home.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
----
//in controllers.js
'use strict';
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', function ($scope) {
$scope.test = 'age';
});
phonecatControllers.controller('PhoneDetailCtrl', function($scope, $routeParams){
});

You haven't specified html5mode so to access that page you would do something like this instead:
http://localhost:8888/workspace/AngA/#/phones

Use materialize with Angular

Anyone know how I can use materializecss.com with Angular and UI-Router?
To add content inside the ui-view stops working materialize (parallax, grid system, etc.)
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="scripts/libs/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/libs/materialize.min.js"></script>
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-ui-router.js"></script>
<script src="scripts/libs/angular-ui-router.min.js"></script>
<script src="scripts/libs/ngStorage.js"></script>
<script src="scripts/controllers/main.js"></script>
var app = angular.module('elementif', [
'ngStorage',
'ngRoute',
'ui.router'
]);
app.config(['$routeProvider', '$httpProvider', '$stateProvider', '$urlRouterProvider', function ($routeProvider, $httpProvider, $stateProvider, $urlRouterProvider) {    
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "pages/home.html",
controller: 'sesionController'
})
.state("myProfile", {
url: "/myProfile",
templateUrl: "pages/myProfile.html",
controller: 'sesionController'
});
}
]);

You should try angular-materialize.
https://github.com/krescruz/angular-materialize

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

Categories

Resources