moving from ng-include to ngRoute - javascript

I am new to Angular and learned the basics about it recently.
In my current project, I am developing a single page application. As of now, my HTML/JS setup is as per below:
HTML:
<body>
<ng-include src='"src/includes/home.html"'></ng-include>
<!-- home.html is the HTML template with static data -->
</body>
app.js:
'use strict';
var app = angular.module('MyApp',['home']);
angular
.module('home', [])
.directive('homeDir', function(){
return {
replace: true,
restrict: 'E',
templateUrl: 'src/includes/home.html'
};
});
This code is working fine but I would like to introduce routing to have better control over the pages, instead of using ng-include.
So now, my HTML looks the same and I actually dont know what to change in it while using routing.
My app.js now looks like this:
'use strict';
var app = angular.module('MyApp',['home']);
// trying to introduce routing:
angular
.module('home', ['ngResource', 'ngRoute'])
.config(['$routeProvider', '$locationProvider'],
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'src/includes/home.html',
controller: 'homeCtrl'
}).
when('/drawer', {
redirectTo: 'src/includes/home.html#drawer',
controller: 'drawerCtrl'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
app.controller('homeCtrl', function($scope){
$scope.message = "some message";
console.log("homeCtrl called");
});
app.controller('drawerCtrl', function($scope){
$scope.message = "some other message";
console.log("drawerCtrl called");
});
However, I am getting an error:
Error: error:modulerr
Module Error
As per the link following the error:
This error occurs when a module fails to load due to some exception.
Why is it not loading? What am I missing? What should I change the HTML to?
UPDATE:
After including angular-route.min.js, I am getting the error:
Error: whole is undefined
beginsWith#file:///D:/projects/svn/trunk/src/libs/angular.js:8729:1
LocationHtml5Url/this.$$parse#file:///D:/projects/svn/trunk/src/libs/angular.js:8772:9
$LocationProvider/this.$get<#file:///D:/projects/svn/trunk/src/libs/angular.js:9269:5
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
registerDirective/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:5316:21
forEach#file:///D:/projects/svn/trunk/src/libs/angular.js:322:7
registerDirective/<#file:///D:/projects/svn/trunk/src/libs/angular.js:5314:13
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
addDirective#file:///D:/projects/svn/trunk/src/libs/angular.js:6363:28
collectDirectives#file:///D:/projects/svn/trunk/src/libs/angular.js:5801:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5666:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compile#file:///D:/projects/svn/trunk/src/libs/angular.js:5603:1
bootstrap/doBootstrap/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:1343:11
$RootScopeProvider/this.$get</Scope.prototype.$eval#file:///D:/projects/svn/trunk/src/libs/angular.js:12077:9
$RootScopeProvider/this.$get</Scope.prototype.$apply#file:///D:/projects/svn/trunk/src/libs/angular.js:12175:11
bootstrap/doBootstrap/<#file:///D:/projects/svn/trunk/src/libs/angular.js:1341:9
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
bootstrap/doBootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1340:8
bootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1353:5
angularInit#file:///D:/projects/svn/trunk/src/libs/angular.js:1301:37
#file:///D:/projects/svn/trunk/src/libs/angular.js:21050:5
jQuery.Callbacks/fire#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1037:1
jQuery.Callbacks/self.fireWith#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1148:7
.ready#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:433:38
completed#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:103:4
file:///D:/projects/svn/trunk/src/libs/angular.js
Line 9511
Edit:
Here are my HTML imports:
<head>
<title></title>
<!-- External libraries -->
<link rel="stylesheet" type="text/css" href="src/css/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/css/headers.css">
<link rel="stylesheet" type="text/css" href="src/css/drawer.css">
<link rel="stylesheet" type="text/css" href="src/css/custom.css">
<script type="text/javascript" src="src/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="src/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="src/libs/angular.js"></script>
<script type="text/javascript" src="src/libs/angular-resource.js"></script>
<script type="text/javascript" src="src/libs/angular-ui-router.js"></script>
<script type="text/javascript" src="src/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="src/libs/angular-pull-to-refresh.js"></script>
<script type="text/javascript" src="src/libs/nprogress.js"></script>
<script type="text/javascript" src="src/libs/ng-modal.js"></script>
<script type="text/javascript" src="src/libs/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.core.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.utils.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.slider.js"></script>
<script type="text/javascript" src="src/js/app.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>

Config section is incorrect. Instead of
.config(['$routeProvider', '$locationProvider'], function($routeProvider, $locationProvider) { ... });
it should be
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { ... }]);
Note, that function definition belongs to array object.
Another mistake is in redirectTo property of the drawer route, currently it doesn't make sense. You want probably this instead:
.when('/drawer', {
templateUrl: 'src/includes/drawer.html',
controller: 'drawerCtrl'
})

Ensue that you have added the angular-route.js file to the html file.
And you are missing the ngRoute module here -
var app = angular.module('MyApp',['ngRoute','ngResource' ]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){... }]);
dfsq is correct. There are syntax errors in the code.

Related

Can't figure out why angularJS module won't load

I'm using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
// Creating fireref instance
app.factory('FireRef', function($firebase){
var ref = new Firebase('https://dablog.firebaseio.com/');
return ref;
});
// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
var ref = new Firebase('https://dablog.firebaseio.com/');
return $firebaseAuth(ref);
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/site/home');
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
// controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
// controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
// controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
})
Here is my blog.js file where it says "app is not defined":
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
You have declared 'use strict', so the app variable is undefined. You need to add
var app = angular.module('myApp');
to the top of BlogCtrl.js
Also, move <script src="js/app.js"></script> so that it's before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.
I don't have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you're creating a new app and will throw an error, since 'myApp' already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.
I think you need to include this line at the top of blog.js:
var app = angular.module('myApp');
Edited to remove the second parameter: , [].

