I'm working with angula rjs routin , everything works fine, but the routing is giving me a weird problem. When i click a link on my index.html page so the url look like the following
http://localhost:0000/Index.html#%2Fhome
Where as it should look like:
http://localhost:0000/Index.html#/home
When I make a change to my routing function from "/home" to only "/" my application works well, I don't understand where I'm going wrong following is my routing file:
var app = angular
.module("Demo", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server"];
})
.controller("studentsController", function ($scope, $http) {
$http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
$scope.students = response.data;
})
})
And following is my index.html:
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<link href="Styles.css" rel="stylesheet" />
<script src="scripts/Script.js"></script>
<base href="/"/>
<meta charset="utf-8" />
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Courses
Students
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
So, I followed the given comments and updated the index.html as follows, which worked for me. Thanks!
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="Styles.css" rel="stylesheet" />
<script src="scripts/Script.js"></script>
<base href="/"/>
<meta charset="utf-8" />
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Courses
Students
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
Related
Trying to inject view using route in AngularJS.When I click on the link it doesn't show the view in page.There is index.html file in which I am trying to inject view.
This is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular Routing</title>
<!--<script src="Scripts/angular.min.js"></script>-->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<link href="CustomStyle.css" rel="stylesheet" />
<script src="Scripts/script.js"></script>
</head>
<body ng-app="Demo">
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Courses
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
This is module named script.js
var app = angular.module("Demo", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller:"homeController"
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller:"coursesController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#","HTML","JAVA","Angular JS"];
})
When I click on one of the link say home, it displays this in browser address bar http://localhost:51008/index.html#!#%2Fhome instead of this http://localhost:51008/index.html/#home
And there is no error displayed in consoleThis is my Directory Structure
i am new in angularjs and nodejs, What i am doing is create a html file name of index.html and make a controller.js file in which printing a console.log message but getting error on browser in console box my code is as follow
<html ng-app>
<head>
<title> App </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container" ng-controller="AppCtrl">
<h1> Contact List App </h1>
<table class="table table-bordered">
<thead>
<tr>
<td> name </td>
<td> Email </td>
<td> mobile </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
and controller.js code is as follow
function AppCtrl() {
console.log("Hello Bro")
}
First of all you cannot call this a Angular App.
You dont have the module. Declare a module as follows,
var app = angular.module('todoApp', []);
Register a controller,
app.controller("dobController", ["$scope",
function($scope) {
}
You have not refered the angular reference.
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
console.log("Hello Bro");
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div class="col-md-20">
</div>
</body>
</html>
Solution StructureI am working with AngularJS route (ngRoute). My ng-view does not load the partial template. Here is my code :
MyHome.html (Start Page)
[enter image description here][Solution Structure]
<html ng-app="Demo">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/SPAScript.js"></script>
</head>
<body>
<table>
<tr>
<td>
Home
</td>
</tr>
<tr>
<td>
About
</td>
</tr>
<tr>
<td colspan="2">
Your Data goes here
<ng-view> </ng-view>
<!--<div ng-view="">
</div>-->
</td>
</tr>
</table>
</body>
</html>
My Script file :
/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />
var app = angular.module("Demo", ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
debugger;
$routeProvider
.when("/home", {templateUrl: "Templates/HomePage.html",controller:"homecontroller"})
.when("/about", {templateUrl: "Templates/AboutPage.html",controller: "aboutcontroller"})
});
app.controller("homeController", function ($scope) {
$scope.message = "Home Page";
});
app.controller("aboutcontroller", function ($scope) {
$scope.message = "About Page";
});
AboutPage.html:
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/SPAScript.js"></script>
<h1>
Welcome To {{message}}
</h1>
<div>
<input type="button" id="btnSubmit" value="Click Me" />
<input type="text" id="myText" value="Enter Some Text"/>
</div>
I have included all the code but looks like I am missing out something . Need help from someone. Thanks in advance!
I am creating a web app in which I have a table and a checkbox if I check the checkbox I want to show how many numbers of rows are there in my table,
like:
<table>
<thead>
<tr>
<td>
<input type="checkbox" ng-model="checkall" ng-click="clickcheckall()"/>
</td>
<td>other td</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="somedata in table">
<td></td>
<td></td>
</tr>
</tbody>
</table>
and here I want to print this
{{showcheckalldata}}
in my controller I have a scope variable
$scope.showcheckalldata='';
what I need to do if I want to print number of columns?
You can just assign the number of elements in the array,
$scope.showcheckalldata= table.length;
DEMO
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.results = [{
"agence": "CTM",
"secteur": "Safi",
"statutImp": "operationnel"
},
{
"agence": "SMS",
"secteur": "Safi",
"statutImp": "operationnel"
}];
$scope.clickcheckall = function() {
$scope.showcheckalldata = $scope.results.length;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<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="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr>
<td>
<input type="checkbox" ng-model="checkall" ng-click="clickcheckall()"/>
</td>
</tr>
<tr>
<th>Agence</th>
<th>Secteur</th>
<th>StatutImp</th>
</tr>
<tr ng-repeat="result in results">
<td>{{result.agence}}</td>
<td>{{result.secteur}}</td>
<td>{{result.statutImp}}</td>
</tr>
</table>
<h1>Total rows are : {{showcheckalldata}}</h1>
</body>
</html>
I am following the example of Template-expanding directive
It is working fine. Now I am trying to extend the concept as follows.
app.js
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
var EmpData = [{
"EmpId": 1,
"EmpName": "Michale Sharma"
}, {
"EmpId": 2,
"EmpName": "Sunil Das"
}
];
var DeptData= [{
"Deptid": 4,
"Deptname": "IT"
}, {
"Deptid": 1,
"Deptname": "HR"
}];
$scope.customer = {
EmployeeRelatedData: EmpData,
DepartmentRelatedData: DeptData
};
});
app.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr){
return attr.type+'.html';
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js#1.3.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div ng-controller="Ctrl">
<!-- Section for Employee -->
<div my-customer type="EmployeeRelatedData">
<table border="1">
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in customer.EmployeeRelatedData"></tr>
</tbody>
</table>
</div>
<!-- Section for Department -->
<div my-customer type="DepartmentRelatedData">
<table border="1">
<thead>
<tr>
<th>Department Id</th>
<th>Department Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in customer.DepartmentRelatedData"></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
EmployeeRelatedData.html
<tr>
<td>{{customer.EmpId}}</td>
<td>{{customer.EmpName}}</td>
</tr>
DepartmentRelatedData.html
<tr>
<td>{{customer.Deptid}}</td>
<td>{{customer.Deptname}}</td>
</tr>
I am looking for the output
What is the mistake that I am making for which I am not able to get it?
Thanks.
You've got few mistakes please see here for working demo
http://plnkr.co/edit/RQ1xWaLUAsBpNgyMWujI?p=preview
my-customer should be inside tr tag not before table
you need to pass your customer to directive scope so in you can do that by crating isolate scope
scope: {
customer: '=myCustomer'
},
and in your view
my-customer="x"
as x is your customer