ng-route not working with TemplateURL - javascript

i'm trying to set up the first example linked here:
https://www.w3schools.com/angular/angular_routing.asp the example that contains the colors.
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
If i used template and put HTML in, it works completely fine but when ever I use templateUrl(i do have all of the .htm files set up) it can never find the .htm pages.
My directory is setup as
C:\Users{User}\Documents\ng-Route and all of the .htm files are children of the ng-route folder.
Whenever I click a link, the url goes from:
...ng-Route/index.html#!
to
ng-Route/index.html#!/green
but the partial view doesn't get displayed.
Any help would be dearly appreciated.

Related

AngularJS routing in codepen

https://codepen.io/a_shokn/pen/yEJpww?editors=1010
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html'
})
.when('/second',{
templateUrl:'second.html'
})
});
Here is the Link to my Code Snippet , My Question is Were Must we keep our files (in my case main.html and second.html) when using routing in anjular js
As per my understanding, codepen doesn't support adding multiple files. You may try moving your code to plunker instead. Alternatively, you can try to use inline templates in the HTML. For example, to have main.html resolved, you may write this snippet in the HTML:
<script type="text/ng-template" id="main.html">
// contents of main.html
</script>
This will make AngularJS resolve the template using this script tag. You can find a working demo of your code here.

change ngview from within function

I am using templates to build my app. Basically have one main page, and then I am loading others pages thru it using ng-view. The href links in the index.html work fine. But I also want to be able to change ng-view within js functions as well. How is this done?
I tried to go to the red page using $location.path, but nothing seems to happen besides printing to the console. Before that i tried using $window.location.href(), which did go to the page, but dropped the index.html container, breaking the app.
edit:
As pointed out in Siddhesh's answer comments, it works if not used with $locationProvider.html5Mode(true);. But I would like to keep clean urls. So I'm looking for a way to keep it, IF that's possible.
index.html
<head>
<base href="/testing/onetest/">
<script>
app.controller('masterController',function($location){
setTimeout(change, 3000);
function change() {
console.log("changing in 3 seconds");
$location.path('/red');
}
});
</script>
</head>
<body ng-app="app" ng-controller="masterController">
Main
Red
Green<br>
<div ng-view></div>
</body>
app.js
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html",
controller : 'mainController'
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
});
$locationProvider.html5Mode(true);
});
For angular js version less than 1.6
$window.location.href= '#red';
For angular js version 1.6 or more
$window.location.href= '#!red';
Try this and see if it works. This might help you to change the ng-view from function. It worked for me.

Angular ng-Route doesn't work in a very simple example

I am learning angular.js and found an example on w3c.school
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing
But when I try to test it it doesn't work,
I made two .htm files simply containing one word, for example "RED", or "GREEN". As simple as this example is I cannot get it to work. I think that it might be the libraries I am using
<!DOCTYPE html>
<html>
<!-- JavaScript Files -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<body ng-app="myApp">
<p>Main
</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl: "test.html"
}).when("/red", {
templateUrl: "red.htm"
}).when("/green", {
templateUrl: "green.htm"
});
});
</script>
</body>
</html>
In this case you are moving towards a page "red.htm" which,... Doesn't exist in your situation! The page is already there in the directory for W3School (http://www.w3schools.com/angular/red.htm for exmaple)
So what you need to do is to create a htm page called red.htm in the same directory and thus navigate to it using routing. If you want to make the same example copy the code of the page I linked and try to run it with both files on the same directory.
From the three files I was using (test.html, red.html, green.html) I finally noticed/understood that you mustn't self-reference the file you are writing the script in.
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/red", {
templateUrl: "red.htm"
}).when("/green", {
templateUrl: "green.htm"
});
});
</script>
Simply by removing the .when method for 'test.html' (which is the exact same file the code is in) the self-referencing stops, and the code is allowed to execute.

Multiple master page angularjs

I'm starting a new project and am going to be using angularjs.
The page structure is the follow:
/views
loginView.html
mainView.html
loginMaster.html
mainMaster.html
My problem is set the other master page(mainMater.html) after the login.
The routing function is follow:
mainapp.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/login', {
controller : 'loginController',
templateUrl : '/views/loginView.html'
}).when('/', {
controller : 'mainController',
templateUrl : '/views/mainView.html'
}).otherwise({
redirectTo : '/login'
});
}]);
AngularJS is great for single page applications, which means if you exit the context of javascript by loading an entirely new page, you'll have to setup the context again. I would recommend you to have just one master page (load the page from the server once and perhaps have something like:)
<html ng-app="myApp">
...
<body>
<div class="container" ng-view>
and keep changing the entire view within the ng-view context. Have the login screen, signed in experience, all of it in the same place.

AngularJS loading different views through routes

I want to display two pages, but use a base layout. I have it somewhat working with the following:
index.html
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div data-ng-view class="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="public/app.js"></script>
</body>
</html>
main.html
<div>
<h2> Hello! This is Main page </h2>
</div>
list.html
<div>
<h2> This is List page </h2>
</div>
app.js
var myApp = angular.module('myApp', []);
// Routing Setup
function myAppRouteConfig($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
otherwise({
redirectTo: '/'
});
}
myApp.config(myAppRouteConfig);
This somewhat works when I visit index.html and list.html, but two problems:
When I load index.html, bootstrap loads fine. But when I visit list.html, bootstrap doesn't load. In fact, looking at the html source in firebug, all the code from index.html isn't loaded. The container is missing, the script and css links are missing.
How do I load an actual index page? I have my main.html that I want to load when a user visits the root page, but index.html is the base layout that contains code that persists through all other views (ie, like header and footer etc). If I modify my app.js and set the templateUrl: 'main.html', it seems to still load index.html. Is AngularJS implicitly looking for index.html as the base template?
EDIT:
File structure:
-- server.js
-- public/
|-- index.html
|-- list.html
|-- main.html
|-- js
|-- app.js
Change your route to:
$routeProvider.
when('/', {
templateUrl: 'main.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
//if you need to use login page, add 1 more route
when('/login', {
templateUrl: 'login.html'
})
otherwise({
redirectTo: '/'
});
and put your index.html at the root directory (or any sub directory) of your web app, configure it as the default document.
Is AngularJS implicitly looking for index.html as the base template?
There is nothing related to angular here, this is the normal behavior of loading an html page from a web server.
Here is how it works:
When users access your application at the root url (e.x: http://example.com) or any sub directory (http://example.com/public), the index.html is loaded into browser like with normal web applications, then your app.js is run as normal. When the routes are registered and the application is bootstrapped, angular checks the route and loads main.html to be inserted into the container where ng-view is declared.
After digging around, it turns out my AngularJS route requires ngRoute, which is its own module now. After including it, it started to display the correct pages.

Categories

Resources