Getting Started With Angular Routing

I'm just getting started with Angular and seem to have fallen down at the first hurdle. I wanted to build a simple skeleton app to start with. I pretty much copied the code of the angularjs.org site and am getting an error talking about injection... Sorry to code dump, but I have no clue where the bug is.
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<title>Angular Skeleton</title>
<link rel="stylesheet" href="/style/bootstrap.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.0/angular-route-segment.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = angular;
var t = a.module('triangular', ['ngRoute']);
t.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'app/modules/test/partials/partial1.html',
controller: 'Page1Ctrl'
}).
when('/page2', {
templateUrl: 'app/modules/test/partials/partial2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/page1'
});
}]);
t.controller('Page1Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test';
}]);
t.controller('Page2Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test2';
}]);
</script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
I'm getting this error: Error: [$injector:modulerr].
The link it's providing isn't that useful. It told me to include the route segment js file, which I did, but the error persisted.
try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.min.js" type="text/javascript"></script>
to your head right below where you include angular. I had a similar issue and this fixed it right away.

AngularJS $injector: unknown provider

I have a problem I have this piece of code:
index.html:
<!doctype html>
<html lang="nl" ng-app="tradePlace">
<head>
<meta charset="utf-8">
<link href="./helpers/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./helpers/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css">
<link href="./helpers/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<script type="text/javascript" src="./includes/routes/routes.js"></script>
<script type="text/javascript" src="./includes/services/loginService.js"></script>
<script type="text/javascript" src="./includes/controllers/indexCntrl.js"></script>
</head>
<body ng-view></body>
</html>
Routes.js:
var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
app.config(['$routeProvider', '$locationProvider', function($route, $location) {
$route.
when('/', {
redirectTo: '/index'
}).
when('/index', {
templateUrl: './includes/templates/index.html',
controller: 'indexCntrl'
}).
when('/register', {
templateUrl: './includes/templates/register.php',
controller: 'indexCntrl'
}).
otherwise({
redirectTo: '/index'
});
$location.html5Mode(true);
}])
indexCtrnl.js:
var app = angular.module('tradeCntrls', []);
app.controller('indexCntrl', ['$scope' , 'loginService', function($scope, login){
$scope.login = function() {
}
}])
loginService.js
app.factory('loginService', ['', function(){
return function login(){
};
}])
So, I get this error:
Error: $injector:unpr Unknown Provider
The error page on the AngularJS docs says:
This error results from the $injector being unable to resolve a
required dependency. To fix this, make sure the dependency is defined
and spelled correctly
Well, I`m sure is spelled correctly and it should be defined. I have already tried to put a getter in the loginServices.js to get the tradePlace module and also tried to use a getter with the tradePlaceCntrls module but I still get the error.
I don`t know how to fix this.
Not sure if this is it but have you tried defining your factory like this?
app.factory('loginService', function(){
return function login(){
};
});
You don't need the array as your login service doesn't have any dependencies. That '' might be causing your issue. Try removing the array as it is not necessary in this case.
Also, you could define your login service as a service:
app.service('loginService', function(){
return function login(){
};
});

angularjs not loading partials

I'm trying to put together a basic angularjs web page through django (but not really using django for this example). I tried to copy an example exactly, but it's not working. The partial and the controller are not loading. The url is updated, so I know the app is loading. But I don't see it hitting my web server at all for the partial or the data. Help would be appreciated.
Here is the simplest code I could put together.
test.html:
<!doctype html>
<html ng-app="ciqApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
TEST
<div ng-view>
</div>
</body>
</html>
js/app.js
var ciqApp = angular.module('ciqApp', [
'ngRoute',
'ciqControllers'
]);
ciqApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/questions', {
templateURL: '/static/partials/question-list.html',
controller: 'QuestionListCtrl'
}).
otherwise({
redirectTo: '/questions'
});
}]);
js/controllers.js
var ciqControllers = angular.module('ciqControllers', []);
ciqControllers.controller('QuestionListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/get_questions').success(function(data) {
$scope.questions = data;
});
}]);
TemplateURL should be TemplateUrl. Also, you can try to remove the first slash from your templateUrl path and see if that makes a difference: So:
templateURL: '/static/partials/question-list.html',
becomes:
templateUrl: 'static/partials/question-list.html',

How to use "data-ng-view" in AngularJS [Best Practice]

Here is my index.html
<!DOCTYPE html>
<html data-ng-app="BookApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-2.1.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css"/>
<title>My Book</title>
</head>
<body>
<div class="container">
<div data-ng-view=""></div>// I suspect this line is wrong
</div>
</body>
Here is my app.js
var NoteApp = angular.module("BookApp", ["ngResource"]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'book.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function($scope, $location) {
$scope.book = "test pass";
};
Here is my book.html
<h1>Hello: {{book}}</h1>
When U run the application nothing is displayed. How can debug this? what may be wrong?
I even trued ng-view, but VS Studio says "Attribute must be followed by = sign" ... but what i have to assign by using = sign?
Here is exception
Uncaught Error: [$injector:modulerr] Failed to instantiate module BookApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
I made following changes by adding ngRoute
var TodoApp = angular.module("TodoApp", ["ngResource","ngRoute"])
Issue resolved, but what is the best practice?

Categories

Resources