I'm having problem with ngRoute injection...
I have the file angular-route.min.js inclueded in the right path but still getting this error
Here is javascript code:
(function() {
var app = angular.module('ParkPlanner', ['mobile-angular-ui', 'ngRoute']);
app.config (['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html'
})
.state('results', {
url: '/results',
templateUrl: 'pages/results.html'
});
$urlRouterProvider.otherwise('/home');
}]);
})();
Here is the HTML head:
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/mobile-angular-ui.min.js"></script>
<script src="js/app.js"></script>
Any idea what I'm missing?
Thanks!
My Friend yo should put also route.min.js.map and ,
try importing "$routeProvider" instead of "$urlRouterProvider" , lets give a try .
It looks like you are trying to configure states with ng-router. That is not supported. You should configure routes like this in ng-router:
.when('/home', {
templateUrl: 'pages/home.html'
})
Alternatively, you should add dependency to angular-ui-router like this:
var app = angular.module('ParkPlanner', ['mobile-angular-ui', 'ui.router']);
app.config (['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html'
//And so on....
})
})();
Related
I treid to make a contoller for each of my page but have a broblem. Mistakes in console, and the elements of controller don`t work on html page.
I use $stateProvider cod below is the cod of config, it`s work normal.
var app = angular.module("appmyApp", ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('header', {
abstract: true,
templateUrl: '/app/pages/header.html'
})
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html',
controller: 'HomeController'
})
}]);
When I add in the config the row - controller: 'HomeController'. I have a mistake in console.
angularjs.js:127 Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.7.5/$controller/ctrlreg?p0=HomeController
at angularjs.js:7
at angularjs.js:97
at Object.<anonymous> (viewDirective.ts:410)
at angularjs.js:17
at Ba (angularjs.js:89)
at q (angularjs.js:73)
at g (angularjs.js:64)
at angularjs.js:64
at angularjs.js:69
at n (viewDirective.ts:328) "<div ui-view="" class="ng-scope">"
When I delete it, it is not any mostakes in console.
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html'
})
In both case page opens good. Route is work. But controller is not work.
The cod of controller
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
$scope.name = "Hello";
});
But on the view I have this.
http://prntscr.com/lzeyy5
Scripts home-controller.js I added in the head of home.html
<script src="/app/pages/home-controller.js"></script>
I added ng-controller="HomeController" to body in html page home.html but it does not work. What a problem. I Use last angularJS
Here is the reference on index.html
http://prntscr.com/lzf0cd
Change:
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
To
var app = angular.module("appTradeRoom");
// ^^ no dependencies
app.controller("HomeController", function ($scope) {
When there are no dependencies angular.module() will act as a getter of existing module, otherwise it will create a new one
I am trying to use AngularJS ngRoute along side Express but I keep getting the following error:
cannot Get /profile
Here's my code:
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.when('/profile', {
templateUrl: 'views/partials/profile.html',
controller: 'kontrola'
})
$locationProvider.html5Mode('true')
$locationProvider.hashPrefix('!')
app.get('/', routes.index)
app.get('/login', routes.login)
app.get('/signup', routes.signup)
How can I fix it?
Angular's ngRoute is for client-side routing, while express is for server-side routing.
You will need to set a handler in your server to serve static files, like this (assuming your views folder is in the static folder:
app.set('views', path.join(__dirname, 'static'));
Then when you go to http://yourservername/#/profile you will get your profile view.
if you want to use html5mode you need to have a tag like this:
<head>
.....
<base href="/">
</head>
.config(['$locationProvider', '$routeProvider', '$provide', function ($locationProvider, $routeProvider) {
$routeProvider.when('/profile', {
templateUrl: 'partials/pro.html',
controller: 'kontrola'
})
$locationProvider.html5Mode(true)
$locationProvider.hashPrefix('!')
}])
instead of:
.config(['$locationProvider', '$routeProvider', '$provide', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true)
$locationProvider.hashPrefix('!')
$routeProvider.when('/profile', {
templateUrl: 'partials/pro.html',
controller: 'kontrola'
})
I have a nested ui-route in my application. The index page (root page), works, but not the nested pages.
Here is my app.js
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('index',
{
url: '/index',
templateUrl: 'index.html'
})
.state("index.salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
In my index.html, I have the div with ui-view attribute
<div ui-view="mainlayout"> </div>
I have also added the necessary scripts for angular, and ui-route. I do not get any errors in the console. But the salesorder does not show. I get to see the index though.
Your second state index.salesorder is a child state of index. Do you have the ui-view nested correctly? It looks like you might need 3 levels of ui-views.
try this:
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state("salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
main.html:
<div ui-view></div>
salesorder.html:
<div ui-view="mainlayout"></div>
I'm trying to separate my routes into separate files but having problems getting it to load, but not getting any error information. This is in an Ionic tabs application which uses Angular UI Router.
My project is split into separate apps
main-routes.js
main-controllers.js
main-routes-end.js
app1
- routes.js
- controllers.js
app2
- routes.js
- controllers.js
Here are my routes JS files for the routes.
// main-routes.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
});
// app1/routes.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.odometer', {
url: '/home/odometer',
views: {
'tab-home': {
templateUrl: 'templates/home/odometer.html',
controller: 'OdometerCtrl'
}
}
})
});
// app2.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.messages', {
url: '/messages',
views: {
'tab-messages': {
templateUrl: 'templates/tab-messages.html',
controller: 'MessagesCtrl'
}
}
});
});
// main-routes-end.js
angular.module('myproj.routes', [])
.config(function($urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
});
I've included these files in my index.html in the following order:
<script src="js/routes.js"></script>
<script src="js/app1/routes.js"></script>
<script src="js/app2/routes.js"></script>
<script src="js/routes-end.js"></script>
When I have all the routes in the js/routes.js file it works fine, but when I try to separate them out the screens don't render and unfortunately I don't get any errors in the console. I'm using a similar struture for controllers, which works fine, but I'm having problems with the routes. Any ideas?
Your main-routes.js should only have the module definition like angular.module('myproj.routes', [])
In other *.route.js you should js used the module create by the main-routes.js. No need to create a new module again & again.
Basically your problem is, you are reinitializing your myproj.routes module again & again which is flushing out old component(here its states) registered to it.
Make sure you create module once & Then you should use angular.module('myproj.routes') module to append the states to its config block.
I use ui-router but ui-router can't find one of my state: Could not resolve 'main.tabs' from state 'main'. I found out that the config of the tabs module is not called, so main.tabs is not registered.
The initial state: $urlRouterProvider.otherwise('/main/dashboard');
The navigation to main.tabs is done with <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
index.html
<script src="app/main/main.js"></script>
<script src="app/tabs/tabs.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<script src="app/app.js"></script>
main.js
var main = angular.module('main', []);
main.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: "/main",
abstract: true,
templateUrl: "./app/main/main.html"
});
});
tabs.js
var tabs = angular.module('tabs', ['main']);
tabs.config(function ($stateProvider) {
$stateProvider
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: './app/tabs/tabs.html',
controller: 'TabsCtrl'
}
}
});
// This is not called, I don't see the trace in the logs
console.log($stateProvider);
});
dashboard.js
var dashboard = angular.module('dashboard', ['models.dashboards', 'main']);
dashboard.config(function ($stateProvider) {
$stateProvider
.state('main.dashboard', {
url: "/dashboard",
views: {
'main': {
resolve: {
'dashboard': ['DashboardService', function (DashboardService) {
return DashboardService.getInstance();
}]
},
templateUrl: "./app/dashboard/dashboard.html",
controller: 'DashboardCtrl'
}
}
});
console.log($stateProvider);
});
Edit: ui.router is included
app.js (ionic is bundled with ui-router)
angular.module('starter', ['ionic', 'restangular', 'dashboard', 'ngCordova', 'LocalStorageModule', 'services.auth'])
From the ionic source:
var IonicModule = angular.module('ionic', ['ngAnimate', 'ngSanitize', 'ui.router']),
ng-app directive from index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
Your app is the starter module. starter depends on dashboard. dashboard depends on main. None of those modules depend on tabs. So the tabs module is not loaded.