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>
Related
I'm not sure how can I implement proper Angular routing in web api application. I'm able to open the pages using this approach: http://localhost:52876/HTML/app/borrower.html
The Angular controller loads fine and all functionality is there from the angular side.
Now, I want to be able to open the views in a bit better view, using ng-route, so for example http://localhost:52876/HTML/app/borrower.html will become http://localhost:52876/borrower.
I included the ng-route.js file in the html files which I'm using in my angular app.
Also in app.js I have this:
'use strict';
var modules = [
'app.controllers',
'LoanAdminApplicationController',
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.router',
'LocalStorageModule',
'angular-loading-bar'
];
var app = angular.module('app', modules);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/app/views/home.html"
});
$routeProvider.when("/login", {
controller: "loginController",
templateUrl: "/HTML/login.html"
});
$routeProvider.when("/signup", {
controller: "signupController",
templateUrl: "/app/views/signup.html"
});
$routeProvider.when("/register", {
controller: "signupController",
templateUrl: "/app/views/register.html"
});
$routeProvider.when("/refresh", {
controller: "refreshController",
templateUrl: "/app/views/refresh.html"
});
$routeProvider.when("/tokens", {
controller: "tokensManagerController",
templateUrl: "/app/views/tokens.html"
});
$routeProvider.when("/borrower", {
controller: "borrowerController",
templateUrl: "/HTML/app/borrower.html"
});
$routeProvider.otherwise({ redirectTo: "/home" });
});
The html markup (I removed the content):
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body ng-controller="BorrowerQuickQuoteApplication">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/modernizr.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-cookies.min.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-sanitize.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Angular/controllers.js"></script>
<script src="/Angular/LoanApplicationController.js"></script>
<script src="/Angular/services.js"></script>
<script src="/Scripts/angular-local-storage.min.js"></script>
<script src="/Scripts/loading-bar.min.js"></script>
<script src="/Angular/app.js"></script>
</body>
</html>
Any idea what I need to do in order to make this working?
Should I modify the RouteConfig.cs file or I need to do anything else as well?
You don't navigate with the file name as you are doing that's angular route job to do for example
$routeProvider.when("/borrower", {
controller: "borrowerController",
templateUrl: "/HTML/app/borrower.html"
});
when you go to localhost:8080/yourapp/borrower
and you need ng-view in your index.html
Like this
<div ng-view></div>
your pages will be shown here.
router will look that you are requesting for the borrower and it will take you to the /HTML/app/borrower.html
You are using html five mode that means you need server side routing to so it can fall to index.html every time so your url can be without hash.
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.
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
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
I am using angular.js. I have created app.js file where i entered the code as:
angular.module('polls', ['pollServices'])
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider
.when('/polls', { templateUrl: 'partials/list.html', controller: PollListCtrl })
.when('/poll/:pollId', { templateUrl: 'partials/item.html', controller: PollItemCtrl })
.when('/new', { templateUrl: 'partials/new.html', controller: PollNewCtrl })
.otherwise({ redirectTo: '/polls' });
}]);
but when i run the code, it gives the error as:
angular.module('polls', ['pollServices']
^
ReferenceError: angular is not defined
Your main html file, normally index.html should look like this.
<!DOCTYPE html>
<html ng-app="polls">
<head>
<title>Website</title>
<!--<script src="js/libs/jquery.js"></script>-->
<script src="js/libs/angular.js"></script>
<script src="js/polls.js"></script>
</head>
<body ng-controller="mainController">
</body>
</html>
PS: Relating to your last comment AngularJS is not a language, but a JavaScript framework.