I have one arguments undefined but i don't understand why.
If I put my controller in app.js folder but everything works as I intend to create a good structure nothing works.
structure:
index
app
app.js
components
home
views
job_offers.html
controller
employer_controller.js
My controller:
var app = angular.module('myApp.employerCtrl', []);
app.controller("employerCtrl", ["$scope", function($scope) {
$scope.title = "Fronteend Software Engineer";
$scope.company = "Bee Engineering";
$scope.city = "Lisbon";
$scope.schedule = "Full-time";
$scope.date = "17-10-2016";
console.log($scope.city,$scope.title);
}]);
App.js
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl: "app/components/home/views/job_offers.html",
controller: "employerCtrl"
})
.when("/job" , {
templateUrl: "app/components/job/views/job.html",
controller: "job"
})
.when("/formation" , {
templateUrl: "app/components/formation/views/formation.html",
controller: "formation"
})
.when("/news" , {
templateUrl: "app/components/news/views/news.html",
controller: "news"
})
.otherwise({
redirectTo: '/login'
})
});
html
<html lang="en" data-ng-app="myApp" >
<!-- About Section -->
<section id="slide" class="about-section" >
<div class="container">
<div class="row content" ng-view>
</div>
</div>
</section>
You dont have to declare the module for the controller again,
//remove this line
var app = angular.module('myApp.employerCtrl', []);
app.controller("employerCtrl", ["$scope", function($scope) {
$scope.title = "Fronteend Software Engineer";
$scope.company = "Bee Engineering";
$scope.city = "Lisbon";
$scope.schedule = "Full-time";
$scope.date = "17-10-2016";
console.log($scope.city,$scope.title);
}]);
Related
On loading '/', I am getting 'content' and 'sidebar'using 'myService' and resolve option in route provider and I can render the 'content' to the template ($scope.contents = content;).
But $scope.sideBar = sideBar; is not working. This is because sideBar is outside the template ?
How can I render sidebar items on loading '/' ? Is it possible to pass this data (sidebar) to the indexCtrl?
app.js
var myApp = angular.module("MyApp", ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'contents.html',
controller: 'Myctrl',
resolve: {
content: function(myService){
return myService.getContent();
},
sideBar: function(myService){
return myService.getSideBar();
}
}
}).
otherwise({
redirectTo: '/'
});
}]);
myApp.controller('Myctrl', function (content, sideBar, $scope) {
$scope.contents = content;
$scope.sideBar = sideBar;
});
myApp.controller('indexCtrl', function($scope) {
});
myApp.service("myService", function () {
this.getContent = function () {
return 'Main contents';
}
this.getSideBar = function () {
return 'side bar'
}
});
index.html
<div ng-app="MyApp" ng-controller="indexCtrl">
<div class="sidebar">
{{sideBar}}
</div>
</div>
<div class="main">
<div ng-view></div>
</div>
</div>
contents.html
<div>{{contents}}</div>
You can inject your myService into your indexCtrl and access the function getSideBar like this
myApp.controller('indexCtrl', function($scope, myService) {
$scope.sideBar = myService.getSideBar();
});
this will get the string from your getSideBar function when your indexCtrl is first initialized. If you do this:
myApp.controller('indexCtrl', function($scope, myService) {
$scope.sideBar = myService.getSideBar;
});
and inside index.html:
<div class="sidebar">
{{sideBar()}}
</div>
The string will update when the data in your service updates.
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);
}
]);
HI i m try to show routing and multiple view in my anguar js code but there is not show can u please help me what is the problum and how to solve it.
Please Help me .
My Code it this
HTML File Index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<title>New Page Angular</title>
<script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
App.js Code
var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']);
phonecatApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phone'
});
}
]);
Contrller .js code
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
To complete code is here Plunker
You missed
in your index.html and you've got few spelling errors phones instead of phone ...
please see fixed version here http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview
var phonecatApp = angular.module('phonecatApp', ['ngRoute']);
phonecatApp.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'phoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'phoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
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'});
});
Somehow my app stopped working during development and I really cannot get what's wrong with it.
I've removed everything, the only code remaining is:
function handlerControl($scope, $routeParams, $location){
$scope.route = $routeParams;
}
var app = angular.module('Hello', []).config(
function($routeProvider){
$routeProvider.when('/:a/:b', {controller: handlerControl});
}
);
and html is
<body ng-app="Hello">
<div ng-controller="handlerControl">
{{route}}
</div>
</body>
omitting head part with including everything.
When I go to
http://helloday/#/a/b/
I'm getting an empty hash while expecting to get {a: 'a', b: 'b'}
What I'm doing wrong?
Bit modified(to make it work) jsFiddle: http://jsfiddle.net/wWDj2/http://jsfiddle.net/wWDj2/
Routing requires you use ngView, and that you specify either a template or a templateUrl:
App code.
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/foo/:id', {
controller: 'FooCtrl',
template: '<h1>Foo {{id}}</h1>'
})
.when('/bar/:test', {
controller: 'BarCtrl',
templateUrl: 'bartemplate.html'
})
.otherwise({
controller: 'DefaultCtrl',
template: '<h1>This is the default</h1>'
});
});
app.controller('FooCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
app.controller('BarCtrl', function($scope, $routeParams) {
$scope.test = $routeParams.test;
});
app.controller('DefaultCtrl', function($scope){});
Your main page's markup:
<div ng-app="myApp">
Foo 123
Bar Blah
Default route
<hr/>
<div ng-view>
<!-- your processed view will show up here -->
</div>
</div>