I have a simple test app that uses ng-view. It works perfectly whey I access
it through a web server. However, when I try to open the main page
from my local drive the views appear to stop working. I suspect that the path to
the views cannot be found and therefore cannot display, however when using $location to
confirm the path, it seems to be correct.
Other data bindings are working on the page, so Angular seems to be loading and running
correctly.
JAVASCRIPT:
var app = angular.module("MyApp", []);
app.config(function ($routeProvider) {
$routeProvider
.when("/item/:Id",
{
templateUrl: "partials/itemdetail.html",
controller: "itemController"
})
.when("/items",
{
templateUrl: "partials/items.html",
controller: "itemsController"
})
.when("/",
{
templateUrl: "partials/items.html",
controller: "itemsController"
})
.otherwise({ redirectTo: '/' });
});
HTML:
<html data-ng-app="MyApp">
<head>
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</head>
<body data-ng-controller="itemsController">
<img src="{{Logo}}" width="300" />
</br>
<div data-ng-view></div>
</body>
</html>
Opening a file directly in your browser causes it to have no domain. As a result, trying to retrieve files via AJAX (such as your templates) results in a domain security exception. Trying running a local server in your directory.
If you're on a mac, open terminal, navigate to your directory and type:
python -m SimpleHTTPServer
Related
started out playing with angular today. So totally noob with the issue. I've found tons of similar questions but nothing seems to help so I decided to try with my own question.
My problem is with routing. I have two views (or partials). My first view (default) loads nicely when I browse to my page. When clicking the link that should open my second view the URL changes but nothing happens. If I then hit browser refresh button the view loads.
Index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="js/angular_route.js"></script>
<script src="js/angular_animate.js"></script>
<script src="js/angular_cookies.js"></script>
<script src="js/app.js"></script>
</head>
<body style="padding:10px;" ng-app="rispa">
<div ng-view></div>
</body>
</html>
app.js
var rispa = angular.module("rispa", ['ngRoute', 'ngAnimate']);
rispa.config(function ($routeProvider) {
$routeProvider
.when('/welcome',
{
controller: 'rispaController',
templateUrl: 'partials/welcome.html'
})
.when('/accounts',
{
controller: 'rispaController',
templateUrl: 'partials/accounts.html'
})
.otherwise({ redirectTo: '/welcome' })
});
rispa.controller('rispaController', function($scope) {
$scope.title = "Home Page";
});
welcome view(default)
<div class="container">
<h1>Welcome!!!</h1>
get accounts
</div>
accounts view
<div class="container">
<h1>accounts</h1>
back to welcome
</div>
I've got a WAMP server on Windows 10 where I run the app. I also tried to publish to a azure webapp but the view did not refresh there either. I had to click the browser refresh button so it shouldn't be a web server issue...
Working Plunker: http://plnkr.co/edit/aCpOumYzy94ATMXiA5KR?p=preview
The routing has been set up correctly but you did not add the reference to the controller for the view. Also, you would need the dependency file for ngAnimate in the main view.
<div data-ng-view="" data-ng-controller="rispaController" ></div>
I am still pretty new to coding so here goes a simple question. I am having some problems with angular ui-router. I am using Angular with Firebase. I created an index.html with to render my views. Then I assigned home.html and music.html in my states via app.config like so...
var app = angular.module('launchPage', ["ui.router","firebase"]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'FirstCtrl'
})
.state('year', {
url: '/year/{year}',
templateUrl: 'music.html',
controller: 'FirstCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
........
Now I was unsure why I couldn't get the templates to render. I thought maybe I needed a server so I installed node and http-server but as I made updates, they were not reflected after killing the server and restarting. I also just tried opening the index.html directly but that did not work either.
Here is my index.html as well
<html>
<head>
<title>Music App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="launchPage">
<div>
<ui-view></ui-view>
</div>
</body>
</html>
Is there some blatant point im missing besides not knowing if I need a server running? I feel like this should be a two second problem.
I want to be able to quickly build an AngularJS application using ui-router without having to set up a server. So that I can send this folder to anyone and the application will still work.
I have tried putting a # infront of the route as adviced here. I have also tried to follow other advice related to the ngroute, but nothing seems to work and since I want to use ui-router rather than ng-route I'm not sure whether the advice is even applicable to my situation.
I have also tried to create a manifest file to store the files offline according to this page.
In firefox it kind of works but for some reason it double up what is on the index.html page. But in chrome which is my preferred browser it doesn't work at all. I get an error about a failed ajax call; why don't the manifest file download all pages straight away?
How should I accomplish building an AngularJS app with ui-router without needing a server?
Here is simple snippet of my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" manifest="mycache.manifest">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<a ui-sref="home.messages">Messages</a>
<div ui-view></div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/routes.js"></script>
<script src="js/main.js"></script>
</body>
</html>
messages.html
<button ng-click="contextCtrl.getAllMessages()">Get Messages</button>
<div ng-repeat="message in contextCtrl.messages">
{{message}}
</div>
routes.js
'use strict';
angular.module('app', ['ui.router']);
//Setting up route
angular.module('app').config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'ContextCtrl',
controllerAs:'contextCtrl'
})
.state('home.messages', {
url: '/messages',
templateUrl: 'messages.html',
controller: 'ContextCtrl',
controllerAs:'contextCtrl'
});
}
]);
main.js
'use strict';
/*jslint latedef:false*/
//Controller declaration
angular.module('app').controller('ContextCtrl', ContextCtrl);
function ContextCtrl() {
var vm = this;
vm.messages = [];
vm.getAllMessages = getAllMessages;
function getAllMessages(){
vm.messages = ['m1', 'm2', 'm3', 'm4'];
};
}
mycache.manifest
CACHE MANIFEST
js/main.js
js/routes.js
messages.html
bower_components/angular-ui-router/release/angular-ui-router.js
bower_components/angular/angular.js
Whenever I manually enter a url into my browser to a site built with Angular, I get:
'HTTP 404
The resource cannot be found
Requested URL: /register'
The only navigable url is http://localhost:XXXX/index.html, from there I have to navigate around the site with anchor tags.
My config file for Angular looks like this:
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
//.hashPrefix('!')
$routeProvider
.when('/', {
templateUrl: '/Client/AngularViews/home.html'
})
.when('/register', {
templateUrl: '/Client/AngularViews/register.html',
controller: 'registerController'
})
.when('/post-register', {
templateUrl: '/Client/AngularViews/postRegister.html',
controller: 'registerController'
})
.otherwise({ templateUrl: 'Client/AngularViews/home.html' });
});
Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/mainController.js"></script>
<base href="/" />
</head>
<body>
<div class="container-fluid">
<div ng-view></div>
</div>
Can someone explain to me what I'm doing wrong? I want to be able to manually enter urls into the address bar and navigate to anything other than index.html
According to documentation:
Server side
Using this mode requires URL rewriting on server side,
basically you have to rewrite all your links to entry point of your
application (e.g. index.html). Requiring a tag is also
important for this case, as it allows Angular to differentiate between
the part of the url that is the application base and the path that
should be handeled by the application.
https://docs.angularjs.org/guide/$location
So you need some additional support from server-side: configure your http server to reply with index.html for all url you have in your apps.
I use ASP.Net MVC for server side URL rewriting using controllers. Probably not its intended use but works well
I'm trying to get into angularJS by writing the most basic app. However I'm unable to get even this small amount of code working - the controller doesn't seem to be displaying any of the views. This is almost a direct copy from a popular angularjs video I saw online. I have a feeling its not something big, and my guess is that I possibly have something wrong with the ng-view.
Any insight on what I'm doing wrong would be helpful.
index.html
<!doctype html>
<html ng-app="fastsql">
<head>
</head>
<body>
<div class="well">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="fastsql.js"></script>
</body>
</html>
fastsql.js
// setup fastsql as angular app "module"
var fastsql = angular.module("fastsql", []);
// set routeProvider rules in .config()
fastsql.config(function($routeProvider) {
// set what views are displayed for each change in the URL.
$routeProvider
.when("/", { controller: 'loginCntl', templateURL: 'test.html' })
.otherwise({ redirectTo: '/' });
});
// controllers
fastsql.controller("loginCntl", function($scope) { $scope.message = "hey"; });
templateURL should have been templateUrl.
you need to pass an array into the config function, the name of the services to injected, and then the function in to which they are injected.
fastsql.config(["$routeProvider", function($routeProvider) {
// do your thing
}]);