I need to run this router without nodejs server. Is it possible. All other files for routing having in the same directory.But it is not routing with the certain url to desired pages. Also the first page 'online_exam_1.html' content is not displaying while I am open this page with browser.
<html data-ng-app="demoApp" >
<head>
<title>
Online Exam Syatem
</title>
</head>
<body ><div class="container" ng-controller="RoutingController">
<div>
<h3>Adding Module Configuration and Routing</h3>
<!-- ng-view handles loading partials into it based
upon routes -->
<div data-ng-view></div>
</div>
</div>
<script src="angular.min.js">
<script src="angular_route.js"> </script>
</script>
<script>
demoApp.config(function ($routeProvider) {
alert('in');
$routeProvider
.when('/',
{
controller: 'RoutingController',
templateUrl: urlBase + 'online_exam_1.html'
})
//Define a route that has a route parameter in it (:customerID)
.when('/2',
{
controller: 'RoutingController',
templateUrl: urlBase + 'online_exam_2.html'
})
.otherwise({ redirectTo: '/partial1' });
});
demoApp.controller('RoutingController', function ($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
});
</script>
</body>
</html>
Related
I'm trying to learn/refresh my AngularJS knowledge, by following this tutorial.
I'm now trying to complete the section on views and routing. However when I load the main.html page, no view is displayed. All I see is:
Before view! After view!
The chrome dev console is also completely empty (no errors/warnings etc).
So what am I missing?
I'm running it through an 'express' node.js server locally on my Win7 64bit pc. I'm accessing the page in the browser using http://localhost:9000/main.html
I downloaded the 1.5.8 versions of angular.js and angular-route.min.js and placed them in the same directory as main.html.
Trying: http://localhost:9000/view1.html displays the content of the view successfully.
This is the main.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<body>
Before view!
<div ng-view></div>
After view!
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp=angular.module('demoApp',['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateURL: '/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateURL: '/view2.html'
})
.otherwise({ redirectTo: '/view1' });
});
var controllers= {};
controllers.SimpleController= function($scope) {
$scope.customers=[
{name:'John Smith', city: 'New York'},
{name: 'Bob Jones', city: 'London'},
{name:'David Peters', city: 'Sydney'}
];
$scope.addCustomer=function() {
$scope.customers.push( { name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
};
demoApp.controller(controllers);
</script>
</body>
</html>
Here's view1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" />
<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
<br />
Customer Name: <br/>
<input type="text" ng-model="newCustomer.name" />
<br />
Customer City: <br/>
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
view2.html is just a simpler version of view1.html
Replace the following code:
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateURL: '/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateURL: '/view2.html'
})
.otherwise({ redirectTo: '/view1' });
});
with the following code:
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'view2.html'
})
.otherwise({ redirectTo: 'view1' });
});
Replaced "templateURL" in your code with "templateUrl" because it is case sensitive.
Code
<body ng-app="ngapp">
<h2>NG App</h2>
<div>
<ng-view></ng-view>
</div>
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module('ngapp', ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Page1.html',
controller: 'simpCtrl'
})
.when('/view2', {
templateUrl: 'Page2.html',
controller: 'simpCtrl'
});
});
app.controller('simpCtrl', function ($scope) {
$scope.customers = [
{ name: 'Jack', age: 10 },
{ name: 'Abdul', age: 12 },
{ name: 'Zubair', age: 11 },
{ name: 'Ammar', age: 10 }
];
});
</script>
I have registered the routes properly but its is not working, I don't know why. Any Idea how to debug or find misbehaving code in angular?
Page1.html
<div>
<h2>View 1</h2>
Customer Name:
<input type="text" ng-model="search.name" />
<ul>
<li ng-repeat="n in customers | orderBy:'name' | filter:search:strict ">{{n.name|uppercase}} - {{n.age}}
</li>
</ul>
View 2
Thanks
Plunker link to code
There are few issues with your application,
(i) You are refering to angular2 library, change it like this
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
(ii) you have not added reference for ngRoute
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular-route.js"></script>
Working Application
i am just new to angular js and when I tried to study routing one error occurs..
please check this..
here is my index.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Angular</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div data-ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.controller('firstController', function($scope) {
$scope.customers = [{
name: 'nik',
city: 'san fransisco'
}, {
name: 'henry',
city: 'new york'
}, {
name: 'avida',
city: 'california'
}, {
name: 'lynda',
city: 'texas'
}];
$scope.addCust = function($scope) {
$scope.customers.push({
name: $scope.newCust.name,
city: $scope.newCust.city
})
}
});
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1', {
controller: 'firstController',
templateUrl: '1.html'
})
.when('/view2', {
controller: 'firstController',
templateUrl: '2.html'
})
.otherwise({
redirectTo: '/view1'
});
});
</script>
</body>
</html>
routing is not working, as it supposed to load "/view2" as default when i take index.html
I hope no need to include code from 1.html and 2.html here, for reference as that just contains the 'li' tag which shows the data from this.
Error is,
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=demoApp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A222)
Thank.
you must include ng-route script angular-route
I am newer to Angular so this could be a really simple/stupid issue but after googleing and trying many things I couldnt get it to work.
I believe this may not be directly related to the image viewer but a general issue when trying to add additional functionality injected into the code (like this: angular.module('app', ['angular-flexslider']);) I tried with a couple other things and had same issue so it may be a general issue on how I have my code setup when adding this that is breaking everything including the routing (but routing is the only real functionality I have currently.
If I have stand alone pages for the image viewer it works fine but incorporating it with other code causes the issue.
var app = angular.module('app', ['angular-flexslider']);
if I change the "app" to "app1" it does not cause all routing to break, so it is not the script tags being added that is causing the issue itself, but something with this and how I have the code setup (something is getting cross wired I think).
The code for my pages that are important are:
index:
<!DOCTYPE html>
<html ng-app="app">
<head>
<base href="/" />
</head>
<body>
<link rel="stylesheet" href="styles/styles.css">
<div class="header">
<div class="container">
<img src="/images/DPLogo.jpg" />
<h1>Downriver Panters</h1>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>History</li>
<li>Coaches</li>
<li>Activities</li>
<li>Calender</li>
<li>Gallery</li>
<li>Fundraisers</li>
<li>Links</li>
<li>Contact Us</li>
<li>Test Styles</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<div ng-view>ViewPage</div>
</div>
</div>
<div class="footer">
<div class="container">
© Copyright 2016
</div>
</div>
<!-- this is code for the image viewer that is causing it to break (but also add the app.js file below)-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="//cdn.jsdelivr.net/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="/testing/angular-flexslider.js"></script>
<script src="/scripts/angular.min.js"></script>
<script src="/scripts/angular-route.min.js"></script>
<!-- end of code causing it to break -->
<!-- my main control with the routing -->
<script src="/controllers/mainCtrl.js"></script>
<!-- have to put here?? so below mainCtrl??? cause not working if put on home page -->
<script src="/controllers/homeCtrl.js"></script>
<script src="/controllers/calenderCtrl.js"></script>
<script src="/controllers/coachesCtrl.js"></script>
<script src="/controllers/galleryCtrl.js"></script>
<!-- other file for routing that is causing it to break-->
<script src="/testing/app.js"></script>
</body>
</html>
mainCtrl.js (with my routing code)
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
// configure our routes
app.config(['$routeProvider','$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
// catch all go home
.when('/', {
templateUrl: '/partials/home.html',
controller: 'homeController'
})
// route for the home page
.when('/home', {
templateUrl: '/partials/home.html',
controller: 'homeController'
})
// route for the about page
.when('/about', {
templateUrl: '/partials/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/history', {
templateUrl: '/partials/hisotry.html',
controller: 'hisotryController'
})
// route for the contact page
.when('/coaches', {
templateUrl: '/partials/coaches.html',
controller: 'coachesController'
})
// route for the contact page
.when('/activities', {
templateUrl: '/partials/activities.html',
controller: 'activitiesController'
})
// route for the contact page
.when('/calender', {
templateUrl: '/partials/calender.html',
controller: 'calenderController'
})
// route for the contact page
.when('/gallery', {
templateUrl: '/partials/gallery.html',
controller: 'galleryController'
})
// catch all go home
.when('/fundraisers', {
templateUrl: '/partials/fundraisers.html',
controller: 'fundraisersController'
})
// catch all go home
.when('/links', {
templateUrl: '/partials/links.html',
controller: 'linksController'
})
// route for the contact page
.when('/contactus', {
templateUrl: '/partials/contactus.html',
controller: 'contactusController'
})
// catch all go home
.when('/styletesting', {
templateUrl: '/partials/styleTesting.html',
controller: 'styletestController'
})
// happens when nothing specificed
.otherwise({
redirectTo: '/'
})
// not working/finding sites
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
}]);
})();
the code fot the app.js (the control for the page for the image viewer:
var app = angular.module('app', ['angular-flexslider']);
app.controller('MainCtrl', function ($scope) {
var ctrl = this;
$scope.prod = { imagePaths: [] };
$scope.prod.imagePaths = [
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' }
];
});
Finally the partial for the image viewer/gallery page
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>
You have to inject all of your modules in a single call, so you would use:
var app = angular.module('app', ['ngRoute','angular-flexslider']);
The way you are currently doing it your module is destroy when add the second module to it.
I am having an issue using templateURL.
I have the following code
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Angular Demo</title>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
</ul>
</div>
<div ng-view>
</div>
<script src="scripts/libraries/angular.min.js"></script>
<script src="scripts/libraries/angular-route.min.js"></script>
<script type="text/javascript">
var testApp = angular.module("testApp", ['ngRoute']);
testApp.config(function($routeProvider)
{
$routeProvider
.when('/',
{
controller: 'TestController',
template: '<h1>HOME</h1>'
})
.when('/about',
{
controller: 'TestController',
templateURL: 'partials/about.html'
})
.otherwise ({redirectTo: '/'});
});
var controllers = {};
controllers.TestController = function($scope)
{
$scope.list =
[
{fname: "John", sname: "Doe"},
{fname: "John", sname: "Doe"}
];
};
testApp.controller(controllers);
</script>
</body>
</html>
about.html is in partials folder
template: "HOME" works fine, but templateURL doesn't bind the content of about.html to ng-view.
Let me know if you think I'm missing anything.
Thanks
Use
templateUrl: 'partials/about.html'
Not
templateURL: 'partials/about.html'
http://plnkr.co/LzYn0IxRtkV1xoKpcg5z