Saturday, March 1, 2014

I want to develop html5 SPA application for a thin client. There is no way to launch any web server on it. And I can't to make routing works without web server.
My index.html

    ng-app="app">

    
    
    
style="background-color: white;">

Index
id="link" href="/login">Go to login
ng-controller="HomeCtrl">
    ng-repeat="number in numbers" >
  • {{number}}
My app.js
angular.module('app', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller: HomeCtrl, templateUrl: 'index.html'}).
      when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
      otherwise({redirectTo:'/'});
  });

function HomeCtrl($scope) {
    $scope.numbers = [1,2,3,4,5];
}

function LoginCtrl($scope) {

}
I'm testing this code locally on my computer in Chrome. Data binding is working like a charm, but link to the login page isn't. It's leading to the {X}:\login. So my questions are: is it possible to make it works with out web server? And secondly what I'm missing to get it done?
share|edit
add comment

3 Answers

After a while, I made it works.
At first, I moved this piece into separate file
ng-controller="HomeCtrl">
    ng-repeat="number in numbers" >
  • {{number}}
Secondly, in index.html I've added this div
ng-view>
It is used as a view placeholder.
Now index.html is used as "master page" or "layout" if you are familiar with asp.net. When you clicking at the link, content of the templateUrl file is inserting into placeholder div.
A drawback of this is that url should looks like this 
share|edit
1 
this is standard angular approach. Go through tutorial on docs site –  charlietfl Mar 29 '13 at 11:20
 
Yeah, thanks. I got it now. –  Dantix Mar 29 '13 at 11:30
 
This didn't work out for me. Out of the above modifications you mentioned in your answer, what prevented the request to the server? For me the app didn't work without a web server. –  Andy Dufresne Jan 8 at 9:23
add comment
Angular is a client-side JS framework, so it doesn't need a web-server. Beside adding the ng-view (as you already figured out), you links need to have a hashbang in front (#/login), unless you're using html5mode.
So, having a hashbang in URLs is not a drawback, it's an option.
share|edit
add comment
Here some code from http://docs.angularjs.org/api/ng.$route
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
I think that same will work for you.
share|edit
 
Nope, I've tried this. I've got it working actually. I'll post answer in few minutes. –  Dantix Mar 28 '13 at 9:43 
add comment

5 comments:

for IT the said...

AngularJS is an incredible tool Angularjs Online Training development tricks and methods AngularJS Interview Questions AngularJS application Angularjs Training in Chennai Data Binding Angular.js Course Root Scope and Extending Scope Angularjs Training

oakleyses said...

jordan pas cher, chanel handbags, nike outlet, michael kors pas cher, kate spade outlet, replica watches, longchamp pas cher, nike free, jordan shoes, christian louboutin shoes, nike free run, louis vuitton outlet, oakley sunglasses, ray ban sunglasses, polo ralph lauren, ugg boots, christian louboutin uk, air max, louis vuitton outlet, ugg boots, tiffany jewelry, polo ralph lauren outlet online, burberry pas cher, prada outlet, nike air max, gucci handbags, sac longchamp pas cher, ray ban sunglasses, louboutin pas cher, louis vuitton, uggs on sale, tiffany and co, oakley sunglasses, louis vuitton outlet, ray ban sunglasses, longchamp outlet, louis vuitton, longchamp outlet, replica watches, nike roshe, polo outlet, oakley sunglasses, cheap oakley sunglasses, oakley sunglasses wholesale, christian louboutin, christian louboutin outlet, tory burch outlet

oakleyses said...

lululemon canada, nike air max, burberry outlet, oakley pas cher, burberry handbags, coach outlet store online, kate spade, michael kors outlet, michael kors, nike air force, true religion jeans, true religion outlet, michael kors, polo lacoste, nike tn, new balance, abercrombie and fitch uk, michael kors outlet, uggs outlet, michael kors outlet, ralph lauren uk, michael kors outlet online, replica handbags, coach outlet, true religion outlet, coach purses, nike free uk, sac vanessa bruno, mulberry uk, michael kors outlet online, michael kors outlet online, michael kors outlet online, north face, uggs outlet, converse pas cher, hogan outlet, nike air max uk, hollister pas cher, sac hermes, nike roshe run uk, hollister uk, nike air max uk, true religion outlet, timberland pas cher, vans pas cher, ray ban pas cher, guess pas cher, ray ban uk

oakleyses said...

ipad cases, beats by dre, iphone 6 cases, ferragamo shoes, wedding dresses, hollister clothing, p90x workout, instyler, asics running shoes, nike huaraches, hermes belt, north face outlet, s6 case, babyliss, nfl jerseys, hollister, iphone 6 plus cases, insanity workout, ralph lauren, iphone cases, iphone 6s plus cases, bottega veneta, new balance shoes, longchamp uk, iphone 6s cases, giuseppe zanotti outlet, nike roshe run, mont blanc pens, herve leger, oakley, lululemon, timberland boots, nike air max, iphone 5s cases, ghd hair, valentino shoes, louboutin, nike trainers uk, celine handbags, north face outlet, baseball bats, vans outlet, abercrombie and fitch, chi flat iron, soccer jerseys, mac cosmetics, mcm handbags, soccer shoes, jimmy choo outlet, reebok outlet

oakleyses said...

supra shoes, marc jacobs, canada goose, converse outlet, toms shoes, ugg uk, ugg pas cher, canada goose outlet, canada goose, nike air max, louis vuitton, karen millen uk, doudoune moncler, converse, louis vuitton, vans, gucci, montre pas cher, moncler outlet, canada goose uk, canada goose outlet, moncler, pandora jewelry, barbour uk, moncler outlet, juicy couture outlet, louis vuitton, canada goose, pandora uk, coach outlet, swarovski crystal, ugg,uggs,uggs canada, juicy couture outlet, links of london, louis vuitton, louis vuitton, hollister, swarovski, canada goose outlet, ray ban, moncler, ugg, barbour, ugg,ugg australia,ugg italia, replica watches, pandora charms, moncler uk, pandora jewelry, wedding dresses, canada goose jackets, hollister, lancel