Hi I'm learning angular js. I'm using angular 1.5.6 version. Here is my code
<!DOCTYPE HTML>
<html ng-app="NoteWrangler">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src='/NoteWrangler/javascript/vendor/angular.min.js'></script>
<script type="text/javascript" src='/NoteWrangler/javascript/vendor/angular-route.js'></script>
<script type="text/javascript" src='/NoteWrangler/javascript/route.js'></script>
Genere
Instruments
<div ng-view></div>
</body>
</html>
My javascript file
angular.module('NoteWrangler',['ngRoute']).config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider.when('/genere',{
templateUrl: '/template/genere/index.html'
})
.when('/instruments',{
templateUrl: '/template/instruments/index.html'
}).otherwise({
redirectTo: '/template/genere/index.html'
});
}]);
I'm doing same as they teach in a tutorial, but I'm not able to re route to templateUrl. What i'm doing wrong here? I didn't find any errors in console. I search in every tutorial they do the same. I don't know what i'm doing wrong here. Can some one help me to solve this please?
remove first slash in your templateUrl eg: /template/genere/index.html to template/genere/index.html
Related
I'm fairly new to AngularJS, and I'm attempting to set up routing on my basic app.
My app.js:
var app = angular.module("StarWarsApp", ['ngRoute', 'ne.swapi']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
My index.html:
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="StarWarsApp" \>
<div class="container">
<div ng-view></div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/charactersList.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
</body>
</html>
When I load home.html directly, I see the contents of it properly, but it won't appear in my ng-view and I can't figure out why. I'm sure I missed something very basic, but I've no idea. Any ideas?
What you posted works correctly without your controller, service, and ne.swapi, so the error is likely there. However the code for your controller & service was not posted here.
One idea I have from referencing the ne.swapi documentation-check that you are loading 'swapi' after $scope in the controller if you are using ne.swapi. Again, since your controller was not posted I am not sure if this is causing the issue.
app.controller("Test", function($scope, swapi){
$scope.test = "Hey";
});
I have a working plunker here, I hope referencing it will help you find the error. https://plnkr.co/edit/9hD490m7nZxSTQPDTN0J?p=preview
Issues Found:
There is an unexpected character in the body tag. Remove that first.
Also, you have added the 'ne.swapi' dependency in app.js. So, its script should be added before inserting app.js.
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also, it would be good to add scripts in the bottom of the body tag. Otherwise. it might affect the page rendering speed. This is a suggestion. This won't cause the issue you have now.
I am learning and experimenting with multiple views and routing. For this reason, I have written three files test.html, controllers.js, and app.js. When I run the application, ideally the view1 should display the message and view2 should display date time. But it is just displaying two tabs as view 1 and view 2 and the message and dates are not being displayed. I am trying to figure out what I am doing wrong.
My test.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Routing</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
my app.js
'use strict';
angular.module('myApp',['myApp.controllers','ngRoute']);
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/view1',{
controller: 'Controller1',
templateUrl: 'partials/view1.html'
}).when('/view2',{
controller: 'Controller2',
templateUrl: 'partials/view2.html'
});
});
my controllers.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Controller1',function($scope){
$scope.message="Hello, world";
}).controller('Controller2',function($scope){
$scope.now=new Date();
});
Kindly let me know where I am doing wrong.
Load your controller.js ahead of app.js since the module myApp is dependent on the myApp.controllers
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
DEMO
I am just starting study Angular and trying example from book, but my simple routing doesn't work.
I have updated code as was recommended in the answers
Here is index.html:
<html ng-app="airline">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div ng-view></div>
</div>
</body>
</html>
Here is app.js:
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
When I refresh the page I don't have 'test' in the browser and don't have alert message. Why ? What I am missing ?
Update
Here is a full code example: https://github.com/demas/ang_test
Latest angular library use external router so you need to inject ngRoute and pass it as:
angular.module('airline', ['ngRoute'])
You are missing ngRoute directive. Download ng-route.js file and reference it in your HTML like;
<script type="text/javascript" src="js/lib/angular-route.js"></script>
And change your app.js like
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
Ive just started to learn AngularJS and im trying to use angular-route but can't get it to work.
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="fantasySportsApp">
<head>
<title></title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Content/Style/bootstrap.min.css"/>
<!--Placeholder for views-->
<div data-ng-view="">
Hejsan
ge
</div>
<script src="Content/Scripts/jQuery-1.11.0.js"></script>
<script src="Content/Scripts/jquery-ui.js"></script>
<script src="Content/Scripts/angular.min.js"></script>
<script src="Content/Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
<script src="Content/Scripts/bootstrap.min.js"></script>
</body>
</html>
my app.js looks like this:
var fantasySportsApp = angular.module('fantasySportsApp', ['ngRoute']);
fantasySportsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
controller: 'userController',
templateUrl: 'App/partials/login.html'
})
.when('/startPage', {
controller: 'startPageController',
templateUrl: '/App/partials/startPage.html'
})
.otherwise({ redirectTo: "/index" });
});
when i start my page ill get to this url: localhost:26283/index.html#/index but it wont show me anything. the page is empty. If i inspect the html i find this in the code: "<-- ngView: -->" think indicates that the partial view that i try to route to is supposed to start but there is nothing under the tag.
What could be the problem?
Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.
So my $routeProvider is not routing me to anything really when i run it it wont load any partials.
The current code i'm using.
angular.module("list" , ['ngRoute' ])
config(function ($routeProvider) {
$routeprovide.
when("/", {templateUrl:"/partials/list.html"})
})
My index.html
<!doctype html>
<html ng-app="list">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Angular Routing!</title>
</head>
<body>
<div ng-controller="AppCtrl" class="container">
<a href="#lijst">
<h2>The List!</h2>
</a>
<div ng-view> </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Edit: I run it by using a USBWebserver app
Console Errors:
> Failed to load resource: the server responded with a status of 404 (Not Found)
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
Uncaught ReferenceError: config is not defined main.js:2
Uncaught Error: Bootstrap requires jQuery bootstrap.js:7
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
First of all, your angular-route.js must be included after angular itself
Second, you are using some routeprovide, and $routeProvider is injected
You should do this:
angular.module("list" , ['ngRoute' ]).
config(function ($routeProvider) {
$routeProvider.
when("/", {templateUrl:"/partials/list.html"})
});
You also forgot point before config method.
And this:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
And, it seems, your Bootstrap.js requires jQuery to be included before it.