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.
Related
I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.
I'm getting the next error message when i click on an href:
Unexpected condition on http://127.0.0.1:8887/#/home: Could not find value for language
I'm using ngRoute. This is my index:
<!DOCTYPE html>
<html lang="en" ng-app="pagoApp">
<meta charset="UTF-8">
<title>Paga-Facturas</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/paga-stilos.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
<base href="/">
</head>
<body>
<ul>
<li>Home</li>
<li>List</li>
</ul>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/xml2json.js"></script>
<script src="app/pagapp.js"></script>
<script src="app/componentes/listado-componente/pago-components.js"></script>
<script src="app/componentes/listado-componente/home-component/home-component.js"></script>
<!--<script src="app/componentes/autorizar-componente/autorizar.js"></script>-->
<script src="app/factory/pago-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
And my routes file:
(function(){
'use strict';
angular
.module('pagoApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
controller: 'homeCtrl',
})
.when('/list',{
template: '<paga-facturas></paga-facturas>',
controller: 'payCtrl'
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(false);
}
})();
When i click on Home or List, shows the metioned message, and redirect me to my Index of current directory. Anyone knows why i'm getting this error message?
I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem
When I opening the main page I can't see the content of "home.html" file.
http://127.0.0.1:60590/#/home.html
And the same problem is when I open the "contact.html"
http://127.0.0.1:60590/#/contact.html
file because it redirect's me to the "home.html" again.
I think the "app.js" code is valid.
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'view/home.html'
})
.when('/contact', {
templateUrl: 'view/contact.html'
}).otherwise({
redirectTo: '/home.html'
});
}]);
index.html
<!DOCTYPE html>
<html lang="pl" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<title>kedar</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="lib\angular-route.min.js"></script>
<script src="lib\app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
I'm guessing there must be something obvious I have missed, this is the second angular app I am building and I have never had this issue before..
Seems both of my controllers are receiving this error. I have confirmed that controllers.js gets loaded and console.log(angcomControllers) does return an object. Other than that I am lost.
index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="angcomApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<!--Library/Framework JS-->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!--script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script-->
<!--App JS-->
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view class="view-frame"></div>
</body>
</html>
app.js
'use strict';
var angcomApp = angular.module('angcomApp',[
'ngResource',
'ngRoute',
'angcomControllers',
'angcomServices',
]);
angcomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'partials/items.html',
controller: 'itemsController'
}).when('/categories', {
templateUrl: 'partials/categories.html',
controller: 'categoriesController'
});
}]);
controllers.js
var angcomControllers = angular.module('angcomControllers', ['angcomServices']);
angcomControllers.controller('itemsController' ['$scope', 'Items', function($scope, Items) {
}]);
angcomControllers.controller('categoriesController' ['$scope', function($scope) {
}]);
items.html
<div data-ng-controller="itemsController"></div>
If I need to post any more code please let me know, thanks!
You are missing ,:
angcomControllers.controller('itemsController', ['$scope', 'Items', function($scope, Items){
}]);