I have been trying to implement routing in my project but find it difficult to do so. Here is my index.html code
<!DOCTYPE html>
<!-- Angular Material CSS now available via Google CDN; version 0.11.2 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>-->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script type="text/javascript" src="./app/app.js"></script>
<section ng-controller="MainCtrl">
<div ng-view></div>
</section>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
and here is my app.js file:
(function(){
"use strict";
var app = angular.module('math_teacher', ['ngMaterial']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/welcome',{
templateUrl: 'welcome.html',
controller: 'MainCtrl',
}).
otherwise({redirectTo: '/welcome'});
}]);
app.controller('MainCtrl', ['$scope', function(){
}]);
app.controller('TutorialsController', ['$scope', function(){
}]);
})();
and here is my welcome.html to test whether my route was working
<h1>Welcome to this page</h1>
<p>This really shows that the route is at work</p>
on running this on my server here is what am seeing in my console:
Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-route.js:24(anonymous function) # angular-route.js:6
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=math_teacher&p1=Er…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A38%3A135)(anonymous function) # angular.js:38(anonymous function) # angular.js:4138r # angular.js:323g # angular.js:4099ab # angular.js:4025d # angular.js:1452uc # angular.js:1473Jd # angular.js:1367(anonymous function) # angular.js:26304a # angular.js:2762c # angular.js:3032
Pls help
I found the solution!
after adding
'ngRoute'
to the dependencies it still doesn't work
All I did was to add my script after angularjs script and not before it
You have to include 'ngRoute' module in your app.
var app = angular.module('math_teacher', ['ngMaterial', 'ngRoute']);
Related
Controller is not recognizing - AngularJS error
I've a controller defined in controllerPloyee.js called controllerPloyee which was working before i added the ngRoute and made to route. The error that shows is
angular.min.js:127 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=controllerPloyee
I've checked the documentation and another questions with the same error, but doesn't help.
Index.html
<html ng-app="ployee">
<head>
<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
<script src="services/routeConfig.js"></script>
</head>
<body>
<div ng-view></div>
<div ng-include="'view/footer.html'"></div>
</body>
</html>
routeConfig.js
angular.module('ployee', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/login', {
templateUrl: "view/login.html",
controller: "controllerPloyee"
}).when('/',{
templateUrl: "view/login.html",
controller: "controllerPloyee"
}).otherwise({redirectTo: "/login"})
})
controllerPloyee.js
angular.module('ployee').controller('controllerPloyee', function($scope){
});
The script that creates the module needs to be placed before the others:
<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!-- IMPORTANT needs to be place here -->
<script src="services/routeConfig.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
̶<̶s̶c̶r̶i̶p̶t̶ ̶s̶r̶c̶=̶"̶s̶e̶r̶v̶i̶c̶e̶s̶/̶r̶o̶u̶t̶e̶C̶o̶n̶f̶i̶g̶.̶j̶s̶"̶>̶<̶/̶s̶c̶r̶i̶p̶t̶>̶
The statement angular.module('ployee', ['ngRoute']) creates a new module. The statement angular.module('ployee') retrieves the module for further configuration.
When the module is created after the controller script, the controller is lost. This is why the script that creates the module needs to be placed before other scripts which add controllers, services, filters, directives, constants, etc.
A module is a container for your app.
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module.
From the Docs:1
Creation versus Retrieval
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
For more information, see
AngularJS angular.module Function API Reference
AngularJS angular.Module Type API Reference
AngularJS Developer Guide - modules
Hello I have few questions with using components in state. So i have tried doing ui-routing using templates and it works fine. but instead when i try to route it to a component, i get this error.
in my app.js
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
component: 'home'
});
}]);
and in my index.html
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="Content/lib/angularjs/Chart.js"></script>
<script src="Content/lib/angularjs/angular-chart.js"></script>
<script src="Content/app/components/home.js"></script>
<script src="Content/app/app.js"></script>
<link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="Content/app/components/redditAnalyzer.css">
</head>
<body>
<a ui-sref="home">click me</a>
<div ui-view></div>
</body>
</html>
and in my home.html
<body>
"some stuffs"
</body>
and in my home.js
angular.module('app', ['chart.js'])
.component('home', {
templateUrl: 'Content/app/components/home.html',
bindings: {},
controller: ['$http',
function ($http) {
var vm = this;
"some more stuffs"
}]
});
but when i click on click me in my index.html, i get this error
Error: [$injector:unpr] http://errors.angularjs.org/1.6.6/$injector/unpr?p0=homeDirectiveProvider%20%3C-%20homeDirective
at angular.js:88
at angular.js:4826
at Object.d [as get] (angular.js:4981)
at angular.js:4831
at Object.d [as get] (angular.js:4981)
at getComponentBindings (angular-ui-router.js:sourcemap:8144)
at TemplateFactory.makeComponentTemplate (angular-ui-router.js:sourcemap:8135)
at Ng1ViewConfig.getTemplate (angular-ui-router.js:sourcemap:7938)
at Object.<anonymous> (angular-ui-router.js:sourcemap:9719)
at angular.js:1385 "<div ui-view="" class="ng-scope">"
what am i doing wrong?
thank you!
You are registering the module named "app" twice. A second module with same name will overwrite the first
Only use the dependency injection array on one of them when they have the same name. When there is no dependency array argument it acts as a getter not setter
Change:
// register new module with dependencies
angular.module('app', ['ui.router']).config...
// register new module with dependencies ... but will overwrite the first due to same name
angular.module('app', ['chart.js']).component...
To:
// register new module with dependencies
angular.module('app', ['ui.router','chart.js']).config...
// references an existing module to add component to
angular.module('app').component...
Also switch order of <script> so the module exists before you try to add component to it
<!-- Module created in this file -->
<script src="Content/app/app.js"></script>
<!-- subsequent files can then access existing module -->
<script src="Content/app/components/home.js"></script>
This is my Html. I have given paths like this
<html>
<head>
<script src="../../Content/Scripts/Script/angular.min.js"></script>
<script src="../../Content/Scripts/Script/Chart.js"></script>
<script src="../../Content/Scripts/Script/angular-charts.min.js"></script>
<script src="../../Content/Scripts/Script/ui-bootstrap-tpls.js"> </script>
<script src="../../Content/Scripts/Controllers/graphController.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="financeAnalyticsController" class="support-section">
{{a}}
</div>
</body>
</html>
In my script I wrote
var app = angular.module("app", [ "chart.js","ui.bootstrap", "ui.bootstrap.typeahead",]);
app.controller('financeAnalyticsController', function ($scope, $http, $filter) {
$scope.a="testing";
});
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
I guess you are using a different version of angular-chart.js. Try using angularCharts instead of chart.js as the dependency module name, like so ...
var app = angular.module("app", ["angularCharts", "ui.bootstrap", "ui.bootstrap.typeahead"]);
app.controller('financeAnalyticsController', function($scope, $http, $filter) {
$scope.a="testing";
});
or, use this version of angular-chart.js
see a working example
We're trying to get Angular set up for a fairly simple project using Gulp, but we're somehow failing at the first hurdle. Here's what we have set up, more or less:
index.html:
<!doctype html>
<html ng-app="testModule">
<head>
<meta charset="utf-8">
<title>Test Module</title>
<meta name="description" content="">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<div ng-view></div>
<!-- inject:js -->
<script src="/angular-route.js"></script>
<script src="/angular.js"></script>
<!-- endinject -->
<!-- inject:bundle:js -->
<script src="/bundle.js"></script>
<!-- endinject -->
</body>
</html>
bundle.js:
// A bunch of stuff inserted by Gulp.
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var angular;
(function () {
angular.module('testModule', ['ngRoute']);
angular.module('testModule').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
})();
},{}]},{},[1])
//# sourceMappingURL=bundle.js.map
This seems simple enough to be foolproof, yet here are the errors we're getting:
angular-route.js:24: Uncaught TypeError: Cannot read property 'module' of undefined
bundle.js:8: Uncaught TypeError: Cannot read property 'module' of undefined
angular.js:4458: Uncaught Error: [$injector:modulerr] Failed to instantiate module testModule due to:
Error: [$injector:nomod] Module 'testModule' 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.
It almost seems like the browser doesn't know angular exists when processing angular-route and bundle, and only figures it out later. How can we get the browser to detect the presence of angular earlier so everything works?
You don't need to initialize the variable angular manually.
Here's a plunker, and you'll note we're brought right to the view for /foo: http://plnkr.co/edit/dxo3ZUJIWLeFw9HXF80w?p=info
angular.module('testModule', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
I have the following view rendered from my express server index.html
<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.module"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller"></script>
<script type="text/javascript" src="/dummy/dummy.client.route"></script>
<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>
I manually bootstrap it with application.js file:
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy'])
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
Then in dummy.client.module.js:
angular.module('dummy', [])
in dummy.client.controller.js:
angular.module('dummy').controller('DummyController', ['$scope', function($scope) {
$scope.text = 'hi what '
}])
dummy.client.route.js:
angular.module('dummy').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'dummy/dummy.client.view.html'
})
}])
dummy.client.view.html:
<section ng-controller="DummyController">
<textarea ng-bind="text"></textarea>
</section>
I get an empty page. the controller is not invoked (i use alert('hi') to test)
If i don't use ngRoute, i.e. append all the js files in the index.html page, it's working instead of using ngRoute and ng-view, it works
error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module dummy due to:
Error: [$injector:nomod] Module 'dummy' 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.
http://errors.angularjs.org/1.3.0-build.3042+sha.76e57a7/$injector/nomod?p0=dummy
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:120:12
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:215:17
at ensure (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:139:38)
at module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:213:14)
at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:686:31)
at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1019:38)
at http://localhost:3000/lib/angular/angular.js:3877:22
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at http://localhost:3000/lib/angular/angular.js:3878:40
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=dummy&p1=Error%3A%…t%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A3878%3A40
at http://localhost:3000/lib/angular/angular.js:78:12
at http://localhost:3000/lib/angular/angular.js:3905:15
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at http://localhost:3000/lib/angular/angular.js:3878:40
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at createInjector (http://localhost:3000/lib/angular/angular.js:3811:11)
at doBootstrap (http://localhost:3000/lib/angular/angular.js:1444:20)
at Object.angular.resumeBootstrap (http://localhost:3000/lib/angular/angular.js:1467:5)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=app&p1=Error%3A%20…p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A1467%3A5)angular.js:78 (anonymous function)angular.js:3905 (anonymous function)angular.js:325 forEachangular.js:3871 loadModulesangular.js:3811 createInjectorangular.js:1444 doBootstrapangular.js:1467 angular.resumeBootstraphint.js:535 maybeBootstrap
[Edit]:
I have tried another module and still not working:
article.client.module.js:
angular.module('article', [])
article.client.route.js:
angular.module('article').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl:'article/list-article.client.view.html'})
}
]);
article.client.controller:
angular.module('article').controller('ArticleController', ['$scope', function($scope) {
$scope.text = 'hi'
}
])
list-article.client.view.html:
<section ng-controller="ArticleController">
<textarea ng-bind="text"></textarea>
</section>
application.js:
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy']);
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article']);
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article', 'user', 'index']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<!--<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>-->
<!-- Load the articles module -->
<script type="text/javascript" src="/article/article.client.module.js"></script>
<script type="text/javascript" src="/article/article.client.controller.js"></script>
<script type="text/javascript" src="/article/article.client.route.js"></script>
<!--<script type="text/javascript" src="/article/article.client.resource.js"></script>-->
<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>
I commented out the dummy module. same error as before
[Edit 2]:
if i change the folder name to article2 or anything other than 'article', then it works.
I think you are missing .js in the script include. Because of which dummy module is failed to initialize and consequently you get the mentioned error.
<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>
extended answer to extended question...
Now, there are two more problems here
article module is getting initialized as you are using ngRouteProvider in article module without adding ngRoute dependency.
//You need to add ngRoute dependency in order to use $ngRouteProvider
angular.module('article', ['ngRoute']);
for this you also need to include angular-route.js
refer : https://docs.angularjs.org/api/ngRoute
You are using ngResource in application.js but I do not see you are including angular-resource.js
refer: https://docs.angularjs.org/api/ngResource