AngularJS: homeController is not showing up - javascript

This is app.states.js:
angular.module('fuelComparatorApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/404');
$urlRouterProvider.when('', '/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/components/home/views/home.view.html',
controller: "homeController",
controllerAs: 'ctrl'
})
.state('404', {
url: '/404',
templateUrl: 'app/shared/404.html'
});
}]);
And this is home.services.js:
(function () {
'use strict';
angular.module('fuelComparatorApp.homeServices', []).service('sayHelloService', sayHelloService);
sayHelloService.$inject = ['$http', '$q'];
function sayHelloService() {
function sayHi() {
console.log("hi from home service");
}
}
})();
home.controller.js
(function () {
'use strict';
angular.module('fuelComparatorApp').controller('homeController', homeController);
homeController.$inject = ["$scope", "$http", "$window", "$q", "sayHelloService"];
function homeController($scope, $http, $window, $q, sayHelloService) {
const vm = this;
vm.fuelComparatorService = sayHelloService;
sayHelloService;
return vm;
}
})();
Inside the index.html there is the usual ng-app="fuelComparatorApp" and home.view.html which utilises ng-controller="homeController" directive.
There are no errors, just the index.html doesn't show a anything from home.view.html as if I missed something somewhere.

Turned out this was missing from the index.html
<div ui-view></div>
This is specific to ui-router.

Related

Angular Routing within an ASP.NET MVC application

I have a link as follows:
view
And a div that's going to load Home.html as below:
<div class="col-md-8">
<ng-view></ng-view>
</div>
My angular config is:
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})
.controller("BlogController", function ($scope, $http) {
$http.get("/Home/GetBlogEntries")
.then(function (response) {
$scope.data = response.data;
});
$scope.removeBlogEntry = function (index) {
$scope.data.Data.splice(index, 1);
};
})
.controller("HomeController", function ($scope, $http) {
});
Before I click the link, the URL is showing http://localhost:58679/#/Home and after I click it, the address bar goes to http://localhost:58679/#!#%2FHome
Basically nothing happens and my home.html doesn't get rendered where it is supposed to.
Include $locationProvider.hashPrefix(''); in your config.
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})

Implementing secure pages and $rootScope is not defined

Inside my angularjs app. I have userService which has method for determination if user is loggedIn or not. userService.user.loggedIn()
now I want to use that service in order to implement secure pages, where I will redirect user upon this userService.user.loggedIn() statement.
my app.js looks like this
(function () {
"use strict";
var app = angular.module("myApp",
["common.services",
"$rootScope",
"ui.router",
"ui.mask",
"userService",
"ui.bootstrap"]);
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider, $urlRouterProvider, $rootScope) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("index", {
url: "/",
templateUrl: "app/index.html",
})
// Home page /* SECURED */
.state("home", {
url: "/home",
templateUrl: "app/home/home.html",
controller: "HomeController as vm",
data: {
requiresLogin: true
}
})
// Login
.state("login", {
url: "/login",
templateUrl: "app/login/login.html",
controller: "LoginController as vm"
})
}]
);
$rootScope.$on('$stateChangeStart', function (e, to, userService) {
if (to.data && to.data.requiresLogin) {
if (!userService.user.loggedIn()) {
//token not found/not valid
e.preventDefault();
$location.path('/login');
}
}
});
}());
Inside console I'm getting
ReferenceError: $rootScope is not defined
$rootScope.$on('$stateChangeStart', function (e, to, appUserService,
$rootScope)...
It's not in the array of injectable:
Try this:
app.config(["$stateProvider", "$urlRouterProvider", "$rootScope",
function ($stateProvider, $urlRouterProvider, $rootScope) {
You can only place providers in config. So place your $rootScope.$on function in app controller.

How to move controller configuration into its own file?

I have the following angular configuration in the file index.js:
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry',
templateUrl: 'app/views/entry/entry.html',
controller: 'EntryPageController'
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
I'm trying to move the controller definition (which works in the example above) into its own file, as follows:
// file name entry-ctrl.js
(function () {
'use strict';
angular.module('ionicApp', ['ionic'])
.controller('EntryPageController', ['$scope', '$state', EntryPageController]);
function EntryPageController($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}
})
();
In index.html I've referenced the file as
<script src="app/views/entry/entry-ctrl.js"></script>
Unfortunately, I can't get the application to behave correctly. When I use the original code, the page appears as I expect. But when I use the code in the entry-ctrl.js file, nothing appears.
Is there something else I need to do to use the code in the entry-ctrl.js file?
For the record, this is my entry.html:
<ion-view title="{{navTitle}}" class="bubble-background">
<ion-content has-header="true" padding="true">
<h1>I'm working!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
It's seems that you declared your angular app twice, once in index.js and in entry-ctrl.js.
I would change it to this:
index.js
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry',
templateUrl: 'app/views/entry/entry.html',
controller: 'EntryPageController'
})
$urlRouterProvider.otherwise('/entry');
}])
entry-ctrl.js
(function () {
'use strict';
angular.module('ionicApp')
.controller('EntryPageController', ['$scope', '$state', EntryPageController]);
function EntryPageController($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}
})();
in angular, you declare your app with an array of dependencies:
angular.module('ionicApp', ['ionic'])
and you reference it only by name:
angular.module('ionicApp')
Would it be possible that your Controller definition has to be above your module definition ?
(function () {
'use strict';
// First, define your Controller
function EntryPageController($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}
// Then call it in your module
angular.module('ionicApp', ['ionic'])
.controller('EntryPageController', ['$scope', '$state', EntryPageController]);
})(this);

