I am trying to add the detail view in Angularjs
this is my app.js file
angular.module('frontendApp', ['ngAnimate', 'ngCookies', 'ngResource', 'ui.router', 'ngSanitize', 'ngTouch']).config ($stateProvider) ->
$stateProvider.state('home',
url: "/"
templateUrl: "home.html"
).state('services',
url: "/services"
templateUrl: "services.html"
).state('detail',
url: "/detail"
templateUrl: "detail.html"
)
And I created the file detail.html, but this is not working, I can't access the view in http://localhost:3000/#/detail. I have to do something else ?
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>
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
How to user otherwise on stateProvider similar like angular UI router provider otherwise
angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home',{
url : '/',
template: 'path_to_template',
controller: 'homeCtrl'
})
}])
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();
There is the following code:
angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/404")
$stateProvider.state('signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
)
$locationProvider.html5Mode(true)
])
It works good, but I change it to the following code:
angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/404")
$stateProvider.state('admin.signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
).state('admin'
abstract: true
)
$locationProvider.html5Mode(true)
])
It doesn't work, i.e. I enter the address 'http://localhost/admin/signin', browser is loading, but I don't get 'signin.html' template. I need to use 'admin' state in order to use a 'resolve' function for all child states (my example is not complete). What's the trouble ? Thanks in advance!
Almost each parent should have a template - the one which will be a target for its child. There is a working plunker.
So just adding this line to the parent definition: template: "<div ui-view></div>" - will make that code working:
.state('admin', {
abstract: true,
template: "<div ui-view></div>"
})
What happened is - child does have its target, the anchor where it could be injected.
There could be other solution, e.g. child is targeting the root ui-view="" ... but above solution is appropriate... See View Names - Relative vs. Absolute Names, check this answer and its plunker with more examples of absolute name targeting
Check it in action here