I am learning angular js for a project i'm building.
So far it seems like a great framework, very helpful and intuitive,
but i am having problems whenever i try to implement routing...
I have this code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });
});
app.controller('HomeController', function ($scope) {
$scope.people = [
{
name: "Arik",
age: 19
},
{
name: "Bar",
age: 19
}
];
});
</script>
</head>
<body>
<div data-ng-view></div>
</body>
</html>
and home.html:
<ul>
<li data-ng-repeat="person in people">
<b>{{ person.name }}</b> - {{ person.age }}
</li>
</ul>
The problem is that it just doesn't work, the page shows blank.
I tried searching in the official documentation but nothing helped...
What am i doing wrong?
By the way, i am using the latest version, 1.4.4
Thanks,
Arik
I just tested your code here and works fine, probably the issue is in your path to home.html or your web server or something similar, look at your environment.
Try out grunt-connect to create a web server while you are developing, it's very helpful
Also i recommend you to use ui-router, is much more simple. Here is a working template for routing with ui-router in plunker
Your code looks great, and the prove is that it works take a look at this,
I would recommend you to load the scripts after the html, so you don't keep the user looking at a blank page till the file is downloaded.
Related
I'm just learning AngularJS and I can't seem to get routing working no matter what I do, even copying examples verbatim.
I'm basing it off the examples provided on W3Schools, such as:
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_template
The page I built is:
<!Doctype html>
<html data-ng-app="SUApp">
<head>
<link rel="stylesheet" type="text/css" href="SUStyleSheet.css" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="SUApp.js"></script>
</head>
<body>
<div id="Menu">
<ul>
<li>Create a new box</li>
</ul>
</div>
<div data-ng-view></div>
</body>
</html>
SUApp.js is:
var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
$routeProvider
.when('/',
{
templateURL:'index.html'
})
.when('/box',
{
templateURL:'box.html'
})
.otherwise({redirectTo: '/'});
});
Box.html:
<div class ="box">
<p>Hello World</p>
</div>
I've gone over it with a fine-toothed comb and I can't find anything technically wrong (which doesn't necessarily mean there isn't). What's really strange, though, is that even if I copy and paste the W3Schools example, it still doesn't work in any browser I've used (Chrome and IE).
Other AngularJS features have worked on the above page and module, for example if I remove the config and add in an controller. It's the config and routing in particular that are conking everything up.
You are missing a '/' in the view,
<ul>
<li>Create a new box</li>
<li>Home</li>
</ul>
Here is the working Plunker
You might need a route without the /.
var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
$routeProvider
.when('',
{
templateURL:'index.html'
})
.when('/',
{
templateURL:'index.html'
})
.when('/box',
{
templateURL:'box.html'
})
.otherwise({redirectTo: '/'});
});
This is common when using UI router, and I think I had the same problem with the basic Angular router.
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 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
Everything worked fine until I tried to add routing. I read that Angularjs version 1.2+ requires 'ngRoute' as an dependency (I am using version 1.2.16). I added it but it still doesn't work. Below are my codes.
test.html (Main Page)
<html ng-app="demoApp">
<head>
<title></title>
</head>
<body>
<p>Front Page</p>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="testjs.js"></script>
</body>
</html>
testjs.js
demoApp = angular.module('demoApp',['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: 'SimpleController',
templateUrl: '/partials/first.html'
});
});
var controllers = {};
controllers.SimpleController = function ($scope){
$scope.first = "Info";
$scope.customers=[
{name:'jerry',city:'chicago'},
{name:'tom',city:'houston'},
{name:'enslo',city:'taipei'}
];
};
demoApp.controller(controllers);
first.html
<div>
<input type="text" ng-model="name"/>
</br>
{{first}}
</br>
<ul>
<li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
Here is the most basic setup possble, I'll try to make another one with your code:
http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview
EDIT updated with the sample code. Everything seems to be working?
EDIT 2 the problem is OP wasn't running a webserver. Ng-Route needs a webserver to function properly.
My routing wasn't working because there was an exclamation point inserted in the url when I tried to navigate to my routes. I added $locationProvider like this
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
to remove the exclamation point and my template views started appearing when I navigated to them. I found the answer here Exclamation mark after hash (#!) in angularjs app
I have
<!DOCTYPE html>
<html lang="en" data-ng-app="myCustomApp">
<body>
<div id="body">
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="/Js/app.js"></script>
<script src="/Js/controllers/controllers.js"></script>
</body>
</html>
With the following
app.controller('SearchController', function ($scope) {
init();
function init() {
alert("called");
}
});
and the app declared like below:
var app = angular.module('myCustomApp', []);
app.config(function($routeProvider) {
$routeProvider
.when('/search',
{
controller: 'SearchController',
templateUrl: '/js/partials/Search.html'
})
.otherwise({ redirectTo: '/search' });
});
The problem is that the page when browsing to the following it keeps refreshing the page like it's in a loop. Any ideas?
/#/search
var app = angular.module('myCustomApp', ['ngRoute']);
Routing is not native in angular you need to add it in as a module.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js
This is the CDN for the script for it. I'd really suggest having a look at ui-router works very similarly but uses state or states to manage either the view or sections of the view.
https://github.com/angular-ui/ui-router
The documentation is really good and there are some great examples around.