I can't get my angular app to route without changing the web page. I'm trying to get the page to change without refreshing and appear in the ng-view, but instead the console is throwing errors. See pastebin for errors http://pastebin.com/kTYwviSv
app.js
var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1.html', {
templateUrl: 'page1.html'
})
.when('/page2.html', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
index.html
<!DOCTYPE html>
<head>
<title>Testing Angular On My Own</title>
</head>
<body ng-app="myApp">
{{"Hello"}}
<br>
<br>
<a ng-href="page1.html">Page 1</a>
<a ng-href="page2.html">Page 2</a>
<div ng-view></div>
<script src="bower_components/bower-angularjs/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
page1.html
This is Page 1
page2.html
This is Page 2
Related
While i am trying to click on first and second page its not showing any thing, i have wasted lot of time on this but no output is coming, Files script.js index.html first.html and second.html
script.js
angular.module('RoutingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {
$routeProvider
.when('/first', {
templateUrl: 'first.html'
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({
redirectTo: '/'
});
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="RoutingApp">
<h2>AngularJS Routing Example</h2>
<p>Jump to the first or second page</p>
<div ng-view>
</div>
</body>
</html>
first.html
<h2>This is the first page.</h2>
second.html
<h2>This is the second page.</h2>
Anchor(a) tag needs to be changed to match them with route URL. Those should have / in them.
first
or
second page
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
I'm trying to get the templates to change without refreshing the page. I'm not sure what's wrong with the code since the console is blank until I click Page 1 or Page 2 Link
then I get this error in console. http://pastebin.com/J3Y5NauN
It should just view the template in div ng-view without refreshing.
app.js, index.html, page1.html, and page2.html are all in the same directory also.
Any ideas?
index.html
<!DOCTYPE html>
<head>
<title>Angular Test</title>
</head>
<body ng-app="myApp">
{{"Hello"}}
<br>
<br>
<a ng-href="page1.html">Page 1</a>
<a ng-href="page2.html">Page 2</a>
<div ng-view></div>
<script src="bower_components/bower-angularjs/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('page1.html', {
templateUrl: 'newtest/page1.html'
})
.when('page2.html', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
page1.html
This is Page 1
page2.html
This is Page 2
I can't get $routeProvider to work correctly anymore. I got a skinned down version of the situation as a Plunker see:
http://plnkr.co/edit/7G9WnT5i4qA01icAUAY5?p=preview
This is app.routes.js
angular.module('app.routes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller: 'homeController'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
It should load the template home.html but nothing happens.
I am using angular-route after angular and using ng-view in the index.html.
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#2.0.0-alpha.31" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="app.routes.js"></script>
<script src="homeCtrl.js"></script>
</head>
<body ng-controller="homeController">
this is the index.html page
<div ng-view> </div>
</body>
</html>
I have been going cross-eyed staring at this for a hour or more and can't see where the problem is.
Please check working demo: Plunker.
Modifications done:
Change angular version to 1.3.8
Add module dependency:
var MyApp = angular.module('testApp', ['app.routes']);
Remove homeController everywhere since it is not defined.
I checked this
AngularJS 1.2 $injector:modulerr but it didnot solve my problem
You can find my example here
http://jsbin.com/ziroq/1/edit?html,js,console
<html ng-app="app">
<head></head>
<body>
<h1>example 8</h1>
<p>Changing views with routes and $routeProvider</p>
<p>you need angular-routes.min.js file to use $routeProvider</p>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('list', {
controller: MyController,
templateUrl: '/example-08-list.html'
});
});
</script>
</body>
</html>