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
Related
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'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>
Recently my page was showing data but from yesterday suddenly its now showing. I am confused what I have done wrong. I checked properly and everything is working fine.
Here is code on UI-
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="EmployeeServices.js"></script>
</head>
<body>
<form id="form1" ng-controller="EmpCtrl" ng-submit="save()">
<table border="1" style="text-align: center; margin-left: 410px;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Gender</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.Name}}</td>
<td ng-bind="employee.Age"></td>
<td ng-bind="employee.City"></td>
<td>{{employee.Gender && "Male" || "Female"}}</td>
<td>Edit </td>
<td>Delete </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Code of Controller-
var app = angular.module('myApp', ['ngRoute']);
app.controller('EmpCtrl', function ($scope, $http, fetchEmpService) {
$http.get("EmpWebService.asmx/GetEmp")
.then(function (response) {
$scope.employees = response.data;
});
}
I also checked and realized that controller is receiving the data in object form but its not displaying on UI
I think you missed the "/" at the beginning of 'get' URL.
var app = angular.module('myApp', ['ngRoute']);
app.controller('EmpCtrl', function ($scope, $http, fetchEmpService) {
$http.get("/EmpWebService.asmx/GetEmp")
.then(function (response) {
$scope.employees = response.data;
});
}
Please verify.
I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);