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
Related
Im uning angular to make page login, I use template login.html and controller login.html, the problem is when I call login controller the main controller will be executed automatically !
and I found : warning: tried to load angular more than once.
this is my JS:
trainingApp.config(['$routeProvider' ,function($routeProvider){
$routeProvider
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo : "/"
});
}]);
trainingApp.controller('loginCtrl',['$scope', function($scope){
$scope.alertt = function(){
// console.log("ok");
alert("okkkkkkk");
}
}]);
trainingApp.controller('mainCtrl', ['$scope','$timeout', 'apiService','$location', function ($scope,$timeout, apiService,$location) {
console.log('hello');
}]);
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Plannification Des Formations</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="controllers/mainCrtl.js"></script>
<script src="services/apiService.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl" ng-view>
.......
</body>
</html>
login.html
<button id="btn-login" class="btn btn-success " ng-href="#!/">Login </button>
Please remove ng-controller="mainCtrl" from your html, as you have already defined controller in $routeProvider config.
Please change your code like this.
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl',
abstract: true,
})
"angular 1.6.1", "angular-ui-router 0.3.1", All ui views changed/worked correctly but i'm getting the following error in my console window, i don't know why.
My HTML code is
<!DOCTYPE html>
<html lang="en" data-ng-app="manoj">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="assets/style/angular-material.css">
<link rel="stylesheet" href="assets/style/materialdesignicons.min.css">
<link rel="stylesheet" href="assets/style/style.css">
</head>
<body>
<div ui-view class="main-body"></div>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!--Angular Library-->
<script src="angular/angular.min.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/angular-aria.min.js"></script>
<script src="angular/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="assets/js/angular-material.min.js"></script>
<!--App Scripts-->
<script src="app/app.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<script src="app/login/login.js"></script>
</body>
</html>
app.js file
angular.module('manoj', ['ui.router','ngMaterial'])
.config(function ($mdThemingProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider.disableTheming();
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/a/dashboard');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'app/login/index.html',
controller: 'loginCtrl'
})
.state('a',{
url:'/a',
templateUrl:'app/app.html'
})
.state('a.dashboard',{
url: '/dashboard',
templateUrl: 'app/dashboard/dashboard.html',
controller:'dashboardCtrl'
});
}).run(function ($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Please somebody help me...
You need to update ui-router, try with "angular-ui-router 1.0.3"
I used John Papa's HotTowel Angular template to generate my app. On my development machine, my angular project works fine in IIS Express without <base> in the Index.html. When the project is published to IIS 8 hosting server to "MyIISsite/myAppName" folder the application runs except all the navigation starts at the "MyIISsite" instead of "MyIISsite/myAppName/...". I can't navigate to anywhere. This IIS 8 has multiple sites. MyIISsite is using port 8083. The folder is converted to a web application. When I added <base> tag in the Index.html, then I got the error about ng-include file is not found. Does anyone know how to configure IIS 8 for this problem? Thanks.
Here are the IE Developer Tools console message, index.html, and ui-Router configuration
(function ()
{
'use strict';
var myApp = angular.module('myApp');
myApp.config(['$stateProvider', '$locationProvider', uiRouteConfigurator]);
function uiRouteConfigurator($stateProvider, $locationProvider)
{
//debugger;
//http://www.jokecamp.com/blog/resolving-angularjs-paths-in-asp-mvc-spa-iis
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
})
//test route ----------------------------------
.state('test', {
url: 'test',
//template:"<h2>Test</H2>",
templateUrl: 'app/test/test.html',
controller: 'testCtrl'
})
.state('uiGrid', {
url: 'uiGrid',
templateUrl: 'app/test/uiGrid.html',
controller: 'uiGridCtrl'
})
// admin routes -------------------------------
.state('changeSite', {
url: '/site',
templateUrl: 'app/admin/admin.html',
controller: 'adminCtrl'
})
// general routes -------------------------------
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'aboutCtrl'
})
.state('contactList', {
url: '/contacts',
//template:'<h2>Contacts</h2>',
templateUrl: 'app/contacts/contactList.html',
controller: 'contactCtrl'
})
// Otherwise routes -----------------------------
.state('otherwise', {
url: '*path',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
$locationProvider.html5Mode(true);
}
})();
Error: [$compile:ctreq] Controller 'ngInclude', required by directive 'ngInclude', can't be found!
http://errors.angularjs.org/1.2.22/$compile/ctreq?p0=ngInclude&p1=ngInclude
at getControllers (http://myIISserver:8083/myApp/scripts/angular.js:6524:13)
at nodeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6692:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6086:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at publicLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:5982:30)
at Anonymous function (http://myIISserver:8083/myApp/scripts/angular.js:1440:11)
at Scope.prototype.$eval (http://myIISserver:8083/myApp/scripts/angular.js:12658:9)
at Scope.prototype.$apply (http://myIISserver:8083/myApp/scripts/angular.js:12756:11) <div data-ng-include="'/app/layout/shell.
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<style>
/* This helps the ng-show/ng-hide animations start at the right place. */
/* Since Angular has this but needs to load, this gives us the class early. */
.ng-hide {
display: none !important;
}
</style>
<title data-ng-bind="title">My App Title</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script>
// Must be first. IE10 mobile viewport fix
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
var mq = "#-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
<link href="content/ie10mobile.css" rel="stylesheet" />
<link href="content/bootswatch/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/ui-grid-unstable.css" rel="stylesheet" />
<link href="content/toastr.css" rel="stylesheet" />
<link href="content/customtheme.css" rel="stylesheet">
<link href="content/styles.css" rel="stylesheet" />
<!--<base href="/MyAppName/" />-->
</head>
<body>
<div>
<!-- shell -->
<div data-ng-include="'app/layout/shell.html'"></div>
<!-- splash -->
<div id="splash-page" data-ng-show="false">
<div class="page-splash">
<div class="page-splash-message">
My App Name
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<span data-cc-scroll-to-top></span>
<!-- Vendor Scripts -->
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/ui-grid-unstable.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/toastr.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/spin.js"></script>
<!-- Bootstrapping -->
<script src="app/myApp.js"></script>
<script src="app/config.js"></script>
<script src="app/config.exceptionHandler.js"></script>
<script src="app/config.ui.route.js"></script>
<!-- common Modules -->
<script src="app/common/common.js"></script>
<script src="app/common/logger.js"></script>
<script src="app/common/spinner.js"></script>
<!-- common.bootstrap Modules -->
<script src="app/common/bootstrap/bootstrap.dialog.js"></script>
<!-- app modules -->
<script src="app/about/aboutController.js"></script>
<script src="app/admin/adminController.js"></script>
<script src="app/contacts/contactController.js"></script>
<script src="app/dashboard/dashboardController.js"></script>
<script src="app/layout/shellController.js"></script>
<!-- app.customers modules-->
<script src="app/customer/customerController.js"></script>
<!-- app.tasks modules -->
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskAddController.js"></script>
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskEditController.js"></script>
<script src="app/tasks/taskSearchController.js"></script>
<!-- app.users modules-->
<script src="app/users/userController.js"></script>
<!-- app Services -->
<script src="app/services/datacontext.js"></script>
<script src="app/services/directives.js"></script>
<script src="app/services/services.js"></script>
<script src="app/services/factories.js"></script>
<!-- test -->
<script src="app/test/testController.js"></script>
<script src="app/test/uiGridController.js"></script>
</body>
</html>
I have this web app that has to become a app using phonegap: the problem is that we used angularjs and routing and so the views. It seems that there is no way to make them work using phonegap, I already tried Angular ng-view/routing not working in PhoneGap but it doesn't help.
This is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="RoutingApp">
<head>
<title>Big Gym</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/courses.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="mainContainer">
<div ng-view></div>
</div>
<!--Footer-->
<div my-footer></div>
<!-- Include the AngularJS library -->
<script src="js/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<!-- Scroll-->
<script src="js/angular-smooth-scroll.min.js"></script>
<!-- UI Bootstrap -->
<script src="js/ui-bootstrap-tpls-0.13.0.min.js"></script>
<!-- Directives -->
<script src="js/directives/footer.js"></script>
<!-- Controllers -->
<script src="js/controllers/MapController.js"></script>
<script src="js/controllers/CourseHomeController.js"></script>
<script src="js/controllers/CourseController.js"></script>
<script src="js/controllers/InstructorController.js"></script>
<script src="js/controllers/NavbarController.js"></script>
<script src="js/controllers/categoriesController.js"></script>
<!-- Services -->
<script src="js/services/courses.js"></script>
<script src="js/services/categories.js"></script>
<!-- Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</body>
</html>
app.js
app=angular.module('RoutingApp', ['ngRoute','ui.bootstrap','smoothScroll']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/www/views/Home.html'
})
.when('/CourseHome/', {
controller: 'CourseHomeController',
templateUrl: '/www/views/CourseHome.html'
})
.when('/course/:id', {
controller: 'CoursesJoinInstructor',
templateUrl: '/www/views/Course.html'
})
.when('/courseByLevel/', {
controller: 'CourseLevelController',
templateUrl: '/www/views/CourseLevel.html'
})
.when('/coursesByCategory/', {
controller: 'CourseByCourseCategoryController',
templateUrl: '/www/views/CourseLevel.html'
})
.when('/instructor/:id', {
controller: 'InstructorController',
templateUrl: '/www/views/Instructor.html'
})
.when('/Location', {
templateUrl: '/www/views/Location.html'
})
.when('/Categories/', {
controller: 'CategoriesController',
templateUrl: '/www/views/Categories.html'
})
.when('/form/:id', {
controller: 'CourseController',
templateUrl: '/www/views/Form.html'
})
.otherwise({
redirectTo: '/'
});
});
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
With this code i get white screen on my android phone, without the index.js and putting ng-app in the body i can see the footer with the css, so the directives are working but not the views. Hope someone can help.
Ive just started to learn AngularJS and im trying to use angular-route but can't get it to work.
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="fantasySportsApp">
<head>
<title></title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Content/Style/bootstrap.min.css"/>
<!--Placeholder for views-->
<div data-ng-view="">
Hejsan
ge
</div>
<script src="Content/Scripts/jQuery-1.11.0.js"></script>
<script src="Content/Scripts/jquery-ui.js"></script>
<script src="Content/Scripts/angular.min.js"></script>
<script src="Content/Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
<script src="Content/Scripts/bootstrap.min.js"></script>
</body>
</html>
my app.js looks like this:
var fantasySportsApp = angular.module('fantasySportsApp', ['ngRoute']);
fantasySportsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
controller: 'userController',
templateUrl: 'App/partials/login.html'
})
.when('/startPage', {
controller: 'startPageController',
templateUrl: '/App/partials/startPage.html'
})
.otherwise({ redirectTo: "/index" });
});
when i start my page ill get to this url: localhost:26283/index.html#/index but it wont show me anything. the page is empty. If i inspect the html i find this in the code: "<-- ngView: -->" think indicates that the partial view that i try to route to is supposed to start but there is nothing under the tag.
What could be the problem?