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.
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
Disclaimer: Yes, I have read many other posts, but haven't been able to find the solution.
So, I have set up a basic Angular app:
index.html
<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="navbar">
Home
About me
Projects
Contact
</div>
<div ng-view></div>
</body>
</html>
app.js
var myApp = angular.module('sampleApp', ['ngRoute']);
myApp.config(
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/main.html'
}).
when('/aboutme', {
templateUrl: 'views/aboutme.html'
}).
when('/projects', {
templateUrl: 'views/projects.html'
}).
when('/contact', {
templateUrl: 'views/contact.html'
}).
otherwise({
redirectTo: '/'
});
}
);
When I start the server (npm install http-server followed by http-server -o) and run the app, I can see the main.html content and the navigation links. The URL is http://127.0.0.1:8080/#!/. When I click e.g. Projects, the URL becomes http://127.0.0.1:8080/#!/#%2Fprojects, but the page content is still the same (navigation links + main.html's content).
I have also tried modifying app.js like this:
...
myApp.config(['$routeProvider',
function($routeProvider) {
...
}]);
...but the outcome is the same.
What am I doing wrong?
it seems to be working fine. And as mention in the comments need to check the angular version. i create a sample Plunker
<script data-require="angular.js#1.5.10" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script data-require="angular-router#1.2.0-rc1" data-semver="1.2.0-rc1" src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
I am making a simple angular application (I have worked with angular a bit before), but I have encountered an error which I can't seem to get rid of. This is what the application is as of now -
<!DOCTYPE html>
<html ng-app="moduleName">
<head>
<base href="/">
<title>Altigreen</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
Where, my app.js is this -
angular.module('moduleName', ['ngRoute'])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
});
}]);
And my home.html is just one line of text, so that's that. But I get this error everytime I try to load the page. It says failed to load module and displays a blank page.
Help will be appreciated, thanks!
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
Ok this is my first attempt at this. Trying to get my page to load. my App.js file has all the nessities I hope. here are my files below:
Index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo List</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
App.js:
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
List.html:
<h1>Hello: {{test}}</h1>
I am currently running the Localhost server via Visual Studio 2013. Please Help, Thanks!
You would need to include ngRoute inorder to use angular routing. So include ngRoute in your module as a dependency.
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(.....
Also remember to include angular-route.js unless you are using very old version of angular that comes with routing as well. You can refer to the cdn http://code.angularjs.org/x.y.z/angular-route.js or download the file.
Plnkr