Angularjs Restful using ngResource not working

I am trying to expose restful web service using angularjs ngResource using java as my backend everything seems to be correct but don't know What is wrong with my code
nothing gets displayed in browser help me with this
service.js
'use strict';
var employeeServices = angular.module('myApp.services',['ngResource']);
employeeServices.factory('Employees',['$resource',function ($resource){
return $resource('my service link', {},{
query:{method:'GET',isArray:true}
});
}]);
Controller.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Myctrl1',['$scope','Employees',function ($scope ,Employees){
$scope.allemployees = Employees.query();
}]).
controller('Myctrl2',[function (){
}]);
app.js
'use strict';
angular.module("myApp", [
'ngRoute',
'myApp.controllers',
'myApp.services'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1',{templateUrl:'partials/partials.html',controller:'Myctrl1'});
$routeProvider.when('/view2',{templateUrl:'partials/partials1.html',controller:'Myctrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
If you want to use service of one module in another module you have to inject it.
service.js
'use strict';
var employeeServices = angular.module('myApp.services', ['ngResource']);
employeeServices.factory('Employees', ['$resource', function ($resource) {
return $resource('my service link', {}, {
query: { method: 'GET', isArray: true }
});
}]);
Controller.js
'use strict';
angular.module('myApp.controllers', ['myApp.services']).
controller('Myctrl1', ['$scope', 'Employees', function ($scope, Employees) {
$scope.allemployees = Employees.query();
}]).
controller('Myctrl2', [function () {
}]);
app.js
'use strict';`enter code here`
angular.module("myApp", [
'ngRoute',
'myApp.controllers',
'myApp.services'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', { templateUrl: 'partials/partials.html', controller: 'Myctrl1' });
$routeProvider.when('/view2', { templateUrl: 'partials/partials1.html', controller: 'Myctrl2' });
$routeProvider.otherwise({ redirectTo: '/view1' });
}]);
try this

Routing causing 'w is not afunction'

I get: Error: w is not a function
scripts/app.js
var app = angular.module('app', [
'homepageControllers',
'ngRoute'
]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home-page.html',
controller: 'homePageCtrl'
}).
otherwise({
redirectTo: '/homepage'
});
}]);
scripts/controllers/homepageController.js
var homepageControllers = angular.module('homepageControllers', []);
homepageControllers.controller('homePageCtrl', function ($scope, $http) {
console.log("controller loaded");
});
views/home-page.html
<div>
Work ffs!
</div>
index.html
<div ng-view></div>
I'm new to angular and followed this tutorial step-by-step. Google doesn't have the answer, ideas anyone?
This seems like a minifying issue. You should force dependency injections mapping :
Transform this :
scripts/controllers/homepageController.js
var homepageControllers = angular.module('homepageControllers', []);
homepageControllers.controller('homePageCtrl', function ($scope, $http) {
console.log("controller loaded");
});
to this :
scripts/controllers/homepageController.js
var homepageControllers = angular.module('homepageControllers', []);
homepageControllers.controller('homePageCtrl', ['$scope', '$http', function ($scope, $http) {
console.log("controller loaded");
}]);

Categories

Resources