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
Related
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!
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 have included my dependencies for using Angular UI router but when I run my application I keep receiving an error stating: $urlRouteProvider is not defined. It seems to not be recognizing UI router and is immediately forward to the .otherwise instead of activating the initial login state.
Here is my code:
app.js --
var app = angular.module("demoApp", ["ngVidBg", "ngAnimate","ui.router"]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: 'SignUpCtrl'
})
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
resolve: {
logincheck: checkLoggedin
}
})
$urlRouteProvider.otherwise('/views/login');
}]);
index.html--
<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/vidBg.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav ng-controller="NavCtrl">
<span ng-show="!currentUser">
</span>
</nav>
<div ng-view>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.js"></script>
<script src="./js/app.js" type="text/javascript"></script>
<script src="./js/controllers.js" type="text/javascript"></script>
<script src="./js/vidBg.js" type="text/javascript"></script>
</body>
</html>
Its typo at the $urlRouteProvider.otherwise line, it should be
$urlRouterProvider
instead of
$urlRouteProvider
$urlRouterProvider Doc
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>'})
};