Migration angular 1.4 to angularjs 1.5 make error - javascript

I start to learn angularjs whit this simple code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools- yui-compressed.js' type='text/javascript'></script>
<script src='assets/js/menuMatic.js' type='text/javascript'></script>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body ng-app="myApp">
<div ng-include="'header.html'"></div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/posts.js"></script>
<script src="js/service/post.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp',['ngRoute'])
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
when i use angularjs 1.2.27 it's work fine but when i use angularjs 1.5.8 it show me this error
angular.js:38Uncaught Error: [$injector:modulerr] angular.js:38
i believe it some global controller function is disabled or something but i don't know how to fixed
EDIT
I use angularjs version 1.4.8 and it's working .. but when i use 1.5.8 it not working anymore

I think you need to separately add $rootProvider to your config like below:
var app = angular.module('myApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
}]);

It's either you put semi-colon at the end of the first line.
Or remove the "app" in second line of code.
var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
or
var app = angular.module('myApp',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});

Related

Can't inject ngRoute dependency in Angular

I can't seem to create a simple angular route in my current application, since it handles me the following error: Uncaught Error: [$injector:modulerr]
I have already injected ngRoute as a dependency in my module, as well as added the angular-route.js script in my html file. My current Angular version is 1.2.25, so it's the angular-route script.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ACME App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="init">
<a ng-href="#main">sup</a>
<ng-view></ng-view>
</body>
</html>
controllers.js
var app = angular.module("init", ["ngRoute"]);
app.config('$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
});
});
templates/main.html
<h1>Main Page</h1>
I think that you missed [ ]
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
});
}]);

Angular NgRoute not loading partial in Electron App

I'm currently working on a simple Electron desktop app, using Angular version 1.3.0. I am using NgRoute to switch between a main.html and settings.html view. This works fine when tested in a locally run server, but when run through Electron the link which is meant to load the settings view leads to a blank page.
I've set the base tags href to './' and the main.js and vendor.js are being loaded in fine. Below is the code from the Angular app.js file.
'use strict';
angular
.module('AppApp', [
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/settings', {
templateUrl: 'views/settings.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
});
And here is the index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<base href="./">
</head>
<body ng-app="AppApp">
<div class="container">
<div ng-view=""></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
And finally the main.html (Which loads when the electron app starts with no problems) with the link used to the load the settings view.
<div hm-dir='hm-dir'>
<img id="logo" src="images/logo-anchor_32x32.svg"/>
<div id="swipe-mask">
<h1>App</h1>
</div>
</div>

AngularJS Unknown Provider Error (Firebase & AngularFire)

I've been building an app using Angular and Firebase and it was working until I decided to change directories and build it again from scratch to fix some compatibility issues (using bootstrap). Now when I try to go to my URL I get the following error:
Error: [$injector:unpr] Unknown provider: $firebaseArrayProvider <- $firebaseArray
I've search through similar questions and have not found any answers that solve my problem. I've tried installing Angular through bower and by linking, as well as linking to older versions of AngularFire.js and Firebase.js. Below is the code for each of the files involved.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/dirty-soda.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-route.js"></script>
<head>
</head>
<body>
<div ng-view></div>
<script src="app.js"></script>
<script src="editor/editor.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="angularfire.min.js"></script>
<script src="../src/ace.js"></script>
</body>
</html>
app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.editor'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: 'app/editor'});
}]);
editor.js
angular.module('myApp.editor', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/editor', {
templateUrl: 'editor/editor.html',
controller: 'SnippetCtrl'
});
}])
.controller('SnippetCtrl', ['$scope','$firebaseArray','CommonProp', function($scope,$firebaseArray,CommonProp) {
$scope.username = CommonProp.getUser();
var firebaseObj = new Firebase("<Firebase URL>");
$scope.snippets = $firebaseArray(firebaseObj);
}]);
You forgot to include new module "firebase" in app.js
app.js
angular.module('myApp', [
'ngRoute',
'myApp.editor',
'firebase'
]).
Edit:
Include the answer from #Explosion Pills:
In index.html, you also should move your script src="app.js" to the last line in order to load all required js files first before registering them.

angular.js routing only on webserver

I'm new to Angular.js so bear with me. I found Angular's routing pretty neat which is why I want to try my first Webpage with it. My approach is the following:
<!doctype html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>testrouting</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="inject" ng-view></div>
</body>
</html>
and the an app.js
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'routes/index.html'
});
});
problem is, that index.html is not shown. Inside index.html I have a plain <p> element with some text. But no text is showing on my root index. As far as I know angular is a front-end framework, so is there any Webserver neccessary which causes the problem?
Thanks
I've seen places that say that routing requires a server:
http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating

AngularJS ng-view not loading template file content

I'm trying to set up a demo angular app but for some reason my partial (partials/test.html) content isn't loading into the layout file. Here's the index.html:
<!DOCTYPE html>
<html lang="en" ng-app="btq">
<head>
<meta charset="utf-8" />
<title>NgView Test</title>
</head>
<body>
<p>Some stuff on the page.</p>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
AngularJS is version 1.0.7. app.js contains the following:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('btq', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/dashbaord', {templateUrl: 'partials/test.html', controller: 'DashboardCtrl'});
$routeProvider.otherwise({redirectTo: '/dashboard'});
}]);
/* Controllers */
angular.module('btq.controllers', []).
controller('DashboardCtrl', [function() {
}]);
I'm obviously missing something simple. Any help would be appreciated!
May be its because of "typo". You wrote "dashbaord" instead of "dashboard" here:
$routeProvider.when('/dashbaord' , ...
Change
angular.module('btq.controllers', [])
to
angular.module('btq')
otherwise this creates a second app in your app.js

Categories