I have started working in angular js recently. I tried to show the content of the page using ng- view but it shows nothing. It shows content when I put all data in one page i.e., index.html
index.html
<html ng-app="customersApp">
<head>
<title>
Iterating over Data
</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="animate.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div ng-view></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/customersController.js"> </script>
</body>
</html>
app.js:
(function(){
var app= angular.module('customersApp',['ngRoute','ngAnimate']);
app.config(function($routeProvider)
{
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'customers.html'
})
otherwise({ redirectTo: '/' });
});
}());
customersController.js:
(function(){
var CustomersController = function ($scope){
$scope.sortBy = 'name';
$scope.reverse = 'false';
$scope.customers= [{joined:'2000-12-02',name:'Prince',city:'sitamarhi',ordertotal:9.9956},{joined:'2000-12-03',name:'Pinku',city:'kendrapara',ordertotal:9.9856},{joined:'2000-12-04',name:'Amit',city:'sambalpur',ordertotal:9.9756}];
$scope.doSort = function(propName){
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
}());
I am not getting where I am making a mistake.
missing . before otherwise in $routeProvider
Related
Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html
To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
what url should I use to reach the "/phone" part from the routing? I am trying this http://localhost:8888/workspace/AngA/phones but the page is blank. Or maybe the url is correct, and I forgot something else.
Here is the whole code (2 html pages for the view, 2 js pages) :
//in home.html
<h1>home</h1>
<p>
Add a {{ test }}
</p>
----
//in index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view>hello</div>
</body>
</html>
----
//in app.js
'use strict';
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/home.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
----
//in controllers.js
'use strict';
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', function ($scope) {
$scope.test = 'age';
});
phonecatControllers.controller('PhoneDetailCtrl', function($scope, $routeParams){
});
You haven't specified html5mode so to access that page you would do something like this instead:
http://localhost:8888/workspace/AngA/#/phones
I'm trying to create a little controller in my simple web app using angularjs but i get this error:
Error: Argument 'ContactController' is not a function, got undefined
This is what i've done so far:
angular (ContactsController.js):
var mainApp = angular.module('mainApp', []);
mainApp.ContactController = ("ContactController", ["$scope", function($scope) {
$scope.contatti = {};
$scope.contatti.contacts = ["test.one#gmail.com", "test.two#gmail.com"];
$scope.contatti.addContacts = function () {
$scope.contatti.contacts.push($scope.newcontact);
$scope.contatti.newcontact = "";
};
}]);
html:
<!DOCTYPE html>
<html data-ng-app="mainApp" data-ng-controller="ContactController">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.2.js"></script>
<script src="angular-1.3.12/angular.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular-cookies.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular-resource.js"></script>
<script type="text/javascript" src="angular-1.3.12/angular-sanitize.js"></script>
<link type="text/css" rel="stylesheet" href="ukit-2.16.2/css/uikit.almost-flat.css" />
<script src="ContactsController.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div>
Email:<input type="text" ng-model="contatti.newcontact" />
<button ng-click="addContacts()">Add</button>
<h2>Contacts</h2>
<ul>
<li ng-repeat="contact in contatti.contacts"> {{ contact }} </li>
</ul>
</div>
</body>
</html>
It should be like :-
mainApp.controller("ContactController", ["$scope", function($scope) {
$scope.contatti = {};
$scope.contatti.contacts = ["test.one#gmail.com", "test.two#gmail.com"];
$scope.contatti.addContacts = function () {
$scope.contatti.contacts.push($scope.newcontact);
$scope.contatti.newcontact = "";
};
}]);
Replace this line:
mainApp.ContactController = ("ContactController", ["$scope", function($scope)
By:
mainApp.controller= ("ContactController", ["$scope", function($scope)
I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all.
Here is my code :
var route = angular.module('app', []);
route.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {templateUrl: 'partials/home.html'})
.when('/about', {templateUrl: 'partials/about.html'})
.otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);
ap.controller('MainCtrl', function($scope) {
$scope.opts = {
disable: 'right'
};
});
and the HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/angular-snap.css" />
<script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
<script src="js/snap.js" type="text/javascript"></script>
<script src="js/angular-snap.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-controller="MainCtrl">
<nav snap-drawer class="nav">
Home
About us
</nav>
<snap-content snap-options="opts">
<header class="header">
<button snap-toggle>
<img src="img/icon-menu.png" width="60px" />
</button>
Test
</header>
<div ng-view>
</div>
</snap-content>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
The snap element for the left panel is working just fine but when I want to add the routeProvider it does not display what I have in partial/home.html (which is just a paragraph at the moment).
Don't forget to inject the ngRoute module.
var route = angular.module('app', ['ngRoute']);
You need to include the ngRoute module (and the angular-route.js) in order for $routeProvider to work. This was split up a while ago:
AngularJS $routeProvider docs