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
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 can't seem to get my angular app to work with routes. The basic app itself works but breaks the moment I try to add in routes
Here's a link to the plunker: broken routes
var app = angular.module('appModule', ['ui.router']).config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
controller: 'homeController'})}])
app.controller('homeController', ['$scope', function($scope) {$scope.hello = "flarg";}])
and here is the the same simple app without routes link to plunker here: working app
You configuration should be like this,
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html",
controller: 'homeController'
});
});
myApp.controller('homeController', ['$scope', function($scope) {
$scope.hello = "flarg";
}]);
DEMO
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>
I am building an angular app with several modules close to john papas styleguide. Following that, I have several independent modules with their own route definitions and others with interceptors. My Problem is: when I run it on Cordova / Android, state definitions only seem to work, when I put them in the main module. In my Browser the work. Did anybody come over this issue yet?
E.g. this works on both local browser and on device with cordova:
//main.js
'use strict';
angular.module('main', [
'app.core',
'auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/main/list');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main/templates/menu.html',
controller: 'MenuCtrl as menu'
})
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
/* more states here */
This only works in local browser (main module same as above):
//auth.routes.js
'use strict';
angular
.module('auth.routes')
.config(config);
function config ($stateProvider) {
$stateProvider
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
}
//auth.module.js
'use strict';
angular.module('auth', [
'app.core',
'auth.constants',
'auth.routes',
'auth.controllers',
'auth.services',
'auth.interceptors',
'auth.config'
]);
angular.module('auth.constants', []);
angular.module('auth.routes', []);
angular.module('auth.controllers', []);
angular.module('auth.services', []);
angular.module('auth.interceptors', []);
angular.module('auth.config', []);
Error says that the state was not found on navigation.
Try
angular
.module('test', [])
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/login', {
title: 'Calculators',
templateUrl: 'modules/views/login.html',
controller: ''
});
}
remove state provider ,check for simple routing it will work.
How can I share the scope with angular ui router ? I tried this :
angular.module('myApp').controller('detailCtrl', ['$scope',
function($scope) {
$scope.test=$scope.$parent.services;
angular
.module('myApp', ['ngAnimate', 'ngCookies', 'ngResource'
, 'ui.router', 'ngSanitize', 'ngTouch'])
.config ($stateProvider) ->
$stateProvider.state('home',
url: "/"
templateUrl: "home.html"
).state('services',
url: "/services"
templateUrl: "services.html"
).state('services.detail',
url: "/detail/"
templateUrl: "detail.html"
)
in servicesCtrl :
$scope.services = getServices.query();