/// <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
Related
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>
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>
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";
});
I am using this code to view and add peoples in an array.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
add.html
<h1>Add</h1>
<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">
<br />
<button ng-click="add()">Add</button>
<hr />
Back
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
});
});
app.controller('Ctrl', function($scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
The problem is, I am not getting data from ng-model="new_name" into the controller method $scope.add = function(). After pressing add button only blank strings gets pushed into array. However the model and controller working perfectly without routing and ng-view directive. I think its scope related problem. Can any body help me in this.
Thanks.
Because you should specify the controller for each view. So try doing this:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
A better solution would be to have a separate controller for each view. Also, have a look at the $routeProvider documentation.
Just delete <div ng-controller="Ctrl"> from index.html and add a controller attribute for your route.
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($location,$scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
first you have to wrap your inputs with <form> tag with name='' attribute.
Next step is to give name='' attributes for each <input> tag. Look:
<form name='myLoginForm'>
<input name='nick' ng-model='loginFormModel.nick'>
<input name='password' ng-model='loginFormModel.password'>
</form>
In controller:
app.controller('Ctrl', function($location,$scope) {
$scope.loginFormModel = {}; //now you have whole values from view in this variable, for example nick is available in $scope.loginFormModel.nick
});
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) {
});