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
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 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
I'm new on AngularJS and I'm trying to figure out how to get clean URLs on my localhost server (it's a basic LAMP).
The problem is that if I wanna reach localhost/login it works just if I create a link in the index.html (using angular-ui-router). If I try to reach the same URL typing it in the browser's address bar, I get the "404 Not Found" error.
Here the code...
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>test</title>
<base href="/">
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
<a ui-sref="login" ui-sref-active="active">click me</a>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/MainController.js"></script>
</body>
</html>
app.js
(function() {
angular.module("test", ['ui.router'])
.config(function($stateProvider,$urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url:'/login',
templateUrl:'login.html'
});
});
})();
MainController.js
(function() {
angular.module("test")
.controller("MainController", function($scope){
$scope.message = "Homepage";
});
})();
login.html
<h2>/login page</h2>
Any help?
I have an app with angularjs + gae (Java). In my index.html, I have an UI-view. When I show source code from index.html, it's ok:
<html>
<head> //some contents </head>
<body>
<div ui-view></div>
</body>
</html>
But when I go to other page, It shows the same code.
How to show other page code?
ex: http://mysite.appspot.com/about
<html>
<head> //some contents </head>
<body>
<div> //about html code </div>
</body>
</html>
Specify the view to load from your routes.js.
ex.
angular.module('website', []).
config(function ($routeProvider) {
$routeProvider.
when('/about', {templateUrl: 'about/index.html', controller: 'AboutCtrl'});
});