I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo
Related
i am trying to code this and just Jump form 1 page to another page using routes but doesn't why its not working i search and tricks a lot but still failed please any one?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular Js</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controller.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
----------
Controler.js
var myRoute=angular.module('myApp',['ngRoute']);
myRoute.config(function($routeProvider){
$routeProvider
.when('/',{
template:'Welcome to Home'
})
.when('/NewPage',{
template:'This Is New Page Task'
})
otherwise('/',{
redirectTo:'/'
});
});
The order of references should be,
<script type="text/javascript" src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "route/one"
})
.when("/one", {
templateUrl: "route/one"
});
});
templateUrl is the place where you define your view is...In here my view(one.cshtml) is in route folder. Try the following example. Its working example.
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
<script>
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/AddNewOrder', {
templateUrl: '/viewStudents.html',
controller: 'AddOrderController'
})
.when('/ShowOrders', {
templateUrl: '/Home.html',
controller: 'ShowOrdersController'
})
.otherwise({ redirectTo: '/viewStudents' });
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
</script>
angularjs route not working properly . first page show other page not switch the view . here is the code
script.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/About", {
templateUrl: "About.html",
})
.when("/contact", {
templateUrl: "contact.html",
});
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome Home</title>
</head>
<body ng-app="myApp">
<p>Main</p>
About
contact
<h3> welcome to the page</h3>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="script.js"></script>
</body>
</html>
home.html
<h1>Welcome Home </h1>
About.html
<h1>Welcome About </h1>
contact.html
<h1>Welcome Contact </h1>
Also be careful about dependency injection.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/About", {
templateUrl: "About.html",
})
.when("/contact", {
templateUrl: "contact.html",
});
$locationProvider.html5Mode(true);
}]);
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>
I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?
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
});