AngularJS: Component controller not loaded when routing with ngRoute - javascript

I am an AngularJS beginner. I have the following code:
A component defined by the following js file:
angular.module('EasyDocsUBBApp')
.component('loginTag', {
templateUrl: 'login-tag/login-tag.html',
controller: function () {
alert(1);
this.login = function () {
console.log(this.username + ':' + this.password);
};
}
});
The content of my app.js file, where I also configured the routing is:
var app = angular.module('EasyDocsUBBApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login-tag/login-tag.html'
})
.when('/test', {
templateUrl: 'test.html'
})
.otherwise({
redirectTo: 'login-tag/login-tag.html'
});
});
My issue is that the controller is not loaded (the alert window does not appear). Could someone indicate me what I did wrong? (if any supplementary details on my code are needed, please tell me)

In your configuration for $routeProvider, try this:
.when('/', {
template: '<login-tag></login-tag>'
})
Remember to add your component.js to your index file.

Related

AngularJS not loading templates in Codeigniter

I'm trying to use Angular with my Codeigniter project. The problem is that it doesn't load the proper template file through angular router.
In the root instead of showing templateUrl: 'index.php/welcome/home', it loads the index.php/welcome. It loads the index page inside the controller instead of the ones I have specified.
Below is my code:
JS
var app = angular.module('MyCtrl', ['ngRoute', "ui.bootstrap.modal"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.php/welcome/home',
controller: 'mainController'
})
.when('/user', {
templateUrl: 'index.php/user/account',
controller: 'userController'
})
});
app.controller('mainController', function($scope) {
$scope.message = 'main con';
});
app.controller('userController', function($scope) {
$scope.message = 'user con!';
});
Welcome controller in Codeigniter:
public function home(){
$this->load->view('home');
}
Can someone tell me why this is not working and what I have done wrong?

AngularJS and RequireJS add controller to view

I have a problem with adding a Angular controller to my HTML view. The angular way of doing this is: ng-controller="<controller>". But because I am using RequireJs I have to do this in a different way. I have to add a sub page to every controller and view:
define(['app', 'login/LoginController'], function (app, LoginController) {
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: "modules/" + 'login/login.html',
controller: LoginController
});
});
app.controller('LoginController', LoginController);
});
This way I can define my where my controller is and where my view is.
Problem
Now I have a header.html in which I want to include a menu.html. this can be done via: ng-include="'modules/menu/menu.html'". This works fine. But how can I add a controller to this menu.html?
I have tried: ng-controller="MenuController" but then I get the error: 'Error: [ng:areq] Argument 'MenuController' is not a function, got undefined'. So I do not know how I should add a controller to my menu.html with RequireJS.
MenuController
my MenuController looks as follows:
define(['$'], function ($) {
'use strict';
var MenuController = function ($location, menu, $scope) {
$scope.info="testing123";
};
return MenuController;
});
Anyone knows how I should do this?
You can for example use multiple views in the same controllerwith $stateProvider:
app.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'menu': {
templateUrl: 'modules/menu/menu.html',
controller: MenuController
},
'login': {
templateUrl: 'modules/login/login.html'
controller: LoginController
}
}
});
});
Then in your template to call them you just need to do something like:
<div ui-view="menu"></div>
<div ui-view="login"></div>
You can see more info on github ui-router.

Redirection of url angularjs

I'm building an app and i have a little problem.
For the index, i change my url with history.pushstate when i click on a button with jquery.
For example, www.mysite.com become www.mysite.com/something without reloading the page. But if a load this page i don't find www.mysite.com because "something" doesn't exist.
And I don't know how do the link between them.
I tried to do this but it doesn't work with AngularJS.
var myApp = angular.module('photo', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'machin.html'
});
$routeProvider.when('/something-one', {
templateUrl: 'machin.html'
});
$routeProvider.when('/something-two', {
templateUrl: 'machin.html'
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
This is the way to do it or I'm just lost ? ^^
Solved
My solution works sorry all. I forgot the script angular-route but the rest of my script works.
In your button, you can bind event using ng-click instead of using jQuery.
<button ng-click="goto('/something')">Go to something</button>
In your controller:
$scope.goto = function(url) {
$location.path(url);
}
When you're working with Jquery, you're out of angular scope. So angular will not know about the URL change. You may need to trigger digest cycle in that case.
You could try this
var myApp = angular.module('photo', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'machin.html'
})
.when('/something-one', {
templateUrl: 'machin.html'
})
.when('/something-two', {
templateUrl: 'machin.html'
})
.otherwise({ redirectTo: '/' });
}]);
and in your html
Go to something one

