So, I am really new to angular JS and I'm working on a project for a company with a team from my school as an internship. I have to get the routing working first though, and it just will not work no matter what I have tried. I tried it with angular JS 1.0.7 and with that I could get it to work, but with the newest version (1.5.7) I just can't after many many hours of trying. This is the error the console currently gives me:
Error: $injector:nomod
Module Unavailable 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. The error originates from the line in index.html as far as I know, since the error disappears if i remove it, but the routing doesn't work then either.
I'd really appreciate any help with this. I know I probably missed something incredibly basic (and the code is probably pretty sloppy), but I just can't figure it out. Oh and by the way, I tried putting the content from app.js to index .html inside script tags and then it didn't give the error, but didn't display anything either, really weird. I have also tried many different ways to do routing as instructed by different tutorials or guides, but I still can't get it to work.
Code:
Index.html (modified so as to not give way the name of the company etc.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ui-bootstrap-1.3.3-csp.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-1.3.3.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-touch.min.js"></script>
<script src="app/app.js"></script>
<script src="app/ctrl.js"></script>
<script src="scripts/routing.js"></script>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div class="navbar-header">
<a href="" class="navbar-brand">
<small>
<i class="glyphicon glyphicon-log-out"></i>
Products and Company Info
</small>
</a><!-- /.brand -->
</div><!-- /.navbar-header -->
<div class="navbar-header pull-right" role="navigation">
<i class="glyphicon glyphicon-book"></i> Howto
<i class="glyphicon glyphicon-home"></i> Home
</div>
</div><!-- /.navbar-container -->
</div><!-- /.navbar -->
<div>
<div class="container">
<div ng-app="app">
<h2>App name</h2>
<br/>
<div ng-view></div>
</div>
</div><!-- /.container -->
</div>
</body>
</html>
Code app.js:
var app = angular.module('mainApp', ['ngResource', 'ngRoute']);
app.run(function($rootScope) {
});
Code ctrl.js
app.controller("mainCtrl", function($scope) {
$scope.firstName = "first name";
$scope.lastName = "last name";
});
app.controller('howtoCtrl', function($scope) {
$scope.message = 'How To guide here';
});
Code routing.js:
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainCtrl'
})
// route for the how to page
.when('/howto', {
templateUrl : 'howto.html',
controller : 'howtoCtrl'
})
// route for the test2 page
.when('/testi2', {
templateUrl : 'test2.html',
controller : 'test2Controller'
});
});
Edit: After changing ng-app="app" to ng-app="mainApp", I got the following errors
angular.min.js:103 GET http://localhost/var/www/html/byow_routing_sahlays_2/byow/home.html 404 (Not Found)(anonymous function) # angular.min.js:103n # angular.min.js:98g # angular.min.js:95(anonymous function) # angular.min.js:130$eval # angular.min.js:145$digest # angular.min.js:142$apply # angular.min.js:145(anonymous function) # angular.min.js:20invoke # angular.min.js:41c # angular.min.js:20Bc # angular.min.js:21ge # angular.min.js:19(anonymous function) # angular.min.js:315b # angular.min.js:189Sf # angular.min.js:37d # angular.min.js:36
angular.min.js:117 Error: [$compile:tpload] http://errors.angularjs.org/1.5.7/$compile/tpload?p0=home.html&p1=404&p2=Not%20Found
at Error (native)
at http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:6:412
at http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:156:281
at http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:130:409
at m.$eval (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:107)
at m.$digest (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:142:173)
at m.$apply (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:401)
at l (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:97:250)
at K (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:101:373)
at XMLHttpRequest.y.onload (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:102:397)
Final Edit:
Thanks guys, it works now. The problem was first that ng-app="app" should have been ng-app"mainApp", and I forgot to include the folder to the address of the tempaltes in routing.js after I had originally moved the files to their own folder.
You call in your html <div ng-app="app"> but your app is named mainApp.
Try to change <div ng-app="app"> to <div ng-app="mainApp">
Add below code to the very first line of ctrl.js and routing.js
var app = angular.module('mainApp');
cheers!
Related
This is my first project with Angular. I'm still in the process of figuring out how to do things with Angular, so I'd like to apologize if my questions sound stupid.
My Questions
Why are my views not showing up when i navigate to index?
How can I fix this?
Overview
So, my index file shows the views I have used in the ui.router library. form.html contains my template header and footer. Within that file, I then have another...
<div id="form-views" ui-view></div>
... that should inject all my nested views.
However, when I go to index, I'm just getting a blank page and no errors!
Source code
app.js
angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router']);
config.js
angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/signup)
.state('form.signup', {
url: '/signup',
templateUrl: 'views/form-signup.html'
})
// url will be /form/select
.state('form.select', {
url: '/select',
templateUrl: 'views/form-select.html'
})
// url will be /form/type
.state('form.type', {
url: '/type',
templateUrl: 'views/form-type.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/signup');
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/override.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controller.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="MyFirstAngularApp">
<div class="container">
<!-- views will be injected here -->
<div ui-view></div>
</div>
</body>
</html>
form.html
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h1>Mock up Maker</h1>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".signup"><span>1</span> Sign Up</a>
<a ui-sref-active="active" ui-sref=".select"><span>2</span> Select</a>
<a ui-sref-active="active" ui-sref=".type"><span>3</span> Type</a>
<a ui-sref-active="active" ui-sref=".end"><span>4</span> End</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form name="myForm" id="signup-form" class="col-sm-8 col-sm-offset-2" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre class="col-sm-12 ng-binding">
{{ formData }}
</pre>
</div>
File structure
I don't see why its not working. Any help is very much appreciated!
The snippet
angular.module("moduleName", [])
defines a new module with the required dependencies in the array. If you want to further define components of this module, you need to define them using
angular.module("moduleName")
.controller(...)
.directive(...)
.config(...)
.run(...);
The latter is a getter syntax of angular module and doesn't define the module again.
Your current code defines the module MyFirstAngularApp two times. That should be the root of your problem.
You probably want:
angular.module('MyFirstAngularApp').config( ...
in your config.js
This avoids duplicating the module, instead it gets the instance already created in app.js and adds configuration on it. The same approach should be used in your controllers and other code.
I think you have a typo in your Views template folder. In the file structure directory you are having Views Folder whereas you are using lowercase views name in routing.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
If I have a single .when() route in my app.js, the testApp module loads, and the site works. However, when I add another .when() , (about and contact, for example), my module will not load.
see:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to: Error: [$injector:nomod] Module 'testApp' 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.
I have AngularJS and Angular-Routes installed, and specify the ngRoute dependency (in app.js):
├── angular#1.5.6 extraneous (1.5.7-build.4844+sha.cd3673e available)
├─┬ angular-route#1.5.6 extraneous (1.5.7-build.4844+sha.cd3673e available)
Any ideas?
Here's the code:
app.py
from flask import Blueprint, make_response
mod = Blueprint('main', __name__)
# Pass routing onto the Angular app
#mod.route('/')
#mod.route('/about')
#mod.route('/contact')
def main(**kwargs):
return make_response(open('app/static/index.html').read())
index.html
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- load angular and angular route -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
<meta charset="utf-8">
<base href="/">
</head>
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Test App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- this is where template content will be injected -->
<ng-view></ng-view>
</div>
</body>
</html>
app.js
// Create the module
var testApp = angular.module('testApp', ['ngRoute']);
// Routes
testApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// Home page
.when('/', {
templateUrl : 'templates/home.html',
controller : 'mainController'
});
// About
.when('/about', {
templateUrl : 'templates/about.html',
controller : 'aboutController'
});
// Contact
.when('/contact', {
templateUrl : 'templates/contact.html',
controller : 'contactController'
});
$locationProvider.html5Mode(true)
});
// Controllers
// create the controller and inject Angular's $scope
testApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'It works!';
});
testApp.controller('aboutController', function($scope) {
// create a message to display in our view
$scope.message = 'About page here';
});
testApp.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Contact page here';
});
You have syntax errors; you can't have a line starting with . immediately after a line ending with ;. Remove those semicolons after each when clause.
I have spent hours and hours searching and googling to find out why my ngRoute is not working but couldn't find the solution so i decided to come here. Here is my code::
"app.js"
angular.module("sandwichApp",["cart", "ngRoute"])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.
when("/",{
templateUrl: "app/views/sandwichList.html",
controller: "SandwichListController"
}).
when("/sandwichList",{
templateUrl: "app/views/sandwichList.html"
}).
when("/checkout",{
templateUrl: "app/views/cart.html"
}).
otherwise({
redirectTo: "/app/views/sandwichList.html"
});
}]);
// for this particular code i have tried the version where the config() doesn't contain array "[]" but only the function and it also doesn't work
"sandwichListController.js"
var main = angular.module("sandwichApp", ["clientAppServiceModule"]);
main.controller("SandwichListController", function($scope, ClientAppService, cart){
$scope.original = {
sandwiches : []
}
//.... more code here. THERE IS NO PROBLEM WITH THIS CONTROLLER SO THE CODE IS NOT IMPORTANT.
);
"index.html"
<!DOCTYPE html>
<html ng-app="sandwichApp">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<!--script src="https://cdn.jsdelivr.net/angularjs/1.5.5/angular-route.min.js"></script-->
<script src="app.js"></script>
<script src="app/services/clientAppService.js"></script>
<script src="app/controllers/sandwichListController.js"></script>
<script src="app/model/cart.js"></script>
</head>
<body ng-controller="SandwichListController">
<div><strong>Heading & Cart</strong></div>
<div ng-view></div>
</body>
</html>
"sandwichList.html"
<div>
<b>Your Cart: </b>
{{totalItems}} items / {{totPrice | currency}}
<span>checkout</span>
</div>
<div>
<input type="text" ng-model="sandwichName" ng-change="filterSandwich()"/>
</div>
<div>
<h1>Sandwiches </h1>
</div>
<div ng-repeat="sandwich in workingCopy.sandwiches">
<h3 ng-click="addItemToCart(sandwich)">
<strong>{{sandwich.Name}}</strong>
<span>{{sandwich.Price | currency}}</span>
</h3>
</div>
When i load the "index.html" page, i expect the "otherwise" section of the routeer to display the "sandwichList.html" in the <div ng-view></div> section but it doesn't work. If it can't find the file, it will complain but it doesn't complain meaning that the file is at the right location. Yet it does not work.
In the sandwichList page at least if the controllers will not work, it must be able to display the <h1>Sandwiches </h1> .
My chrome console doesn't display any errors so i don't know what is causing the problem
I think it might be because you are accidentally declaring your app twice. When registering a new module in angular you provide it a second parameter which is an array of dependencies. You are doing that where you specify your routes. However, when you go to create your controller, you're code is this:
var main = angular.module("sandwichApp", ["clientAppServiceModule"]);
Angular sees the dependencies and assumes it is to create a new app. When it realizes there is already one with the same name, it overwrites it and you lose all the route stuff you setup. Try passing your "clientAppServiceModule" to the initial app definition, then just creating your controller by doing this:
angular.module("sandwichApp").controller("SandwichListController", function($scope, ClientAppService, cart){
$scope.original = {
sandwiches : []
}
//.... more code here. THERE IS NO PROBLEM WITH THIS CONTROLLER SO THE CODE IS NOT IMPORTANT.
);
Let me know if you have any questions, or if that doesn't solve it.
I was wondering what the best way to structure templates in an AngularJS SPA. So far I have kind of a rails approach, but I'm not sure if this is a good idea.
What I mean is that I for example have a /js/app/views/partials folder where I have snippets of html that are used in different places. This could be a form or a preview of content, basically everything that is used all over the app. I like this structure because let's say you have a comment form that appears in 5 different places and you want to add a field: Changing one file rather than 5 is much better.
I then for example have a /js/app/views/home.html template, that is referenced by my ui-router and loaded in ui-view in /index.html which only serves as layout.
/js/app/routes.js
myModule.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/js/app/views/home.html',
controller: 'MainCtrl',
resolve: {
// resolve code
}
});
}
]);
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<title><%= title %></title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='/css/style.css' />
<script src="/js/angularjs-1.3.16.min.js"></script>
<script src="/js/angular-ui-router-0.2.15.js"></script>
<script src="/js/app/app.js"></script>
<script src="/js/app/routes/routes.js"></script>
<script src="/js/app/services/services.js"></script>
<script src="/js/app/controllers/controllers.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
/js/app/views/home.html
<div class="page-header">
<h1>v2</h1>
</div>
<div ng-include src="'/js/app/views/partials/post-form.html'"></div>
<div ng-repeat="post in posts">
<div ng-include src="'/js/app/views/partials/post-preview.html'"></div>
</div>
So the ui-router is called with the home state and injects the /js/app/views/home.html in /index.html (at ui-view). home.html itself includes two partials /js/app/views/partials/post-form.html and /js/app/views/partials/post-preview.html.
The result are a lot of XHR requests for a single page load. That cannot be good for performance.
Is there a better way to do that? Or can I just not structure my views with so many partials and have to use fewer files and repetitive code?
My backend / server is NodeJS with Express. So maybe it would also be an option to do that server-side, using express partials.
I have checked Stack overflow and many other blogs but I was not able to resolve the routing issue that I have in my AngularJS code. I'm not getting any error but the routing doesn't seem to be happening at all.
Can anyone please help me fix this issue?
The main index.html is here
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body data-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 data-ng-view></div>
</div>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
I have uploaded the complete code to Plunker AngularJS Routing
Any help would be greatly appreciated.
Thanks,
Smitha
The plunker doesnt work because of missing angular-route.js. But What can I see you have forgotten to give angular dependency - ngRoute
var sampleApp = angular.module('sampleApp', ['ngRoute']);
This oficial tutorial shows how to use the router https://docs.angularjs.org/tutorial/step_07
I have updated your plunker with changes which works
http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview
Main problem - version mishmash - uploaded angular - 1.3.x, uploaded angular-rout - 1.2-x linked angular to html - 1.0-7
I have changed them to cdn 1.3.3
Next thing - wrong links to templates - even if it could work on localhost - in plunker there cant be / on begining of templates name.
I have changed also links it should start # in ng-href.
Thats basically all.
You will need to remove / from templateUrl
sampleApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/AddNewOrder', {
templateUrl : 'add_order.html',
controller : 'AddOrderController'
}).when('/ShowOrders', {
templateUrl : 'show_orders.html',
controller : 'ShowOrdersController'
}).otherwise({
redirectTo : '/AddNewOrder'
});
} ]);