I am trying to use routing in Cordova but is not working. All js files are in www file.
Controllers are working. When I try in url to write:
http://localhost:8000/info
it says error
Cannot GET /info
I think I write in code everything correctly.
In html inside head I have put the:
<base href="/"/>
also the name module project and in body:
<ng-view></ng-view>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>
<script type="text/javascript" src="/js/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/angular-aria.js"></script>
<script type="text/javascript" src="/js/angular-messages.min.js"></script>
<script type="text/javascript" src="/js/angular-material.min.js"></script>
<script type="text/javascript" src="/js/fontawesome5/fontawesome-all.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script src="/js/controllers/MainController.js"></script>
<script src="/js/controllers/InfoController.js"></script>
In my app.js file
var app = angular.module('project', ['ngRoute', 'ngMaterial', 'ngMessages']);
in routes.js (the below alert it didn't works):
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){
alert('routes working!');
$routeProvider
.when("/", {
templateUrl: "views/login.html",
controller: "MainController"
})
.when("/info", {
templateUrl: "views/info.html",
controller: "InfoController"
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
in InfoController:
app.controller("InfoController", ["$scope","$http",function($scope,$http){
$scope.info = "info page here!";
}]);
What am I missing and it isn't working? What to try for debug?
Any suggestions?
I was forgotten to put in html the routes.js file:
<script type="text/javascript" src="/js/routes.js"></script>
Now everything works!
Related
Can you help me the problem about Angular Material error show.
I import the js file is success,but I don't know what happen about it.
https://i.stack.imgur.com/BnDoD.png
when i click button quickly,It will be bigger.
model.js
angular.module ('model', ['ui.router','ngMaterial'])
.config (['$mdThemingProvider','$urlRouterProvider', '$stateProvider',function ($mdThemingProvider,$urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/login');
$stateProvider.state ('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'loginCtrl'
});
}]);
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
You are missing the reference for the css of angular material
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
I'm using eclipse with angularJS for make the front-end of my app. Not first time I'm using angular but first time I'm using it with eclipse.
AngularJS plugin have been installed and I made the link between view and controllers. I convert my project to AngularJS project. Angular is working (an input ng-model="a" {{a}} does the job) but the chrome terminal give me an error :
Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=HomeController&p1=not%20aNaNunction%2C%20got%20undefined
index.html
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Mon Titre</title>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/MainController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/HomeController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/CategoryController.js"></script>
<script type="text/javascript" src="resources/js/angular/app.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module("app", ["ngRoute"]); // Already tried to inject controllers
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/accueil.html',
controller: 'HomeController'
})
.when('/categories', {
templateUrl: 'pages/categorie-list.html',
controller: 'CategoryController'
})
.otherwise({
redirectTo: '/'
});
});
HomeController.js
var app = angular.module("app",[]);
app.controller("HomeController", function($scope){
$scope.bonjour ='I\'m home controller !';
});
CategoryController.js
var app = angular.module("app",[]);
app.controller("CategoryController", function($scope){
$scope.bonjour = 'I\'m category controller';
});
Both .html contains just one {{bonjour}}.
Thanks for your help and sorry for this low english !
In HomeController.js and CategoryController.js replace
var app = angular.module("app",[]); // create new app module
with
var app = angular.module("app"); // use existing app module
After that move app.js script before controller scripts:
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="resources/js/angular/app.js"></script>
<script src="resources/js/angular/controller/MainController.js"></script>
<script src="resources/js/angular/controller/HomeController.js"></script>
<script src="resources/js/angular/controller/CategoryController.js"></script>
I have checked online for the solution but it's not working plz assist,following are my scripts.
This are my scripts
<script src="lib/angular.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="script/autocomplete.js"></script>
<script type="text/javascript" src="script/app.js"></script>
<script src="js/angucomplete-alt.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="cordova.js"></script>
<script src="js/bootstrap.min.js"></script>
My app.js contains the following
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'angucomplete-alt'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('signup', {
url: '/create-account',
templateUrl: 'templates/create-account.html',
controller: 'SignUpCtrl'
})
$urlRouterProvider.otherwise('/sign-in');
Your problem is caused by ionic.bundle.js. If you open this file, the header of the file says it clearly that is it a concatenation of a few libs, including angularjs. Check it here:
http://code.ionicframework.com/1.1.0/js/ionic.bundle.js
I am facing some problem while making app with angularJS - stateProvider.
I got Uncaught Error: [$injector:modulerr]
and yes, I am working on CI framework.
Here is my code:
index.php
<html lang="en" data-ng-app="myApp">
<head></head>
<body>
<div data-ui-view=""></div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"
></script>
<script src="/js/app.js"></script>
</html>
app.js
"use strict";
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: 'home/main'
})
});
There is a working plunker
You have to reference UI-Router code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
// this is not path to UI-Router
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>-->
<script
src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
(we do not need angular-router, but UI-Router)
Check here that your code will be working, once it gets the UI-Router into play
I am just starting study Angular and trying example from book, but my simple routing doesn't work.
I have updated code as was recommended in the answers
Here is index.html:
<html ng-app="airline">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div ng-view></div>
</div>
</body>
</html>
Here is app.js:
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
When I refresh the page I don't have 'test' in the browser and don't have alert message. Why ? What I am missing ?
Update
Here is a full code example: https://github.com/demas/ang_test
Latest angular library use external router so you need to inject ngRoute and pass it as:
angular.module('airline', ['ngRoute'])
You are missing ngRoute directive. Download ng-route.js file and reference it in your HTML like;
<script type="text/javascript" src="js/lib/angular-route.js"></script>
And change your app.js like
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};