is difference between local install or reference url of angular js - javascript

I am trying to develop an application using angular js .it a simple routing .when i add the angular by url like this :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="~/js/app.js"></script>
My application works fine ,but when i add like this :
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/js/app.js"></script>
I got this error :
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module sampleApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvide
Here is my app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for app
//Uri /AddNewOrder -> template add_order.html and Controller AddOrderController
//Uri /ShowOrders -> template show_orders.html and Controller AddOrderController
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
Here is my html code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="~/js/app.js"></script>
</body>
</html>

You will need to add the reference to the module (angular route module) that your module is dependent on. The error says that $routeProvide is unknown to it and that is available in the angular route module.
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', ['ngRoute']);

Related

Register controllers and services angular js?

I'm starting to configure my application with Angularjs, I am following a route guide but I can not make the project run
i dont know how to register my controllers and services for load
dynamically when i change pages... :/ y created mi appConfig file for configure my routes.
My directory.
my app config:
angular.module('library.crud', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/home.html'
})
.when('/book', {
templateUrl: 'app/views/book.html',
controller: 'bookController',
controllerAs: 'vm'
})
.when('/books', {
templateUrl: '../app/views/books.html',
controller: 'booksController',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
});
example controller:
(function () {
'use stritct';
angular
.module('library.crud')
.controller('booksController', booksController);
booksController.inject = ['$rootScope', '$scope', 'bookService'];
function booksController($rootScope, $scope, bookService) {
var vm = this;
}
})();
example service:
(function () {
'use strict';
angular
.module('library.crud', [])
.factory('bookService', bookService);
bookService.$inject = ['$http', '$q'];
function bookService($http, $q) {
var service = {
};
return service;
}
})();
indexHTML:
<html>
<head>
<!--script imports, angular, jquery, bootstrap etc... -->
<script src="app/appConfig.js"></script>
</head>
<body ng-app="library.crud">
<li class="active">Home</li>
<li>Home</li>
<li>Books</li>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
at what time do my HTML pages know which controller to invoke and where is it located? how register my services ?
When i enter a books options from menu, the console show the next error:
The controller with the name 'booksController' is not registered.
UPDATED INDEX.HTML:
<html>
<head>
<link rel ="stylesheet" href="resources/bootstrap/css/bootstrap.min.css"/>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angular/angular.min.js"></script>
<script src="resources/angular/angular-route/angular-route.min.js"></script>
<script src="app/appConfig.js"></script>
<script src="app/services/book.service.js"></script>
<script src="app/views/controllers/books.controller.js"></script>
<script src="app/views/controllers/book.controller.js"></script>
</head>
<body ng-app="library.crud">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
There are two things in your code,
(i) You dont have to add dependencies in your code.
angular.module('library.crud').factory('bookService', bookService);
(ii) Add reference for your controller and service in your index.html.
<script src="app/appConfig.js"></script>
<script src="app/service.js"></script>
<script src="app/controller.js"></script>
The main reason this error occurs when everything else looks ok is because you did not include your js files in your index.html. Based on your screenshot, it looks like you have your controllers and services in separate files. Make sure you put them after your appConfig.js file in index.html.
Another issue I see is in your service file.
angular
.module('library.crud', [])
.factory('bookService', bookService);
should be
angular
.module('library.crud')
.factory('bookService', bookService);
If you include square brackets as a second parameter in the .module line, angular will think you are creating a new app instead of trying to register your service/controller to your existing app.
Also, it is highly recommend to use ui-router instead of NgRoute in any Angular1.x applications: https://github.com/angular-ui/ui-router

AngularJS, controller is not a function, got undefined

