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>
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 using $stateprovider to navigate between pages I had given $state.go('view1') to go to view1.html:
config(['$qProvider','$stateProvider','$locationProvider', '$routeProvider', function($qProvider,$stateProvider,$locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
})
.state('view1', {
url: '/view1',
templateUrl: 'view1/view1.html',
controller:'View1Ctrl'
})
.state('view2', {
url: '/view2',
templateUrl: 'view2/view2.html'
});
$routeProvider.otherwise({redirectTo: '/'});
$qProvider.errorOnUnhandledRejections(false);
}])
Function using $state:
controller("appcontroller",['$scope','$state','$stateParams',function($scope,$state,$stateParams,$rootScope){
$scope.login = function()
{
$state.go('view1');
}
}]);
Here view1.html is loading but it's showing above index.html.
As you are using Anguar ui-router. You must have kept in index.html. So your view1.html will be replaced there only. Other code in index.html will be untouched by your angular code.
<p> Here is me </p>
<ui-view></ui-view>
Now, if you change the route. "Here is me" will be always there.
Hope this was the issue what i understood.
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.
**This js file for the ui router is proper or not.The error displaying is
"Error: Unknown provider: $stateProvider from routerApp"
this js files have been loaded in the Html file.
**
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/template1');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('template1', {
url: '/temp1',
templateUrl: 'templates/template1.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('template2', {
// we'll get to this in a bit
});
});
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
Please help.Thanks in advance
please see here : http://plnkr.co/edit/FYxpaHpKgvpEu6f1TZ7l?p=preview
var routerApp = angular.module("routerApp", ["ui.router"]);
routerApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/template1");
$stateProvider
.state("template1", {
url: "/template1",
templateUrl: "template1.html",
controller: "tmp1Controller"
})
.state("template2", {
url: "/template2",
templateUrl: "template2.html",
controller: "tmp2Controller"
})
;
}
]);
routerApp.controller("mainCtrl", ["$scope",
function($scope) {
}
]);
routerApp.controller("tmp1Controller", ["$scope",
function($scope) {
}
]);
routerApp.controller("tmp2Controller", ["$scope",
function($scope) {
}
]);
I had the same problem, was solved replacing
<div ui-view></div>
by
<ui-view>
<i>Loading ....</i>
</ui-view>
Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker.