I am building an angular single page app using node, bower, and express. But, for some odd reason, I cannot seem to get ngRoute to work. Nothing seems to be appearing in my .ng-view div. Here's my code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Node, NPM and Bower</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
</head>
<body ng-app="app">
<h1>My App</h1>
<div class="ng-view"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="./app/app.js"></script>
</body>
</html>
APP.JS
angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1>"
})
.when("/about", {
template : "<h1>About</h1>"
});
});
Thanks in advance for any and all help!
Related
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
I'm including angular.min, angular-route and even angular-resource and animate...
You had wrong ng-app module, it should be ng-app="friendsList" instead of app.
The error is not due to angular versions, it is because you are injecting wrong dependency in your app mdoule. Simply you can not inject mainCtrl inside your module as its controller mainCtrl which you are going to register with your module.
var app = angular.module('friendsList', []);
Also you should have ng-controller="mainCtrl" on html.
<section ng-controller="mainCtrl">
</section>
Im trying to config a basic angular app.
my main html:
<html ng-app="CostumerApp">
<head>
<title> Costumers </title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Costumer manager</h1>
</div>
<div class="row">
<div class="col-sm-12" ng-view></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="controllers/costumerCtrl.js"></script>
</body>
app js
angular.module('CostumerApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/costumers', {
controller: 'costumerCtrl',
templateUrl: 'views/list.html'
});
$locationProvider.html5Mode(true);
});
costumerCtrl.js :
angular.module('CostumerApp')
.controller('costumerCtrl', function ($scope){
$scope.costumers = [];
});
list html:
<table class='table table-hover table-hover table-bordered'>
routing is not working,
now its not finding "http://localhost:3000/costumers" and when i just do http://localhost:3000 its taking me to the project folder instead to my main html.
Im using node http-server and start like that http-server -p 3000 -a localhost .
why my localhost:3000 is not showing the main page??
thank u !
You wrote $routProvider, it is $routeProvider.
Since you have html5Mode setted as true in your app.js, you need to include this in your main.html:
<head>
<base href="/">
...
</head>
So the html5Mode will work, and you can access without # in the URL.