I configured a small angular app in tomcat its working fine, but when i tried to use route-Provider its not working.
I cannot route to my views.
I did not know why ?
Can any one give some small example for that.
My Code files
//this is controllers.js
var myapp = angular.module('sampleapp', []);
myapp.config('$routeProvider',function myRoute($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/admin.html',
controller: 'adminController'
})
when('/showdata', {
templateUrl: 'partials/data-view.html',
controller: 'dataController'
}).
otherwise({
redirectTo: '/'
});
});
adminController = function ($scope) {
$scope.message = "Welcome to Login Page";
}
dataController = function ($scope) {
$scope.message = "Welcome to Show Data Page";
}
myapp.controller(controllers)
my index.html
<html>
<base href="/advangularjs/" />
<head>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="demoweb_angular/controllers.js"></script>
</head>
<body ng-app="sampleapp" style="background-color: #E0EEE0">
Login |
Show Data
<div ng-view align="center" style="border: 1px solid red;">
</div>
</body>
</html>
admin.html
<b>{{ message }}</b>
data-view.html
<b>{{ message }}</b>
Make sure you have added angular-route.js
in your index.html file.
Also Please go through the documentation of ui router for the basic setup
var myapp = angular.module('sampleapp', ['ngRoute']);
u need to add ngRoute dependancy also. Because your sampleapp is depend on ngRoute .
<div ng-view></div>
you need to add this also. the partial are loading to this div. put this inside the body.
Related
So I am asking question after investing almost 2 hours to find the root cause of my problem.
My Index.html
<!doctype html>
<html>
<head>
<title>Single Page Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="myApp.js"></script>
</head>
<body ng-app="myApp">
<ul>
<li>Home</li>
<li>Student</li>
<li>Courses</li>
</ul>
<div ng-view=""></div>
</body>
</html>
My myApp.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'HomeCntrl'
});
$routeProvider.when('/student', {
templateUrl : 'student.html',
controller : 'StudentCntrl'
});
$routeProvider.when('/courses', {
templateUrl : 'courses.html',
controller : 'CoursesCntrl'
});
}]);
app.controller('HomeCntrl', ['$scope', function($scope){
alert("HomeCntrl");
$scope.message = "Welcome to home page";
}]);
app.controller('StudentCntrl', ['$scope', function($scope){
alert("StudentCntrl");
$scope.message = "Welcome to Student page";
}]);
app.controller('CoursesCntrl', ['$scope', function($scope){
alert("CoursesCntrl");
$scope.message = "Welcome to Courses Page";
}]);
And some other htmls with code
<h1>Home</h1>
{{message}}
<h1>Student Page</h1>
{{message}}
<h1>Courses Page</h1>
{{message}}
I am using brackets to run this app. Let it be default hit or click over any link its always giving alert("HomeCntrl") only.
Note- The same code is running in plunker very well.
WHAT AM I DOING WRONG??
Edit 1- Added screenshot of one click
I clicked on Courses. But the popup I got is 'HomeCntrl'
Edit 2 - Added my plunker link
Plunker Link
http://plnkr.co/edit/HehCAD4afiN4xD828YYT?p=preview
Edit 3 - Adding Screenshot of console
clicked on Student link
You dont need to do an inject on your config and you also dont need to repeat $routeProvider. Change it to this.
HTML:
<!doctype html>
<html>
<head>
<title>Single Page Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="myApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="Universal as universal">
<ul>
<li><span ng-click="universal.goTo('/')">Home</span></li>
<li><span ng-click="universal.goTo('/student')">Students</span></li>
<li><span ng-click="universal.goTo('/courses')">Courses</span></li>
</ul>
<div ng-view=""></div>
</body>
</html>
Code:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'HomeCntrl'
})
.when('/student', {
templateUrl : 'student.html',
controller : 'StudentCntrl'
})
.when('/courses', {
templateUrl : 'courses.html',
controller : 'CoursesCntrl'
});
});
app.controller('Universal', ['$scope', '$location', function($scope, $location){
// alert("HomeCntrl");
var scope = this;
scope.goTo = function(where){
$location.path(where)
}
}]);
app.controller('HomeCntrl', ['$scope', function($scope){
// alert("HomeCntrl");
$scope.message = "Welcome to home page";
}]);
app.controller('StudentCntrl', ['$scope', function($scope){
alert("StudentCntrl");
$scope.message = "Welcome to Student page";
}]);
app.controller('CoursesCntrl', ['$scope', function($scope){
alert("CoursesCntrl");
$scope.message = "Welcome to Courses Page";
}]);
What I did here was add a universal controller that you can use to handle routing. Make sure to inject $location so that it can navigate. When using angular routing you want to avoid using hrefs and use angularjs native routing. This code will work for you. Here is the Plunkr example I made.
Your latest screenshot shows what the problem is.
Look at the URL:
127.0.0.1:63688/index.html#!/#%2Fstudent
This means that the part #/student or #/courses is being blindly appended to the existing URL 127.0.0.1:63688/index.html#!/. Since the required #/ is there after the index.html you get shown your 'HomeCntrl'.
To get shown 'StudentCntrl' you need the URL to be:
127.0.0.1:63688/index.html#/student
On sites like Plunker, the index file is loaded by default, and it's not part of the URL. So if the index.html is removed from the URL, the page would still work:
127.0.0.1:63688/#/
Loading student URL changes it to
127.0.0.1:63688/#/student
Which then loads StudentCntrl.
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
Im not sure where to place the partials folder holding the html views! I have placed it at the app root folder, in views and in public. Also tried removing the first trailing slash of the templateUrl but nothing. I also have tried(as view loading container):
<div ng-view></div>
<ng-view></ng-view>
<div data-ng-view></div>
<div ng-view=""></div>
<div ng-view="demoApp"></div>
This is just a learning example holding a module with 2 controllers and 2 views.
Here is the SPA(this page renders as rout '/' of a dancer(perl) project):
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title><% title %></title>
<link rel="stylesheet" href="/customised_bootstrap/css/bootstrap.css">
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/backbone/backbone.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/ng-tasty/ng-tasty-tpls.js"></script>
<script>
//define a module
var demoApp = angular.module('demoApp', ['ngRoute']);
//define routes for our module(each route will have its set of views and controllers)
demoApp.config =(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'simpleController1',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView1',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView2',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView2.html'
})
.otherwise({redirectTo: '/partials/testAlexView1.html'});
});
//define a controller within our module 'demoApp'
demoApp.controller('simpleController1', function ($scope) {
$scope.customers = [
{name:'Boris', age:'18'},
{name:'Claudia', age:'28'},
{name:'Carlos', age:'39'},
{name:'Ben', age:'25'}
];
//var stuff ={};
});
demoApp.controller('simpleController2', function ($scope) {
$scope.customers = [
{name:'Alex', age:'18'},
{name:'Albert', age:'28'},
{name:'Anthony', age:'39'},
{name:'Loren', age:'25'}
];
});
</script>
</head>
<body>
<div>
<p>Main page of SPA test</p>
<div ng-view></div>
</div>
</body>
</html>
Here are the two identical views:
testAlexView1.html(testAlexView2.html is the same):
<div>
<input type="text" data-ng-model="name" /> {{ name }}
<br />
<ul>
<li data-ng-repeat="customer in customers | filter:name | orderBy:'age'">
{{customer.name}} - {{customer.age}}
</li>
</ul>
</div>
In the browser inspector, within the div where the view should load, all that appears is(both at root or root#/view.html):
<!-- ngView: -->
Batarang dosn't detect scopes nor modules neither. Thanks for any help!
There appears to be a typo in your config here:
demoApp.config =(function ($routeProvider) {
Instead try:
demoApp.config(function ($routeProvider) {
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
My code, as below, does not substitute the mg-view with the template from the route configuration.
I get {{message}} to be replaced by 'in controller', which shows the controller is alive, but nothing more happens.
View:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angularjs/angular.js"></script>
<script src="angularjs/angular-resource.js"></script>
<script src="angularjs/angular-route.js"></script>
<script src="app.js.html"></script>
</head>
<body class="appearanceOrange styleIOS">
<section ng-app="app" ng-controller="pageCtrl">
Current page '{{ message }}'
<div ng-view></div>
</section>
</body>
</html>
Controller:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/corporate', {
controller:'pageCtrl',
templateUrl:'corporate.html'
})
.otherwise({
redirectTo:'/corporate'
});
});
app.controller('pageCtrl', function ($scope) {
$scope.message = "in controller";
});
Partial:
<section
id="pageCorp"
class="page"
title="Corp France"
background="stripRoll"
style="text-align:center; display: block;">
<div style="padding:200px">
<a href="http://www.corp.fr/go/id/ceeq/" style="color: white">
<img src="rsc/corp.logo.svg" style="width:150px; margin: auto auto;background-color:white;"/><br/>
<span style="font-size:18pt;font-weight:bold">visit our Website</span>
</a>
</div>
</section>
Looks fine to me, as long as your template in corporate.html exists.
Here is a working fiddle.
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/corporate', {
controller: 'pageCtrl',
template: 'hi'
}).otherwise({
redirectTo: '/corporate'
});
});
app.controller('pageCtrl', function($scope) {
$scope.message = "in controller";
});
Edit: Here is another possibility to use the template, with $templateCache: jsfiddle
app.run(function($templateCache) {
$templateCache.put('corporate.html', 'This is the content of the template');
});
After hours of investigation, it comes that legacy javascript was breaking angularjs.
So be careful when converting (migrating) to angularjs, and try to deactivate your legacy javascript code first, prior to enter in a lengthly investigation period…
Thanks to everyone who helped me.