Scopes in Angular not inheriting correctly - javascript

I have an ApplicationController on the body tag. Inside this controller I am setting the username on a response from the server. Somehow the username variable is only available within the HomeController, which is currently not implemented.
index.html
<body ng-controller="ApplicationController">
Welcome {{username}}.
<div ng-view></div>
</body>
home.html
<div>You are logged in as {{username}}.</div>
Javascript
angular.module('APP', [
'ngRoute',
'APP.services',
'APP.controllers',
'APP.auth'
])
.config(function($routeProvider, $httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
$routeProvider.when("/", {
templateUrl: "/static/partials/home.html",
controller: "HomeController"
});
return $routeProvider.otherwise({
redirectTo: "/"
});
}
);
angular.module("APP.controllers", ['ui.bootstrap.modal'])
.controller("HomeController", function($scope, $rootScope) {
})
.controller('ApplicationController', function($scope, $rootScope, USER_ROLES,
AUTH_EVENTS, AuthService, $modal,
UserService) {
$scope.username = null;
$scope.setCurrentUser = function(user) {
$scope.username = user.username;
}
$rootScope.$on(AUTH_EVENTS.loginSuccess, function(event) {
UserService.get().then($scope.setCurrentUser);
});
});
Generated output
<body>
Welcome
<div>You are logged in as AceUser</div>
</body>
Update 1
If I select the ApplicationController element and then run angular.element($0).scope() I can see the scope and the username available. But still it is not output in the document.
Update 2
The index.html was being generated with Django. Django was processing the template variable and not sending it as output. The solution was to wrap the variable with the {% verbatim %} tag. I will leave this up here for anyone who also has this problem.

Not quite sure why it works in the HomeController. I put together a working Plunk for you to compare your code with.
angular.module('APP', [
'ngRoute',
'APP.controllers'
])
.config(function($routeProvider, $httpProvider) {
$routeProvider.when("/", {
templateUrl: "home.html",
controller: "HomeController"
});
return $routeProvider.otherwise({
redirectTo: "/"
});
});
angular.module("APP.controllers", [])
.controller("HomeController", function($scope, $rootScope) {})
.controller('ApplicationController', function($scope, $rootScope) {
$scope.username = null;
$scope.setCurrentUser = function(user) {
$scope.username = user.username;
}
$scope.setCurrentUser({username: 'bob'});
});

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 route resolve when calling controller using ng-include

Please see my plunkr here
https://plnkr.co/edit/hk7Z0jMwOfoUwJZ98F7a?p=preview
In my app.js I have two controllers and a routeprovider with a resolve for TestController
var app = angular.module('app', ['ngRoute']);
app.controller('DefaultController', ['$scope', function($scope){
$scope.welcome = "Hello World";
}]);
app.controller('TestController', ['$scope', 'context', '$routeParams', function($scope, context, $routeParams){
$scope.text = "TestController loaded!"
}]);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(){return 'test';}
}
})
}])
In my html, I have an ng-include which should also load test.html in the default view
<body ng-controller="DefaultController">
<h1>{{welcome}}</h1>
<div ng-include="'test.html'" ng-controller='TestController'></div>
</body>
I cannot take the resolve out of the routeProvider as I still need it to when the user goes to '../test'
Is there any way I can resolve contextProvider from the ng-include?
or is there better ways to do this?
Any help would be greatly appreciated.
Create a factory/service and use that:
app.factory('fooResolver', function() {
return {
resolveMe: function() {
return 'test';
}
}
});
Now, use this in your router config:
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(fooResolver) {
return fooResolver.resolveMe();
}
}
})
}])
And do the same in your controller:
app.controller('TestController', ['$scope', 'fooResolver', '$routeParams', function($scope, fooResolver, $routeParams){
$scope.text = "TestController loaded!"
var context = fooResolver.resolveMe();
}]);

`$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

Angular $routeParams: get query parameter as array

When I have multiple id parameters in query, $routeParams.id gives me an array.
That's great. But, if only one id is present in the query, I get a string.
/?id=12&id=34&id=56 // $routeParams.id = ["12", "34", "56"]
/?id=12 // $routeParams.id = "12"
This is bad. Because in the first case, $routeParams.id[0] gives "12",
while in the second one, it gives "1" (first char of "12").
I can work this around by inserting an empty id= to all my links, but this is ugly.
See in Plunker
Is "type-checking in controller" my only option? If so, how do I do it?
index.html:
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.3.15/angular.js"></script>
<script src="//code.angularjs.org/1.3.15/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html:
#/?id=12<br/>
#/?id=12&id=34&id=56<br/>
#/?id=12&id=<br/>
<pre>id: {{id | json:0}}</pre>
<pre>id[0]: {{id[0] | json}}</pre>
script.js:
angular.module('app', ['ngRoute'])
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
}
])
.controller('HomeCtrl', [
'$scope', '$routeParams',
function($scope, $routeParams) {
$scope.id = $routeParams.id;
}
]);
EDIT:
For those who wonder, what I am trying to achive is: inter-controller (or inter-view) communication. User selects some items in one view, and sees details for those selected items in the next view. See in Plunker.
The best way to do it is not to use id param multiple times but separate your values with another character and always get an array and you are ready to go!
script.js
(function() {
var app = angular.module('app', ['ngRoute']);
app.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
}
]);
app.controller('HomeCtrl', [
'$scope', '$routeParams',
function($scope, $routeParams) {
$scope.id = $routeParams.id.split('-');
}
]);
})();
home.html
<p>
#/?id=12-34-56 Array
</p>
<p>
#/?id=12 Array
</p>
<pre>id: {{id | json:0}}</pre>
<pre>id[0]: {{id[0] | json}}</pre>
I wonder why you are passing different values to a single id. However, this should solve your problem
angular.module('app', ['ngRoute'])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
}
])
.controller('HomeCtrl', [
'$scope', '$routeParams', function($scope, $routeParams) {
$scope.id = angular.fromJson($routeParams.id);
}
]);

controller does not recognize routeParams variable passed from routeProvider

<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.factory('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor-url.php',{
},{
query: {
method:'GET',
/*params: { myvar: myvarActual },*/
isArray:true
}
}
);
}]);
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
alert($routeParams.myvar);
Greeter.query(function(data) {
$scope.output = data.myvar;
});
}]);
app.controller('homeController', ['$scope', function($scope){
}])
/*Final Config After Loading Everything*/
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/appointments/:myvar', {templateUrl: 'appointments.html', controller: 'appointmentController'});
$routeProvider.when('/home', {templateUrl: 'home.html', controller: 'homeController'});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
</script>
In the above code, seems the controler is not even recognize myvar that was suppose to be included in the routeProvider's myvar. As the alert will show undefined, instead of the actually value of myvar (i.e. .../appointments/1066 ... if so I expect $routeParams.myvar = 1066, and alert($routeParams.myvar) should be 1066
$routeParams is missing from the dependency declaration so currently it's looking for myvar on Greeter which doesn't exist...
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
Should be...
app
.controller('appointmentController', ['$scope', '$routeParams', 'Greeter', function($scope, $routeParams, Greeter){

Categories