`$scope` data not rendering

By default, I am having a message in my scope. when i call my login page, i am not getting the message in the html.
i don't know what i miss here, any one figure-out please?
my app.js:
'use strict';
angular.module('myNewApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl : 'js/scripts/views/login.html',
controller: 'js/scripts/controllers/loginCont.js'
})
.when('/register', {
controller: 'controllers/userRegisterCont.js'
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode('true');
}])
my lognCont.js :
'use strict';
angular.module('myNewApp')
.controller('loginCont', ['$scope', function ($scope) {
$scope.message = "Welcome";
}]);
my login html :
<h1>I am login here! {{message}}</h1>
what else missing here? any one help me
since i use html5 support still the url is with # http://localhost:3000/#/login
You need to pass the name of the registered controller as a String, or the controller function by itself.
So this:
.when('/login', {
templateUrl : 'js/scripts/views/login.html',
controller: 'loginCont'
})
should work

how to call angular factory method from module setup?

I have a module App and factory i18n, what is the best way to call i18n.load
method form App (config? run? etc?)
angular
.module('App', [
'ngRoute',
'service.i18ndb'
])
.config(function ($routeProvider) {
//want to i18n.load() here somehow
$routeProvider
.when('/signin', {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl'
})
.when('/mix', {
templateUrl: '../views/mix.html',
controller: 'MixCreateCtrl'
})
.otherwise({
redirectTo: '/signin'
});
});
angular.module('App')
.factory('service.i18ndb', function() {
return {
load: function() { console.log("Busy"); }
}
}
);
The problem you will always have if you use .run is having to deal with a page that has no i18n loaded. This means you will need to have a way to deal with your view when their is no i18n loaded. You can either hide it or the text will flash with the wrong values at first.
However, AngularJS gives you a wonderful feature to make sure it is loaded before your view is loaded: the resolver!
Here is how to do it.
var i18nResolver = function(service.i18ndb) {
return service.i18ndb.promise;
};
$routeProvider
.when('/signin' {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl',
resolve: {
i18n: i18nResolver
}
});
You can fix this code to use the correct promise of your HTTP request or whatever service you are using.
One of the benefits of using this way is you can have a different labels for a different page for your i18n and use the i18n service to recover them no matter where you are.
You are defining your app module twice. One you create your factory, it can be injected to the controller and used there. You could try something like this:
angular.module('App', ['ngRoute','service.i18ndb'])
.factory('service.i18ndb', function() {
return {
load: function() { console.log("Busy"); }
}
})
.config(function ($routeProvider) {
//want to i18n.load() here somehow
$routeProvider
.when('/signin', {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl'
})
.when('/mix', {
templateUrl: '../views/mix.html',
controller: 'MixCreateCtrl'
})
.otherwise({
redirectTo: '/signin'
});
})
.controller('SigninCtrl', function($scope, service.i18ndb) {
// Call your factory function here
service.i18ndb.load();
// If the function returns a value you could assign it to a scope
// variable so it can be used in your template 'sign-in.html'
$scope.your_variable = service.i18ndb.load();
});
angular
.module('App', [
'ngRoute'
])
.config(function ($routeProvider) {
//want to i18n.load() here somehow
$routeProvider
.when('/signin', {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl'
})
.when('/mix', {
templateUrl: '../views/mix.html',
controller: 'MixCreateCtrl'
})
.otherwise({
redirectTo: '/signin'
});
})
.run(['i18ndb', function(i18ndb) {
i18ndb.load();
}])
.factory('i18ndb', function() {
return {
load : function() {console.log('test')}
};
});
);
You were requiring a module which has not been defined (as far as I can tell). The factory you were adding was on the 'App' module not the 'service.i18ndb'.
You then need to dependency inject the i18ndb factory in to the run method to call it from there (presuming that you want to call that function to bootstrap your app).

Categories