This is the route specified in my file:
.state(
"path", {
url: "/{path:.*}",
views: {
"secondnav": {
templateUrl: "/App/View/Partials/_partDetails.html",
controller: 'unitDetailsController' },
"body": {
controller: 'unitDetailsController',
templateUrl: function($scope) {
return "/app/View/unitDetails.html";
}
}
}
})
How to pass data from controller unitDetailsController in templateUrl?
You can pass data like in the following code:
ui-router config:
angular
.module('angularApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1/:id",
templateUrl: "views/partials/state1.html",
});
});
Template:
<div ng-controller="RowsCtrl">
<h1>State 1</h1>
<p>Id: {{id}}</p>
<div ui-view></div>
</div>
Related
I have a problem to use $rootScope.$on in AngularJS, I try to call alert, but unsuccess, nothing error in console, I generate this project use yeoman generator, I don't know why, this is my script, please correct my script.
'use strict';
angular
.module('siapApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router',
'ui.bootstrap'
])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$qProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider, $qProvider) {
$stateProvider
.state('main', {
url: '/',
views: {
'content#': {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}
}
})
.state('about', {
url: '/about',
views: {
'content#': {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
}
}
})
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/');
$qProvider.errorOnUnhandledRejections(false);
}])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
alert('success'); /*cannot call alert*/
});
}
]);
Please anyone help me.
Thanks.
This should work in any case. The only thing I can suspect is you don't have ui-view directive on your index.html page.
<ui-view></ui-view>
I'm a begginer with angular 1.6 and I would like to do the next:
Loggin, register & remember password without menu.
After loggin: Menu, nav bar and footer appears.
Up to now I have the next:
Index.html
<ui-view></ui-view>
Loggin: Works fine.
authenticationService.Login(vm.email, vm.password, function (result) {
if (result === true) {
$location.path('/main');
} else {
vm.error = 'Username or password is incorrect.';
vm.loading = false;
}
});
};
If I have logged I go to main, here my problems appear..
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<div ng-include="'../views/partials/main-navigation.html'"></div>
<!-- Page wraper -->
<div id="page-wrapper">
<!-- Topnavbar -->
<div ng-include="'../views/partials/main-topnavbar.html'"></div>
hola mundo
<!-- Main view -->
<div ui-view>aqui tengo que meter todas las vistas</div>
<!-- Footer -->
<div ng-include="'../views/partials/main-footer.html'"></div>
</div>
<!-- End page wrapper-->
Now I would like to put the rest of my web pages inside the main
<div ui-view>All pages here</div>
How Can I do this?
I have read several pages https://ui-router.github.io/ and some more, but It is not clear for me.
I think I have to do some in my app.js but I don't now what...
(function () {
'use strict';
angular.module('frontEndApp', [
'ui.router',
'ngMessages',
'ngStorage',
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'pascalprecht.translate']).config(config).run(run);
function config ($stateProvider, $translateProvider, $urlRouterProvider) { // default route
$urlRouterProvider.otherwise('/login');// app routes
var states = [
{ name: 'main', url: '/main', templateUrl: 'views/main/main.html' },
{ name: 'login', url: '/login', templateUrl: 'views/login/login.html', controller: 'loginController', controllerAs: 'vm' },
{ name: 'department', url: '/department', templateUrl: 'views/department/department.html', controller: 'departmentController', controllerAs: 'vm' }
];
// Loop over the state definitions and register them
states.forEach(function (state) {
$stateProvider.state(state);
});
/**
* Translation of the web page with angular-Translate
*/
$translateProvider.useStaticFilesLoader({
files: [{
prefix: '../config/languages/locale-',
suffix: '.json'
}]
});
$translateProvider.preferredLanguage('en');
$translateProvider.useSanitizeValueStrategy('escapeParameters');
}
function run ($rootScope, $http, $location, $localStorage) { // keep user logged in after page refresh
if ($localStorage.currentUser) {
$http.defaults.headers.common.Authorization = 'Bearer ' + $localStorage.currentUser.token;
}
// redirect to login page if not logged in and trying to access a restricted page
$rootScope.$on('$locationChangeStart', function (event, next, current) {
var publicPages = ['/login'];
var restrictedPage = publicPages.indexOf($location.path()) === -1;
if (restrictedPage && !$localStorage.currentUser) {
$location.path('/login');
}
});
}
})();
Thanks in advance for your help.
Simply:
{ name: 'main', url: '/main', templateUrl: 'views/main/main.html' },
{ name: 'login', url: '/login', templateUrl: 'views/login/login.html',
controller: 'loginController', controllerAs: 'vm' },
{ name: 'main.department', url: '/department', templateUrl:
'views/department/department.html', controller: 'departmentController',
controllerAs: 'vm' }
If department belongs to main then call it: 'main.department'
app.js:
'use strict';
/**
* #ngdoc overview
* #name App
* #description
* # App
*
* Main module of the application.
*/
angular
.module('App', [
'ngAnimate',
'ngCookies',
'ngRoute',
'ngResource',
'ngSanitize',
'ngTouch',
'ngMaterial',
"ui.router"
])
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
}
]
);
index.html:
<body ng-app="App">
<header></header>
<div ui-view="">
</div>
<footer></footer>
</body>
There are no errors in the console. I have tried ngRouter and that seems to work but uiRouter is just not working and I am not able to see why.
I have tried using already.
It should be App instead of webocityReviewApp
<body ng-app="App">
EDIT
Try with a state "/"
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/");
$stateProvider
.state('root', {
url: '/',
templateUrl: "home.html",
controller: 'HomeCtrl'
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.html",
controller: 'master1Ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.html",
controller: 'master2Ctrl'
})
})
DEMO
i have defined my state like this below.
var app = angular.module('app', [
'ngAnimate',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.jq',
'abp'
]);
//Configuration for Angular UI routing.
app.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/App/Main/views/home/home.cshtml',
menu: 'Home' //Matches to name of 'Home' menu in EMRNavigationProvider
})
.state('personview', {
url: '/person/view',
templateUrl: '/App/Main/views/person/view/index.cshtml',
views: {
"viewTop": { templateUrl: "/App/Main/views/person/view/viewTop.cshtml" },
"viewMain": { templateUrl: "/App/Main/views/person/view/viewMain.cshtml" },
"viewAllergies": { templateUrl: "/App/Main/views/person/view/allergies.cshtml" },
"viewAppointments": { templateUrl: "/App/Main/views/person/view/appointments.cshtml" },
"viewimmunization": { templateUrl: "/App/Main/views/person/view/immunization.cshtml" },
"viewNotes": { templateUrl: "/App/Main/views/person/view/notes.cshtml" },
},
menu: 'ViewPerson',
})
.state('personsearch', {
url: '/person/search',
templateUrl: '/App/Main/views/home/home.cshtml',
menu: 'SearchPerson'
})
;
}
]);
my index.cshtml for multiple named view looks like
<div class="right_col" role="main">
545465464646454545
<div ui-view="viewTop"></div>
<div ui-view="viewMain"></div>
<div class="row">
<div ui-view="viewAllergies"></div>
<div ui-view="viewAppointments"></div>
<div ui-view="viewimmunization"></div>
</div>
<div class="row">
<div ui-view="viewNotes"></div>
</div>
</div>
For some reason when i browse to http://myhost/#/person/view it gives me content for my home page and not the dashboard view (multiple named view) i was hoping with personview from above route.
if i remove property views from 'personview' named view it displays my hard coded 545465464646454545 correctly in screen and does not give content for home page.this tells me that having child views: under the route is not working.
what is wrong with route above for multiple named views that it does not like to render?
You must modify code like this:
Template index.cshtml must have tag <div ui-view="content"></div> and may include viewTop, viewMain
Template View.cshtml consists one of templates: viewAllergies, viewAppointments etc.
app.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('person', {
abstract: true,
url: '/',
template:'<div ui-view=""></div>'
})
.state('person.view', {
url: '/personview',
views: {
'': {
templateUrl: '/App/Main/views/person/view/index.cshtml'
},
'content#person.view': {
templateUrl: '/App/Main/views/person/view/View.cshtml'
}
}
})
}
]);
I'm using angular-ui-router to load nested named views.
In the index.html file I have an unnamed view and a named one.
Index.html:
<div ui-view="header"></div>
<div ui-view=""></div>
I load header.html to named view header. The header view has two named views contactsSearch and countries.
Header.html:
<div ui-view="contactsSearch"></div>
<div ui-view="countries"></div>
In the unnamed view of the index.html file I want to load contacts.html.
Contacts.html:
Contacts List
I use three modules: myApp, countries and contacts. I've configured the routes for each module.
MyApp module:
angular.module('myApp', ['ui.state', 'contacts', 'countries'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state("home",
{
url: "/home",
abstract: true,
views: {
'header': {
template: "<div class ='row' ui-view ='countriesList'></div><div class ='row' ui-view ='contactsSearch'></div>"
},
"": {
template: "<div ui-view></div>"
}
}
});
}]);
Countries module:
angular.module('countries', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state("home.countries", {
url: "/countries",
views: {
'countriesList': {
template: "<p>Countries</p>"
}
}
});
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home.countries');
}]);
Contacts module:
angular.module('contacts', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state("home.contacts", {//should be loaded to the unnamed view in index.html
url: "",
views: {
'contactsList': {
template: "<p>Contacts List</p>"
}
}
})
.state("home.contactsSearch", {
url: "/contactsSearch",
views: {
'contactsSearch': {
template: "<p>Contacts Search</p>"
}
}
});
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home.contactsSearch');
}]);
My code is not correct because nothing is being displayed and I cannot figure out why. After some investigation, I've found out that a parent can have only one state, but I need home.contacts, home.contactsSearch and home.countries to have the same parent: home.
Can someone please help me with this?
I've created a jsfiddle for more details: https://jsfiddle.net/cjtnmbjw/3/
Thank you