Controller part
Below is the controller part, here I am unable to fetch data from controller aa and bb into html pages Students and courses respectively
/// <reference path="Angularmin.js" />
/// <reference path="angular_route.js" />
/// <reference path="C:\Users\prerna.bhadwal\Documents\projects\practice_angular\practice_angular\HtmlPage2.html"
var app = angular.module('mod', ['ngRoute']);
//var app = angular.module('mod', []);
app.config(function ($routeProvider) {
$routeProvider
.when("/Students", {
templateUrl: "Templates/Courses.html",
controller:"aa"
})
.when("/Courses", {
templateUrl: "Templates/Students.html",
controller: "bb"
})
})
.controller("aa", function ($scope) {
$scope.msg = "hello how r";
}).controller("bb", function ($scope) {
$scope.msg1 = "hhhhhh";
})
Html page part
This is the html part from where I am routing to students and courses html pages:
<!DOCTYPE HTML>
<html ng-app="mod">
<head>
<!--<script src="Scripts/Controller2.js"></script>-->
<script src="Scripts/Angularmin.js"></script>
<script src="Scripts/Controller.js"></script>
<script src="Scripts/angular_route.js"></script>
<title></title>
</head>
<body >
<!--students
courses-->
<!--<div>
{{datafromservice}} datafromservice
</div>-->-->
Red
Green
<div ng-view></div>
</body>
</html>
This is the html page for students:
<div>
<ul>
<li>Student class A</li>
<li>Student Class B</li>
<li>{{msg}}</li>
</ul>
</div>
This is the html page for courses:
<div>
<ul>
<li>Maths</li>
<li>Science</li>
<li>{{msg1}}</li>
</ul>
</div>
I think this is what you are trying...
Passing values into the routes...
complete code in the snippet... and in the students.htm, kindly insert line the will be the following...
INSERT THIS IN YOUR... students.htm
<li>{{gottenValue}}</li>
var app = angular.module('mod', ['ngRoute']);
//var app = angular.module('mod', []);
app.config(function ($routeProvider) {
$routeProvider
.when("/Students", {
templateUrl: "students.htm",
controller:"aa",
passValue: 'exampleA'
})
.when("/Courses", {
templateUrl: "rootScope.htm",
controller: "myCtrl"
})
})
.controller("aa", function ($scope, $route) {
$scope.msg = "hello how r u ";
$scope.gottenValue = $route.current.$$route.passValue;
console.log($scope.gottenValue);
$scope.passValue
}).controller("bb", function ($scope) {
$scope.msg1 = "hhhhhh";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app="mod">
<!--students
courses-->
<!--<div>
{{datafromservice}} datafromservice
</div>-->-->
Red
Green
<div ng-view></div>
</div>
Related
I have constructed the following routes in angular.
ROUTES
var app = angular.module("app",['ngRoute']);
app.config([
'$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/items/', {
templateUrl: '/app/items/index.html',
controller: 'ItemsController'
})
.when('/', {
templateUrl: '/app/home/index.html',
controller: 'HomeController'
})
}
]);
Each route has its own template and a controller.
TEMPLATES
items/index.html
<h2>Items</h2>
<div ng-repeat ="item in items">
{{item}}
</div>
home/index.html
<h2>Home</h2>
<p>{{message}}</p>
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Configuration and Routing</title>
<link rel = "stylesheet" href ="bootstrap.min.css">
<base href="/" />
</head>
<body>
<div class ="container">
<h1>Configuration and Routing</h1>
<div class = "navbar">
<ul class ="nav navbar-nav">
<li>Home</li>
<li>Items</li>
</ul>
</div>
<div ng-view>
<h4>{{ message }}</h4>
</div>
</div>
<script src = "angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src ="./app/app.js"></script>
</body >
</html>
CONTROLLERS
ItemsController
app.controller('ItemsController',[
'$scope',
function($scope) {
$scope.items = ['First','Second','Third']
}
])
HomeController
app.controller('HomeController', [
'$scope',
function($scope) {
$scope.message = 'Welcome!';
}
]);
The problem i have is the browser shows only the partial templates but not the data(i.e 'message' and 'items') from the controllers which it is supposed to show under the div with ng-view attribute.I also get the following errors from the browser "Argument 'HomeController' and ItemsController is not a function got undefined".
How can i resolve this ?
I am trying to do routing in angular js and Server is running fine. But angular routing is not working properly, only main.html page is coming in ng-view, second.html is not coming. when clicked on the first and second in html same mainController is working not the secondController.
HTML
<!Doctype html>
<html ng-app="myApp">
<meta charset=utf-8" />
<head>
<script src="http://code.angularjs.org/snapshot/angular.min.js"></script>
<script src="http://code.angularjs.org/snapshot/angular-route.min.js">
</script>
<script type="text/javascript"src="app.js"></script>
<body>
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class = "container">
<div ng-view>
</div>
</body>
main.html
<h1> this is main </h1>
second.html
<h1> this is second </h1>
app.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','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("first");
}]);
myApp.controller('secondController',
['$scope','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("second");
}]);
Problem is your scripts, they are not working use the one from googleapis.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
template: '<h1>Main Page</h1>',
controller: 'mainController',
})
.when('/second', {
template: '<h1>{{ test }}</h1>',
controller: 'secondController',
})
});
myApp.controller('mainController',
['$scope', '$log', '$location', function ($scope, $log, $location) {
$log.info($location.path());
console.log("first");
}])
.controller('secondController', ['$scope', function ($scope) {
$scope.test = 'Testing angular routes';
}]);
<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
<body ng-app="myApp">
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
/// <reference path="Scripts/angular.js" />
var myApp = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "homeHTML.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "coursesHTML.html",
controller: "coursesController"
})
.when("/student", {
templateUrl: "studentHTML.html",
controller: "studentController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home";
})
.controller("coursesController", function ($scope) {
$scope.message = "Courses";
})
.controller("studentController", function ($scope) {
$scope.message = "Student";
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Script.js"></script>
<title></title>
</head>
<body>
<table>
<tr>
<td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center">
This is the header area
</td>
</tr>
<tr>
<td style="width:200px; height:400px; background-color:#ff0000">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Student</li>
</ul>
</td>
<td style="width:400px; height:400px; background-color:#ff6a00">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center">
This is a Footer Area
</td>
</tr>
</table>
</body>
</html>
homeHTML, studentHTML, coursesHTML all are same as below.
<h1>{{message}}</h1>
<div>
<p>Hi this is home partial view</p>
</div>
I found this error in the snippet part
Error:{
"message": "Uncaught ReferenceError: angular is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 51,
"colno": 13
}
What happened here is I get the view as shown in snippet with no errors in the browser and also when i click links home, courses, student nothing appears.
Please point out what went wrong here.
Guyss I found out the answer
/// <reference path="Scripts/angular.min.js" />
var myApp = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/home", {
templateUrl: "homeHTML.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "coursesHTML.html",
controller: "coursesController"
})
.when("/student", {
templateUrl: "studentHTML.html",
controller: "studentController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home";
})
.controller("coursesController", function ($scope) {
$scope.message = "Courses";
})
.controller("studentController", function ($scope) {
$scope.message = "Student";
});
I have added $locationProvider. I will update the reason soon.
First define angular module in your html or body tag and make sure your angular version is same as angular-router version.Also don't forget to define respective controllers in homeHTML.html, coursesHTML.html and studentHTML.html
homeHTML.html
<div ng-controller="homeController">
<h1>{{ message }}</h1>
</div>
Its working for me.
check out this link : https://plnkr.co/edit/cZzk8EKBXqRuoy6oYhuF?p=preview
The above error i am getting when i run angularjs route simple application.
I made separate folder for partial template. only three files are there that contains simple headings.
below code for route.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Js Route Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/external/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/route.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="js/route.js" type="text/javascript"></script>
</head>
<body>
<div class="outerWraper">
<div class="header">
<h2>Website Header</h2>
</div>
<div class="mainContainer">
<div class="leftContainer">
<ul class="leftMenuBar">
<li>Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
</div>
<div class="rightContainer">
<div class="eachContentDiv">
<ng-view> </ng-view>
</div>
</div>
</div>
<div class="footerWraper">
<h5>Website footer</h5>
</div>
</div>
</body>
Correspondence js file.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
})
});
Your route.js file is bonkered. I'll provide the corrected code, but if you had researched the error at all, you would have seen the error is pretty clear - $routeProvider has no function controller. You're chaining your controller definitions to $routeProvider and not the angular object.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
});
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
});
Here's the main index:
I have two .php files which needs to be viewed in template.(ng-view)
mainFrame.php
<!DOCTYPE html>
<html lang="en-US" ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link href="../css/materialize.min.css" rel="stylesheet">
<link href="css/blogmain.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700italic,900|Lato|Tangerine|Montserrat|Robot
o+Condensed:400,300italic,700italic' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="navbar-fixed">
<nav style="height: 65px">
<div class="nav-wrapper">
<a href="#" class="brand-logo center" style="font-family:'Montserrat',serif;">
Welcome To </a>
<ul id="slide-out" class="side-nav">
<li class="waves-effect wifull"><a href="#/create" id="changeDiv">Create a
Post</a>
</li>
<li class="waves-effect wifull"><a href="#/posts" id="changeDiv1">View
Posts</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large show-on-medium-and-down"><i
class="mdi-navigation-menu"></i></a>
</div>
</nav>
</div>
<div ng-view></div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/angular_min.js"></script>
<script src="../js/angular_route.min.js"></script>
<script src="js/appRoute.js"></script>
<script src="../js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').material_select();
});
$('.button-collapse').sideNav({
menuWidth: 300,
edge: 'left',
closeOnClick: true
}
);
</script>
</body>
</html>
.js file for routing.
appRoute.js
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider)
{
$routeProvider
.when('/create', {
templateUrl: '../create/create.php',
controller: 'CreateController'
})
.when('/posts', {
templateUrl: '../viewPost/view_post.php',
controller: 'ViewPostController'
}
)
.otherwise({
redirectTo: '/create'
})
});
app.controller('CreateController', function ($scope) {
});
app.controller('ViewPostController', function ($scope) {
});
}).();
I don't know what's the problem but nothing is being shown in ng-view.
Thanks.
Second variant of code :) Only put normal HTML templates
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider
.when('/create', {
templateUrl: '../create/create.php',
controller: 'CreateController'
})
.when('/posts', {
templateUrl: '../viewPost/view_post.php',
controller: 'ViewPostController'
}
)
.otherwise({
redirectTo: '/create'
})
}]);
app.controller('CreateController', function ($scope) {
});
app.controller('ViewPostController', function ($scope) {
});
Your last line in appRoute.js is wrong.
}).();
Just remove the . (dot)
})();
For first, it's bad idea to use JQuery and Angular inside one JS App.
Second, what .(); in the end of code in appRoute.js ?
Third, do you have code with call in appRoute.js (function () { ?
So try this code for appRoute.js
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider)
{
$routeProvider
.when('/create', {
templateUrl: '../create/create.php',
controller: 'CreateController'
})
.when('/posts', {
templateUrl: '../viewPost/view_post.php',
controller: 'ViewPostController'
}
)
.otherwise({
redirectTo: '/create'
})
});
app.controller('CreateController', function ($scope) {
});
app.controller('ViewPostController', function ($scope) {
});