In the code below, the the #test button works, but the #calendarButton does not. There must be some reason that my header.html cannot access my Javascript.
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Lifting Analytics </title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class"container" ng-app="app">
<header ng-include="'templates/header.html'"></header>
<div ui-view></div>
</div>
<button id="test">test</button> // This button works
</body>
</html>
header.html (This button doesn't work)
...
<button id="calendarButton" class="btn btn-default">Calendar</button>
...
script.js
$(document).ready(function() {
$('#test').click(function(){
console.log("in");
alert("in");
});
$('#calendarButton').click(function(){
console.log("in");
alert("in");
});
});
app.js (not sure if this is necessary)
Also, how do I refer to this file? the router? Sorry it's my first day with angular.
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html'
})
.state('record', {
url: '/record',
templateUrl: 'templates/record.html'
})
.state('calendar', {
url: '/calendar',
templateUrl: 'templates/calendar.html',
controller: function($scope){
$scope.array = ["item 1", "item 2", "item 3"]
}
})
.state('graph', {
url: '/graph',
templateUrl: 'templates/graph.html'
})
}])
If you're routing using ng-include or ng-route, the elements within those routes don't render until the applicable route is invoked. That's why the calendar button click event isn't being captured - it doesn't exist at the time you're binding..
To get it to work, you could try this..
$('body').on('click', '#calendarButton', function() {...}); //a delegate
Though, I would not recommend doing this, as it is not the "angular" way. What would be better is something like the following..
Within your view..
<button id="calendarButton" ng-click="clickFn()"/>
Within your controller...
$scope.clickFn = function() { ... }
Related
I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">
I'm trying to use AngularJS in my webapp so dynamically create a menu and then populate the page based on the selection. I have created all the components needed, however it seems that since I split out my controllers I'm getting the following error. Any ideas why?
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MenuCtrl&p1=not%20a%20function%2C%20got%20undefined
The code I have is as follows:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myWebApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densitySpi=device-dpi, initial-scal=1.0" />
<link href="css/MainStyles.css" rel="stylesheet" type="text/css" media="screen">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>
<!-- AngularJS Controllers -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<title>
Page Title
</title>
</head>
<body>
<div id="menu_bar" ng-controller="MenuCtrl">
<ul>
<li ng-repeat="menuItem in menuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div id="page_content">
<div ng-view></div>
</div>
</body>
js/app.js
var myWebApp = angular.module('myWebApp', [
'ngRoute',
'myWebAppControllers'
]);
myWebApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/home'
}).
when('/home', {
templateUrl: '/partials/home.html',
controller: 'HomeCtrl'
}).
otherwise({
templateUrl: '/partials/404.html',
});
}]);
js/controllers.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('MenuCtrl', function ($scope, $location) {
$scope.menuItems = [
{
'name': 'Home',
'path': '#/home'
}
];
});
js/controllers/home.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('HomeCtrl', function ($scope, $location) {
$scope.title = "Home"
});
You are defining the same module twice (and by that overriding the first one), once in controllers.js and the other in controllers/home.js. If you want both controllers to be under the same module, you need to define it once with
var myWebAppControllers = angular.module('myWebAppControllers', []);
And in other places only retrieve it:
var myWebAppControllers = angular.module('myWebAppControllers');
I am learning AngularJS and trying to test routes. I am wondering if Plunker supports this so that I can navigate different pages.
*Clicking "Log in" returns Preview does not exist or has expired. in the View
Plunker Demo
HTML
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Into to Angular.js</title>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<h1>Intro to Angular</h1>
<div id="view" ng-view></div>
</div>
</div>
<button class="btn" onclick="location.href = '/login.html'">Login Page</button>
</body>
</html>
JS
var app = angular.module("app", []).config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
});
});
app.controller('LoginController', function () {
});
Yes, it is possible to use the client-side navigation in the plunker.
Example plunker: http://plnkr.co/edit/XH8yfhvbFpeP4l0EmJ8S?p=preview
Instead of modifying the location.href yourself, you have to use $location.path() or just use a simple a tag like this:
Login
In order to use the $routeProvider, you have to include the ngRoute module file:
<script src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
And put 'ngRoute' as a depencendy of the app module:
var app = angular.module("app", ['ngRoute'])
I have theses codes:
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="configure.js"></script>
<title>New Web Project</title>
</head>
<body>
<div ng-view></div>
</body>
</html>
pizza-list.html:
<div ng-repeat="pizza in pizzas">
{{pizza.name}}
</div>
app.js:
(function(){
var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);
pizzasApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).
otherwise({
redirecTo: '/pizzas'
});
}]);
})();
configure.js:
(function(){
var app = angular.module('app',[]);
app.controller('PizzasController',['$scope','$http',function($scope,$http){
$http.get('http://162.250.78.47/api/pizzas').success(function(data){
$scope.pizzas = data;
});
}]);
})();
The problem is that I can't get the datas from json file. I know that the problem isn't the json file because I can get the datas with other way but without angular-route. But I'm interested in that.
This works: http://plnkr.co/edit/AsAPhINnDmBToTRFmgZf?p=preview
It looks like .otherwise is not doing its job when there is just a '/'. I hacked around it with:
$routeProvider.when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).when('/',{
redirectTo: '/pizzas'
}).otherwise({
redirecTo: '/pizzas'
});
Edit: I found the actual error, there were a typo in redirectTo. It was spelled redirecTo.
I'm getting into Angular JS, and am having a bit of a an issue with routes not displaying. Here's the index file:
<!doctype html>
<html lang="en" ng-app="backupApp">
<head>
<meta charset="UTF-8">
<base href="some/subdiretory/">
<script src="//code.angularjs.org/1.2.10/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-resource.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-route.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">
</head>
<body ng-app="backupApp">
<div ng-view class="view-frame">
</div>
</body>
</html>
And here's my app.js. In one file, as I was debugging:
var backupApp = angular.module('backupApp', [
'ngRoute',
'backupControllers'
]);
backupApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl'
});
}
]);
backupApp.controller('IndexCtrl', ['$location', '$window',
function($location, $window) {
console.log('hi');
debugger;
if ($window.sessionStorage.loggedin) {
$location.path('/backups');
} else {
$location.path('/login');
}
}
]);
The issue is, no redirection occurs. Not errors are throw. The console.log never displays. I can't figure out what's wrong. Any ideas?