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 ?
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>
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>
When I navigate to the home/index page via the "Home" link, the page in SPA-style correctly switches the content initially, but then half-a-second later the page refreshes. This does not happen when I navigate to my "Second" page via the same navbar, only when navigating from my Second page to home.
I'm new to Angular so my apologies if I'm missing something blatantly obvious. I've also included my local server code as I'm wondering if that may be the source of the problem...
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Intro to Angular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
<script src="app.js"></script>
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">jQuery</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
</html>
main.html
<h1>This is main.</h1>
<h3>Scope value: {{ name }}</h3>
second.html
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
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'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = "Main";
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
console.log('Server running on 8080...');
});
Your home link is a standard link to /index.html. Links using angular-route should start with a hash (#) to prevent the browser from navigating away from the page. The solution in this case is to use #/ instead of /index.html
I am new to angularjs and these are the files I have created.
I have tried my best but could not run the above code.
myApp(Folder)
- app.js
- controller.js
- index.html
- phone-detail.html
- phone-list.html
The Home page is the phone-list.html and when clicked on a phone routes to a phone-detail.html page.
app.js
var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider']);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
controller.js
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope',
function ($scope) {
$scope.phones =
[{"Device":"ipad mini","Model":"MD528LL/A"},
{"Device":"ipadair","Model":"MD785LL/A"}]
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.Model = $routeParams.Model;
}]);
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="controller.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
phone-list.html
<div class="mainContent" style="margin:5%">
<li ng-repeat="phone in phones" style="float:left; margin:40px" >
<md-content style="padding:0px; overflow-y: hidden">
<md-card style="width:300px; height:300px; margin:0px" >
<img ng-src="{{phone.image}}" class="md-card-image" style="height:40%" alt="image caption" >
<md-card-content style="padding:0; height:25%">
<h6 class="md-title">{{phone.Device}}</h6> <hr style="opacity:0.5">
</md-card-content>
<md-card-footer class="md-actions" layout="row" layout-align="center" style="padding:0">
<md-button class="md-raised">Action 1</md-button>
<md-button class="md-raised">Action 2</md-button>
</md-card-footer>
</md-card>
</md-content>
</li>
</div>
phone-detail.html
{{phone.Device}}
You should inject ngRoute module instead of $routeProvider in :
var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider'])
Also make sure you included the sources of angular-route.js as angular routing is separated from angular sources.
Edit: From the index.html you posted I see you included angular-route.js but it appears you are missing the script of angular-material, so be sure to add :
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
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