ng-view unable to display data - javascript

-----index.html-------
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<h1>About Page</h1>
<p>{{ message }}</p>
<button ng-click="go()">Submit</button>
<div ng-view></div>
</div>
</html>
----main.js--------
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/go", {
templateUrl : "sample.html"
});
});
----aboutController.js---------
var app = angular.module("myApp", []);
app.controller('aboutController', function($scope,$http,$location) {
$scope.name="";
$scope.message="Home Page";
$scope.go= function(){
$http.get('content.json').success(function(data) {
$scope.obj = data;
$location.path("/go");
});
}
});
------sample.html--------
<h1>Sample Page</h1>
I am trying to use angular routing in this test application. Can you tell what am I doing wrong here? When I click on the submit button, location in the address bar changes to "http://localhost:8080/index.html#/go" but I don't see the contents of "sample.html" in ng-view.

You are declaring your module for your app twice so it is overwriting the first configuration. Remove the second declaration: var app = angular.module("myApp", []);
Heres your code working (I've remove the GET request and substituted template url with template for demonstrative purposes):
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/go", {
template: "<h1>Sample Page</h1>"
});
});
app.controller('aboutController', function($scope, $http, $location) {
$scope.name = "";
$scope.message = "Home Page";
$scope.go = function() {
$location.path("/go");
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<h1>About Page</h1>
<p>{{ message }}</p>
<button ng-click="go()">Submit</button>
<div ng-view></div>
</div>
</html>

Related

Unable to fetch data from controller into view using ng-route

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>

Angular routing is not working properly?

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>

angular js: Not able to pass value from controller to html of an included page

I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>

How to change variable when i press button in angularJS?

How can I change some variable at view by pressing button using Angular?
For example view:
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')"></button>
</div>
Script:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue= function(param) {
$scope.firstname = param;
}
});
I expect when I'll press button then instead Johny will be Joe (as in parameter).
At the moment when i click on the button nothing happens
#EDIT
Ok i know where is the problem. This works fine at my main div. However it doesn't work on my second div:
I run script below by clicking other button, and this script changed my div
function show(div_id){ //div_id is `someDiv`
document.getElementById('main_place').innerHTML = document.getElementById(div_id).innerHTML;
}
But why angular script doesn't work on this div?
Please check that one.
HTML:
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')"></button>
</div>
JS:
var myApp = angular.module('myApp',[]);
myApp.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue= function(param) {
$scope.firstname = param;
}
});
I created working example with your problem:
http://jsfiddle.net/halirgb/Lvc0u55v/
add
$scope.changeValue = function(newVal) {
$scope.firstname = newVal;
}
And on html put <p>{{firstname}}<p>
Try this in controller:
$scope.changeValue = function(changeName)
{
$scope.firstname = changeName;
};
In View:
<p>{{firstname}}</p>
Here is a working example
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue = function(param) {
$scope.firstname = param;
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')">Click</button>
</div>
</body>
</html>
https://plnkr.co/edit/dz553Og6E83wx0LF6NHT?p=preview

Angular.js - show link depending on view

I would like to have a link back to the landing page in the header of my app's views but obviously not on the landing page itself. How would I optimally implement that in Angular.js?
Should I use $location.url() to determine the view or should I use bind-html or something else altogether?
Thanks for some tips and help!
EDIT
my current code, I thought I'd made it a little easier since each view has its own controller, however the link is always shown:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style>
</style>
</head>
<body ng-app="myApp">
<div data-role="page" id="pageone">
<div data-role="header">
<h1>WELCOME!</h1>
BACK TO HOME
</div>
<div ng-view></div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script>
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller : 'HomeController'
})
.when('/other', {
templateUrl : 'views/other.html',
controller : 'OtherController'
});
});
app.controller('HomeController', function($scope, $http, $location, $route) {
$scope.isLandingPage = true;
});
app.controller('OtherController', function($scope, $route) {
$scope.info = 'Other';
});
</script>
</body>
</html>
The link is always shown because your div in which is link doesn't have any controller attached.
You can do it this way:
app.controller('landingPageCtrl', ['$scope', '$location', function($scope, $location){
$scope.isLandingPage = function(){
return ($location.url() == '/home') ? true : false;
}
}]);
then use ng-show to hide or show link depending on location
<div ng-controller="landingPageCtrl" data-role="header">
<h1>WELCOME!</h1>
BACK TO HOME
</div>
I like to check for my route (or state in ui.router).
$scope.isLandingPage = $state.current.name === 'home';
and use <a ng-show="!isLandingPage">Link</a>

Categories