Below is my HTML file RouterExample.html. I am trying to create a router. But it is not working.
Have i imported all necessaries?
When i try to run the code i get the html page as designed. When i click on any of the HREF objects, the object's name is getting appended to the URL but getting JBOSS, which is my server home page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="scripts/underscore.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="router.js"></script>
</head>
<body>
One
Two
Three
One
Two
Three
<table>
<tr>
<td id="one">1</td>
<td id="two">2</td>
</tr>
<tr>
<td id="three">3</td>
<td id="four">4</td>
</tr>
</table>
<script>
$(function(){
var AppRouter = Backbone.Router.extend({
routes: {
'RouterExample.html': 'home',
'one' : 'oneFun'
},
home : function()
{
alert("Home");
},
oneFun: function()
{
alert("One Function");
}
});
var fovView = new AppRouter();
Backbone.history.start();
});
</script>
</body>
</html>
Your anchor tags are linking to another document because the href values start with /. Try this:
One
Two
Three
One
Two
Three
Related
i am trying to include the view page in angularjs but it is working.
Here is my code
rootService.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
viewCustomer.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
masterPage.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="viewCustomer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add Company</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
</head>
<body>
<div >
ViewCustomer
<div ng-view></div>
</div>
</body>
</html>
checker.jsp
<h3 ng-controller="checkerController">{{headingTitle}}</h3>
Above code i used but it is not working in browser console error is
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=viewCustomer&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.4%2F%24injector%2Funpr%3Fp0
can any one help me to fix this
Please change $routProvider to $routeProvider in your rootService.js file. So your rootService.js will look like this:
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routeProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
In viewCustomer.js you dont have to declare the module again, change it as,
// remove this line var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
also change the order as,
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
Here i try to Angular setup in html page for that i wrote simple code as Below
MyApp.js
/// <reference path="angular.js" />
var app = angular.module('MyApp', [])
debugger;
app.controller('HomeCtrls', function ($scope) {
$scope.msg = "This is MyApp....";
})
Master.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app="MyApp">
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
Here why my msg is not Loading This is MyApp....
ng-app inject wrong place. Not <head ng-app="MyApp">, Inject html or body or div tag as per your web application need.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-app="MyApp" ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
the problem is with your angular script, is not loaded, check your path, you can use the CDN also :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
i am trying to use ng-admin for the firs time. i am just following the example in and i am unable to see anything in the browser. my code is minimal, so not sure what i am doing wrong.
any ideas? did i not install correctly? i just downloaded it from a site and unzipped the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Admin</title>
<link rel="stylesheet" href="external/ng-admin/build/ng-admin.min.css">
<script src="external/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</head>
<body ng-app="myApp" ng-strict-di>
<div ui-view="ng-admin"></div>
</body>
</html>
// declare a new module called 'myApp', and make it require the `ng-admin` module as a dependency
var myApp = angular.module('myApp', ['ng-admin']);
// declare a function to run when the module bootstraps (during the 'config' phase)
myApp.config(['NgAdminConfigurationProvider', function (nga) {
// create an admin application
var admin = nga.application('My First Admin')
.baseApiUrl("http://vl-esifakis-ice:8000/tracker/");
var foundry = nga.entity('foundry');
foundry.listView().fields([
nga.field('name'),
nga.field('id')
]);
admin.addEntity(foundry);
// more configuration here later
// ...
// attach the admin application to the DOM and execute it
nga.configure(admin);
}]);
Here is a demo which i have made,
<!DOCTYPE html>
<html>
<head>
<link data-require="ng-admin#0.0.1" data-semver="0.0.1" rel="stylesheet" href="https://unpkg.com/ng-admin/build/ng-admin.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ng-admin#0.0.1" data-semver="0.0.1" src="https://unpkg.com/ng-admin/build/ng-admin.min.js"></script>
<script data-require="angular-mocks#*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.7/angular-mocks.js"></script>
<script src="admin.js"></script>
<!-- <script src="backend.js"></script>
-->
</head>
<body ng-app="myApp">
<div ui-view="ng-admin"></div>
</body>
</html>
DEMO
I have an existing angularjs app which was working fine until I converted it to ionic. I tested the website on the chrome browser and discovered that I can no longer scroll down to see a long table.
The only change I made was in the html code;
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>test-view</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/js/bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="lib/ionic/js/bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!--<script src="../../bower_components/angular/angular.min.js"></script>-->
<!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
<script src="lib/ionic/js/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-material/angular-material.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-route/angular-route.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-moment/angular-moment.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-google-chart/ng-google-chart.js"></script>
<script src="lib/ionic/js/bower_components/moment/moment.js"></script>
<script src="lib/ionic/js/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="lib/ionic/js/bower_components/ng-table/dist/ng-table.js"></script>
<div ng-include src="'partials/header.html'"></div>
</head>
<body>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<div ng-controller="ViewCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>symbol</th>
</tr>
<thead>
<tbody>
<tr ng-repeat="vw $data">
<td data-title="'name'" >
{{vw.name}}
</td>
<td data-title="'symbol'">
{{vw.symbol}}
</td>
</table>
</div>
</body>
</html>
How to make the code scrollable?
Wrap this tag over your table.
<ion-content class="has-header" overflow-scroll="true">
<!-- table contents here -->
</ion-content>
The above code will use native scroll instead of js scroll. Note that it may not work with lower versions of Android. As long as you are using Android 4.2 and above, you are quite safe.
Since you are adding a html partial, I assume there is a header on your html. Therefore, use class="has-header".
i am new to angular js. i write the code for perform multiple controller concept but it is not working .i dont know where i am doing wrong?
following code i am using
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="number" ng-model="q">
<input type="number" ng-model="c">
<p>{{ q*c }}</p>
</div>
<div ng-controller="newone">
<p>{{lastName|uppercase}}</p>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.q=10;
$scope.c=5;
});
</script>
<script src="control.js"></script>
</html>
**control.js**
var app=angular.module('myApp',[]);
app.controller('newone',function($scope){
alert();
$scope.firstName="Vinoth";
$scope.lastName="Kumar";
$scope.full=function()
{
return $scope.firstName+''+$scope.lastName;
}
});
above code is not working can any one help me to fix this
In controller.js you don't need to declare the module again :)
var app=angular.module('myApp',[]);
change it to var app=angular.module('myApp');