I am new to ui.router and trying to get it working on a new application. The code is behaving like the state provider is either not loaded or it does not see the ui-view DOM element. I know the dependency is loaded properly (or least it isn't throwing any errors) and I have been over a ton of blog posts but everything looks right. I have a couple 'made it here' style messages but I never see them in the console.
The plunk below shows the following paragraph is not an issue. I am leaving the paragraph here for posterity but do not see a strike-through option in SO formatting...
I should also point out that this will be a SharePoint provider hosted app so there is a ton of query string garbage that I suspect is mucking things up. Unfortunately I can't get rid of them.
---Edit---
I made a plunk
/---Edit---
Here is my module:
var app = angular.module('myApp', ['ui.router']).
config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
templateUrl: 'partials/admin.html',
onEnter: function ($stateParams) {
console.log("Entered Admin route");
}
//controller: 'myController'
})
.state('sitebinding', {
url: '/sitebinding',
templateUrl: 'sitebinding.html'
})
.state('scrum', {
url: '/scrum',
templateUrl: 'scrum.html'
});
$urlRouterProvider.otherwise('/');
}
]);
angular.module('myApp',[
'myApp.controllers'
]);
Here is the controller:
angular.module('myApp.controllers', []).
controller('myController', function ($scope) {
$scope.models = {
helloAngular: 'I work!'
};
$scope.$on('$stateChangeStart', function (evt, toState, toParams, fromState, fromParams) {
console.log('In state change start');
})
});
And here is the relevant bits from the index.cshtml.
<div data-ng-app="myApp">
<div>
<div class="container">
<div ui-view="app"></div>
</div>
</div>
</div>
Not sure what your trying to do here in your plunkr. You have scrum.html in your route setup but it does not exist in your file tree. Are you just trying to get admin.html to show? Are you trying to fire this view on a click?
Related
I'm very new to Angular.js.
I've taken the necessary elements from this tutorial on modal windows within Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Isolated, I can get this code to work, but after porting it to my website, I just can't get it to work.
In Jason's code, he has a file called index.controller.js, and although I've ported this file to my own page, I don't believe it's firing. Here's index.controller.js:
(function () {
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
})();
On my own page, I have all the controllers contained within app.js. Here's how it's laid out:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
})
...
});
You can see that, in the second .state, I'm attempting to call on the index.controller.js file for this particular partial. For some reason, though, the code under screeningsController (down below) is the code that's firing.
Further down in the same app.js file, I have my controllers:
...
app.controller('screeningsController', ['$scope', '$log', function($scope, $log){
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
}]);
...
Is there any way I can somehow integrate what's in the index.controller.js file into my screeningsController in the app.js? I've been trying to get a modal window working on my site for about a week now. Any help is much appreciated.
Start by creating a controller with identifier Home.IndexController. Based on the route configuration this will instantiate when you navigate to "/screenings". Call the popup() function attached to $scope of Home.IndexController via a directive us ng-click for testing. As you have specified controllerAs make sure to reference controller properties and methods prefixed with vm..
You do not need both index.controller.js and app.js both loaded. It looks everything you'd need is defined in app.js, so just make sure that is being loaded in your application. Eventually you'd want to separate these into different files and/or modules as necessary.
Try the following:
Configuration:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
});
...
});
Home.IndexController:
app.controller('Home.IndexController', ['$log', function($log){
var vm = this;
vm.message = '';
vm.popup = function() {
vm.message = 'foobar';
$log.log(vm.message);
}
}]);
Screenings Template:
<!-- Home.IndexController /screenings template -->
<div>
<button type="button" ng-click="vm.popup()"></button>
</div>
This also assumes you have ui-view specified somewhere in your main template like index.html or equivalent:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="app">
<div ui-view></div>
<!-- Vendor and Custom scripts added here -->
</body>
</html>
I've started developing a simple application :
in the first view I'm retreiving all the games, and the other view i'm retreivig the game details according to the game id.
I didn't link the two pages yet.
this is what i'm facing as problem. i'm confused ! should I use ion-view ?? or I should use a normal page
for each view I have a controller which look almost like :
.controller('tomorrowmatches', function($scope, $http) {
$http.get("http://www.myappbackend/ofc/matches?date=2015-05-03")
.success(function (response) {
$scope.matches = response;
}
});
})
and how to pass data from conroller to another, in my example I wanna pass the game.id as shwon on the screenshot.
if you need more details just let me know. I just need someone to make things clear for me, and if there is an example it would be fantastic.
To pass data to another view you can use the $state and $stateParams services.
Example
Controller 1 (sends the data)
.controller('MyCtrl1', function($scope, $state) {
$scope.selectedData = function(selectedId) {
$state.go('yourState', { id: selectedId });
};
})
Controller 2 (gets the data)
.controller('YourCtrl', function($scope, $state, $stateParams) {
if ($stateParams.id) {
$scope.yourParam = $stateParams.id;
}
// Do anything you want with the ID inside $scope.yourParam
})
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('init', {
url: "/init",
templateUrl: "templates/init.html",
controller: "MyCtrl1"
})
.state('yourState', {
url: "/yourState?id",
templateUrl: "templates/your-template.html",
controller: "YourCtrl"
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/init');
})
As you can see in the state yourState I assigned an id as a parameter. This parameter will be checked if exists by YourCtrl, if it exists assign to scope and then do whatever you want with it.
Remember to set the parameter options in your app.js route configuration.
Check the ui-router docs for more info on this. You have more ways to send data.
First of all you need the ion view as a container for your views/templates..
<body ng-app="myapp">
<ion-nav-view></ion-nav-view>
</body>
then on your app.js you need to configure your routing..
// Ionic Starter App
angular.module('myapp', ['ionic', 'myapp.controllers', 'myapp.services', 'myapp.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
// $httpProvider.defaults.useXDomain = true;
$stateProvider
//Page1
.state('page1', {
url: "/page1",
templateUrl: "templates/page1.html",
controller: "Page1Controller"
})
//Page2
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html",
controller: "Page2Controller",
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/page1');
});
Note: Make sure that all dependencies for ionic are included on your folder and called on your index.html..
Hope this helps :)
It's a simple webshop. So I'd like to load several things before show the home page and the controller.
I decided that the index.html will be also the Master Page containing a header, the ui-view for routing templates , a sidebar containing the categories and a footer.
<body ng-app="app">
<header ng-include="'./templates/masterPage/header.html'"></header>
<div ui-view></div>
<sidebar ng-include="'./templates/masterPage/sideBar.html'"></sidebar>
<footer ng-include="'./templates/masterPage/footer.html'"></footer>
</body>
The things on header, sidebar and footer will came from a json file containgin everything I need such as categories, currency, name of the webshop and others things that's will never changes after load.
So, I created the following app.js...
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider',
function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/common/home.html',
controller: 'homeCtrl',
})
}])
.run(function ($rootScope, $http) {
$rootScope.api = "http://127.0.0.1:5000/demoShop";
var call = $rootScope.api + "/frontEnd/loadStructure";
$rootScope.webshop = $http.get(call).then(function (response) {
console.log('1');
return response.data;
});
console.log("2");
})
The problem is: check the console.logs in the end....2 executes before 1 because I can't make the $http to wait until go to the next line. How can I do it ?
I need to populate the webshop variable on rootscope before do anything.
Simple answer:
You can't.
Longer answer:
You can wait for the AJAX request to finish. That's what you're already doing - it's the function in .then. You can put your code there. Question is - why do you need it to be finished first? Or maybe better question is why do you need to do the request in the controller? Isn't it a bit too late for that? See related answer from Misko Hevery.
I would suggest resolving the data when the homeCtrl for the root-route loads. Then you can access you webshop data apon instaciation of the controller. Consider the example below:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider',
function ($urlRouterProvider, $stateProvider) {
var resolveLoadStructure = function() {
$rootScope.api = "http://127.0.0.1:5000/demoShop";
var call = $rootScope.api + "/frontEnd/loadStructure";
return $http.get(call);
};
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/common/home.html',
controller: 'homeCtrl',
resolve: {
loadStructure: resolveLoadStructure
}
});
}])
.controller('homeCtrl', function($scope, loadStructure) {
$scope.webshop = loadStructure;
})
I found the problem. My mistaken is to set the $rootScope directly - Instead I set this inner the callback. I just made a small surgery and everything works fine. Take a look
.run(function ($rootScope, $http) {
$rootScope.nodeshop = "http://127.0.0.1:5000/rawDemo";
var call = $rootScope.nodeshop + "/frontEnd/loadStructure";
var head = {};
$http.get(call).then(function (response) {
$rootScope.webshop = response.data; //See ? this variable is no longer set as result of the $http return !
return response.data;
});
})
I'm using ui-router for my application and nesting controllers within ui-view. My parent controller looks like this:
'use strict';
angular.module("discussoramaApp").controller("mainController", ["RestFullResponse", "Restangular", "localStorageService", "$scope", function(RestFullResponse, Restangular, localStorageService, $scope){
var currentId = localStorageService.get("***");
var user = Restangular.one("users", currentId);
var Profile = user.get({}, {"Authorization" : localStorageService.get('***')}).then(function(profile) {
$scope.profile = profile;
});
}]);
And my child controller:
'use strict';
angular.module("discussoramaApp").controller("getTopicsController", ["RestFullResponse", "Restangular", "localStorageService", "$scope", function(RestFullResponse, Restangular, localStorageService, $scope){
var topics = Restangular.all('topics');
var allTopics = topics.getList({},{"Authorization" : localStorageService.get('***')}).then(function(topics){
$scope.topics = topics;
});
console.log($scope); // this works
console.log($scope.profile); // this returns undefined
}]);
The problem I'm having is getting the inherited $scope value for profile in the child controller. When I log $scope, profile is clearly visible in the console.
But when I try to log $scope.profile the console returns undefined. Any ideas?
Edit: Adding my ui-router config.
angular.module("discussoramaApp").config(
function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$urlRouterProvider.when('', '/home');
$stateProvider
.state('main',{
url: '',
templateUrl: 'partials/main.html',
requireLogin: true
})
.state('main.home',{
url: '/home',
templateUrl: 'partials/main.home.html',
requireLogin: true,
title: 'Home'
});
}
);
And the corresponding html files:
// main.html
<div ng-controller="mainController">
<div class="container">
<div ui-view></div>
</div>
</div>
and the child html partial:
// main.home.html
<div ng-controller="getTopicsController">
<div ng-repeat="topic in topics | filter:search">
<a ui-sref="main.topic({id: topic.id})">{{ topic.topic_title }}</a>
</div>
</div>
UPDATE: Solved this with a watcher set up like this in the child controller. Thanks #jonathanpglick and #Nix for the help.
$scope.$watch('profile', function(profile) {
if(profile) {
$window.document.title = "Discussorama | " + profile.user.name;
}
});
$scope.profile is being set after an asynchronous request so I suspect that the second controller is being instantiated before user.get() returns and assigns a value to $scope.profile.
I think you'll want to set up a watcher (like $scope.$watch('profile', function(profile) {});) in the child controller so you can do things when the profile becomes available or changes.
Also, the reason you can see the profile key on $scope when you console log $scope can be explained here: https://stackoverflow.com/a/7389177/325018. You'll want to use console.dir() to get the current state of the object when it's called.
UPDATE:
I just realized you're using the ui-router and so there's an even easier way to do this. The ui-router has a resolve object that you can use to dependency inject things like this into your controller. Each resolve function just needs to return a value or a promise and it will be available for injection into the controller with resolve key name. It would look like this for you:
angular.module("discussoramaApp").config(
function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$urlRouterProvider.when('', '/home');
$stateProvider
.state('main',{
url: '',
templateUrl: 'partials/main.html',
requireLogin: true,
resolve: {
profile: ['Restangular', 'localStorageService', function(Restangular , localStorageService) {
var currentId = localStorageService.get("***");
var user = Restangular.one("users", currentId);
return user.get({}, {"Authorization" : localStorageService.get('***')});
}
}
})
.state('main.home',{
url: '/home',
templateUrl: 'partials/main.home.html',
requireLogin: true,
title: 'Home'
});
}
);
angular.module("discussoramaApp").controller("mainController", ["profile", "$scope", function(profile, $scope){
$scope.profile = profile;
}]);
Just because you have nested scope, doesn't mean it will wait for user.get() to return before instantiating your nested getTopicsController.
Your issue is:
mainController controller initializes and calls user.get()
getTopicsController initializes and logs console.log($scope.profile)
The call to user.get() returns and then sets on scope.
This is a common issue, if you need to gaurantee that $scope.profile is set, use resolve or watch the variable.
I actually gave an example of how to do this earlier today: AngularJS $rootScope.$broadcast not working in app.run
I am doing something similar to below on my app but I am just not able to get the routeChangeSuccess event.
var myapp = angular.module('myapp', ["ui.router", "ngRoute"]);
myapp.controller("home.RootController",
function($rootScope, $scope, $location, $route) {
$scope.menus = [{ 'name': 'Home ', 'link': '#/home'}, {'name': 'services', 'link': '#/services'} ]
$scope.$on('$routeChangeSuccess', function(event, current) {
alert('route changed');
});
}
);
myapp.config(
function($stateProvider, $urlRouterProvider, $routeProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
//template: '<h1>Home Screen</h1>'
templateUrl: "/Client/Views/Home/Home.htm"
})
.state('services', {
url: "/services",
//template: '<h1>Service screen</h1>'
templateUrl: "/Client/Views/Home/service.htm"
});
});
a very simple html as below also fails
<body ng-controller="home.RootController">
<ul class="nav">
<li ng-repeat="menu in menus" "="">
{{menu.name}}
</li>
</ul>
<div ui-view> No data yet!</div>
</body>
but when i click on the link i see that the views are getting updated but the $routeChangeSucces event is never triggered.
is there something i am missing?
Another question I had was is there an event that I can hook on to to know the view is ready so I can start some additional processing, like document.ready().
plnlr but not fully working...
Regards
Kiran
Please, check this wiki: State Change Events. An extract:
$stateChangeSuccess - fired once the state transition is complete.
$scope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){ ... })
So instead of the $routeChangeSuccess use the $stateChangeSuccess.
To get more detailed information about all available events, check the wiki Events. Here you can find that the suitable for you, could be event $viewContentLoaded...
stateChange events are now deprecated and removed, use transitions instead.
$transitions.onSuccess({}, function () {
console.log("state changed");
});