Writing a very simple angular js app to learn routes and partials. The problem is that my would just not load the partial template at all.
index.html
<!DOCTYPE html>
<html ng-app="website">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script type="text/javascript" src="../js/website.js"></script>
</head>
<body>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/login'>Login</a></li>
<li><a href='/about'>About</a></li>
</ul>
<ng-view></ng-view>
</body>
</html>
website.js
angular.module('website', ['ngRoute']).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/about', {templateUrl: 'partials/about.html'}).
when('/login', {templateUrl: 'partials/login.html'}).
otherwise({redirectTo:'/'});
$locationProvider.html5Mode(true)
});
When I load index.html, it shows the links. When I click on one of the them, or go manually to #/about, it should load the contents of the template inside ng-view, but it doesn't.
The about.html and login.html are just two files with a single tag in them with Hello World text. What am I missing? I was earlier not including angular-route.js, but fixing that didn't work.
My directory structure goes like this:
views
--js
--website.js
--views
--index.html
--partials
--about.html
--login.html
The network says that it did GET about, but brings me back to index.html without anything in ng-view
Related
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
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 am new to angular.js and just trying to get my head around the basics and hopefully this is something simple, but I am having trouble loading in a templateUrl.
My index.html is as follows:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Tutorials</title>
</head>
<body>
<div ng-app="app">
<h1>Introduction to Angular.JS</h1>
<div ui-view></div>
</div>
<!-- Scripts -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js is:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html'
})
}])
My home.html is: <h1>home template</h1>
So I dont know why this isn't working, but the error is:
XMLHttpRequest cannot load file:///Users/code/Desktop/angular/templates/home.html. Cross origin requests are only supported for HTTP.
Thanks in advance, Gab
This error comes due to a security restriction put by the browser. You can try below steps:
Try to run your code in some other browsers
Add the templates inside index.html itself by placing the content inside script tag. These script elememts should appear after ng-app. (ref link)
<script type="text/ng-template" id="home.html">
Content of the template goes here
</script>
First thing you use <ng-view> </ng-view> for loading your templates. and second is use <script type="text/ng-template" id="home.html"> for you each partial view. third thing is not mandatory but use otherwise at last that makes sense. Here is fiddle for you check it out
fiddle
If you want to run your page locally, I suggest you install a http-server and run it in there ...
Then you avoid CORS issues like that
Example:
with node.js installed
cd ~/myProjectFolder
npm i http-server
http-server ./
Then you could also just enter localhost:8080 in your browser and wouldn't have to point it to some URI/folder
I'm building a desktop application with node-webkit and angular. I have been using version 1.0.7 of angular, but I need to update to take advantage of improvements to the framework. Unfortunately, the new ngRoute module doesn't seem to be working properly whereas I had no problems with routing previously.
Using the angular-seed boilerplate as an example, when the app loads up it shows view1, but clicking on the links for view1 and view2 has seemingly no effect. I have verified it works fine when served as a webpage in a browser, but in the node-webkit environment it fails.
I did discover that if I comment out the otherwise option for $routeProvider that the address bar shows index.html#/C:/view1 instead of app/index.html#/view1, and of course then neither view1 nor view2 is shown, and clicking on the view1 and view2 links still has no effect. It seems that the links are possibly being interpreted incorrectly? If so, how should they be formatted? I've played around with a bunch of combinations to no effect.
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
I got it to work. I used the same strategy used in the Angular documentation to make the ngRoute example code work in plunkr. I can't say I exactly understand why it didn't work using the stock angular-seed configuration. If anyone has insight, I'd like to hear it.
The modified index.html and app.js files should look like this:
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
// configure html5 to get links working on node-webkit
$locationProvider.html5Mode(true);
}]);
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script type="text/javascript">
//this is here to make node-webkit work with AngularJS routing
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Note that in this mode, index.html is no longer part of the URL, so if you reload, nw tries to reload a file that doesn't exist (e.g. /path/to/app/view1). You need to manually update it to /path/to/app/index.html. It would be nice if you could make nw go back to the main page on reload, but I so far don't see an option for making that happen.
Late breaking news: It was due to a bug in Angular 1.2.0, which has since been resolved. The angular-seed simply has not yet been updated to the most recent version.
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'});
});