Making a very simple application in angular, and everytime I try to do this I run into this problem and never know how to solve it.
App.js is this:
angular.module('Euclid',
['ui.bootstrap',
'ngRoute'])
.controller('mainController', function($scope){
})
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
});
}]);
Just some basic routing, nothing in the controller.
Now, that 'HomeController' is set up like this:
var HomeController = function($scope){
var self = this;
// code here
};
angular.module('Euclid').controller('HomeController', HomeController);
And my index.html is set up like so:
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The error in all it's glory is "Argument 'HomeController' is not a function, got undefined". I can not for the life of me figure out where it is getting undefined.
I created a plunker to make things more clear . https://plnkr.co/edit/dL1DPa50mdZtmaJCwcIO?p=preview
As far as I can Understand ,there is no error other than missing some script files.
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="../angular-route.js"></script> //missing
<script src="/ui-bootstrap-tpls-2.1.2.js"></script> //missing
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
As Phil said ,it is clear that the reason for the
error is the missing of angular-router and angular-bootstrap.

Routeprovider in Angular

I'm really new to Angular and I was trying to add a routeProvider to my app but it keep giving me this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app
due to: Error: [$injector:nomod] Module 'app' is not available! You
either misspelled the module name or forgot to load it. If registering
a module ensure that you specify the dependencies as the second
argument.
This is what my index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
My app.js looks like this:
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('segmentListCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('data/segments.json').success(function (data){
$scope.segmentList = data;
});
}]);
This is the content of the splash.html that i'm using as template for my routing:
<div id="splash" class="row" ng-controller="segmentListCtrl">
<div class="columns segment" ng-repeat="segment in segmentList">
<a href="#">
<h2>{{segment.title}}</h2>
<h5>{{segment.sub}}</h5>
</a>
</div>
</div>
Before I tried to add the ng-route everything wos working fine. But since I've tried to split it up I keep getting the error and I don't know how to fix it.
Thanks for the help guys!
In your myApp.config you forgot the closing brace ] at the end.
Also since you're new to angular in your .when('/' ....) when you specify the controller it's equivalent to putting an ng-controller at the top of your template so there's no need to do it again in the template itself.
So this:
<div id="splash" class="row" ng-controller="segmentListCtrl">
would be fine as
<div id="splash" class="row">
It apears to me that you have a syntax error in your app config declaration:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Should be:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
AS you can see, the final ']' is missing.
Tell me if this solved for you. Thanks

AngularJS : Uncaught Error: [$injector:modulerr] when using updated version of angularJS

I used older version of angularJS (1.1.4) for my test project (I want to learn angularJS). When I change angularJS script version to latest I got this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=contactsManager&p1=…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A38%3A435)
I don't know what is causing this error... Does someone knows where's the problem?
UPDATE:
After removing .min from angularJS.js I got cleaner error message so here is it:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=%24routeProvide
Here is code:
JS:
//application.js
var app = angular.module('contactsManager', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/contacts',
{
controller: 'ContactsController',
templateUrl: './application/templates/contacts.html'
})
.when('/add-contact',
{
controller: 'ContactAddController',
templateUrl: './application/templates/addContact.html'
})
.when('/edit-contact/:contactId',
{
controller: 'ContactEditController',
templateUrl: './application/templates/editContact.html'
})
.when('/display-contact/:contactId',
{
controller: 'ContactDetailsController',
templateUrl: './application/templates/displayContact.html'
})
.otherwise({ redirectTo: '/contacts' });
});
HTML:
<!DOCTYPE html>
<html data-ng-app="contactsManager">
<head>
<title>Contacts</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-top">
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-resource.min.js"></script>
<script src="application/application.js"></script>
<script src="application/controllers/controllers.js"></script>
<script src="application/services/contactsService.js"></script>
</body>
</html>
Newer versions of Angular have ngRoute as a separate module that you have to include in your project.
<script src="//code.angularjs.org/X.Y.Z/angular-route.js"></script>
https://docs.angularjs.org/api/ngRoute
And update your app initialization with an injection of ngRoute
var app = angular.module('contactsManager', ["ngRoute"]);

Angularjs ng-view not showing data

I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo

Categories