I have diferents controllers in my webpage, each controller is in a different .php document. Each .php document represents a diferent part of the webpage. (It's similar to spotify).
player.php: (Where the user can play some music with an audio player)
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
panel_admin.php: (where the user can modify its data and some data of the webpage)
<html lang="en" ng-app="decibels-admin">
<body ng-controller="AdminController as AdminCtrl" ng-init="AdminCtrl.sessionCtrl()">
player.php and panel_admin.php have its respective player.js and panel_admin.js with its .controllers running correctly.
player.js:
var decibelsInteractive = angular.module("decibels-interactive", []);
decibelsInteractive.controller('InteractiveController', function ($scope, $log) {
panel_admin.js:
var adminControl = angular.module("decibels-admin", []);
adminControl.controller("AdminController", function($scope){
Now, I have the menu bar in menu.php, where I use in player.php document, imported with:
//player.php
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
<?php include('includes/menu.php'); ?>
//here some html code
</body>
</html>
menu.php: (menu is a menu bar where the user have some options, and it also have its username and logout option)
<div class="navbar-fixed" ng-controller="InteractiveController as menu2">
//some html code
</div>
menu.js:
app.controller('menu2', function($scope) {
$scope.content = '';
});
The problem that I have is that as you can see, I import the document menu.php inside player.php.
I also want to import the menu.php inside panel_admin.php and be able to use some methods that I have in menu.js, so the code that I have in menu.php (ng-controller="") is not correct (or I think so). -Because when I use it in panel_admin.php it will be in conflict with ng-controller name.
Someone told me that I should use services, or that I should define menu in separate module and use it as dependency where I want.
I am new with angularJS so now I'm a little lost. I've been searching information about services and dependencies without success.
I hope to solve this problem and being able to continue programming!
Thank you!
Related
I am absolutly new in AngularJS and I am following a course that show a first example of AngularJS application and I have some doubt about how exactly works.
So it is composed by these two files:
1) index.htm:
<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>Introduction to AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body
{
font-size: 1.1em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<!-- This div and its content is the view associated to the 'mainController': -->
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
</div>
</body>
</html>
2) app.js:
/* MODULE: one signgle object in the global namespace.
Everything insise the element having ng-app="angularApp" custom attribute is connected to the angularApp variable into the
global namespace
*/
var angularApp = angular.module('angularApp', []);
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
So I have some doubt about how exactly it works.
From what I have understand into the app.js file it is defined a module that substantially is a single object defined into the global namespace of my application. But what exactly represent a module in AngularJS? I came from the Spring MVC framework (and some other classic MVC) where the module represent the data that have to be shown into a view.
In Angular what exactly represent?
So from what I have understand this module is bound with the entire index.htm page because in the HTML is declared:
<html lang="en-us" ng-app="angularApp">
so I think that the ng-app="angularApp" on the html page means that the angularApp module is related to what happen inside the index.html page. Is it my reasoning correct or it is wrong?
Then inside the app.js file it is also defined a controller:
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
This mainController controller (is it mainController the controller name?) is defined on the angularApp model object.
Ok, I am not so into JavaScript but I think that works in the following way:
The mainController variable is a JavaScript object and by the previous line I am adding a controller field named mainController and the controller logic is implemented by the function associated to this new field (because in JavaScript a function could be a field of an object).
Is it my reasoning true or am I missing something about the controller declaration?
Another doubt is related to the use of the '$scope' variable. What exactly means? and what is the meanining of the syntax ['$scope', function ($scope) { ....CONTROLLER LOGIC....}] ?
This controller is associated to a specific view that is represented by a specific section of the index.htm page, this one:
<!-- This div and its content is the view associated to the 'mainController': -->
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
And this generate some confusion in me because it seems pretty different from what I see in other Java MVC implementations.
So differently from Java MVC implementations, in AngularJS a view is not an entire page (as in Java could be a .jsp page) but it is a section of an HTML page bound to a specific controller by the ng-controller="mainController" custom attribute. Is it true?
And also differently from Java MVC implementations, in AngularJS (or in the previous example) a model is not only an object that contain valorized fields to display into a view but it is an object in the global namespace of the application to which are associated the controllers (as model's fields) that perform the operation on the specified view.
Are my reasoning correct or am I missing something?
Everything is fine, your controller and your view is ok.
Next step, you need to create now a service to bind a server API and act like your model.
In fact, the angular 'controller' can act like the model but if you want to do only controller/listeners things in there, you need to create a real service like this:
exemple:
app.service('ContactService', function () {
//'var' act like private
var contacts = [{
id: 0,
name: 'hello world'
}];
//'this' act like public (cool for java dev, you should feel like home :) )
this.save = function (contact) {
//here connect to your api or stay offline
}
this.get = function (id) {
}
this.delete = function (id) {
}
this.list = function () {
return contacts;
}
});
your controller
angularApp.controller('mainController', ['$scope','ContactService', function ($scope,ContactService) {
$scope.contact = ContactService.get(0)
}]);
the view
<div ng-controller="mainController">
<h1>{{contact.name}}</h1>
</div>
I'm new to Angular and just started to build a test project to learn it, now have a problem with loading controllers OnDemand.
let's code a bit, I have the following HTML:
index.html
<body>
<div ng-app="MyApp">
CLICK ME
<div ng-view></div>
</div>
<script>
angular.module("MyApp",['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/child', {
templateUrl: 'somwhere/child.html',
controller: 'childCtrl' <!-- will remove -->
});
}) <!-- will remove contoller defination below -->
.controller('childCtrl', function($scope) {
$scope.data = DoHeavyCalc();
});
</script>
</body>
what is obvious to me is that I should define my controller exactly where I config my module (MyApp), which doing this depends on DoHeavyCalc() which is not needed right now! (think this method does a big calculation, but it should be run only when the user clicks on the link, not at the beginning of the app).
Now I want to load the and define the controller inside child.html instead of my index.html. OK, so I removed the sections marked in above code and tried to write the child.html like this:
child.html
<div ng-controller="childCtrl">
{{data}}
</div>
<script>
angular.module("MyApp")
.controller('childCtrl', function($scope) {
$scope.data = DoHeavyCalc();
});
</script>
but is causes an error:
[ng:areg] `childCtrl` is not a function. got undefined.
also i tried to put script tag in child.html before the div tag, but it didn't affect anything.
Now my question is, how can i define and load the controller OnDemand and do my heavy work just when the user routes to a certain location not at the beginning of app?
You are asking about lazy loading ! By default angular doesn't support lazy loading, what you can do ? you can use any third party library like requirejs or others.
Currently angularjs doesn't execute any javascript inside templateUrl or template, more details
Here is a working example of lazy loading using requirejs.
Also there is some discussion regarding onDemand script loading
Lazy loading angularjs
In the child.html page do not include ng-controller attribute. Already child.html is associated with the childCtrl controller. Just remove the attribute ng-controller from the child.html page
I have diferents controllers in my app.
player.php:
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
player.php have its respective player.js with its .controller running correctly.
Now, I have the menu bar in menu.php, where I use in player.php document, imported with:
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
<?php include('includes/menu.php'); ?>
//here some html code
</body>
</html>
Now, I am trying to create a menu.js without success. I get the next error:
Error: [ng:areq] http://errors.angularjs.org/1.2.25/ng/areq?p0=menu&p1=not%20a%20function%2C%20got%20undefined...
menu.php
<div class="navbar-fixed" ng-controller="menu2">
//some html code
</div>
menu.js:
app.controller('menu2', function($scope) {
$scope.content = '';
});
What am I doing wrong?
Thank you!
The name of the controller inside the HTML and the JS doesn't match.
In html InteractiveController and you named the contoller menu2.
This would fix the problem.
app.controller('InteractiveController', function($scope) {
$scope.content = '';
});
Have u included your menu controller in html page. Its controller name is mismatched and its not included in that page
I'm working on learning some Angular for an application I'm building.
After going through some tutorials, I had a basic program working which had two views and some routing to flip between them. I'm running it now in the browser, and it's coming up blank. There are no console errors, and I swear I haven't touched it since I had it working last.
Here's my main file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<style>
body
{
font-family: arial;
padding: 20px;
}
</style>
</head>
<body ng-app = "journal_program">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "app.js"></script>
<div ng-view>
</div>
</body>
</html>
And my Javascript:
var journal_program = angular.module ("journal_program", []);
journal_program.config (['$routeProvider', function ($routeProvider)
{
$routeProvider.
when ('/AddNewOrder',
{
templateUrl: 'templates/add_order.html'
}).
when ('/ShowOrders',
{
templateUrl: 'templates/show_orders.html'
});
}]);
The first view:
<h2>Add New Order</h2>
Show Order
The second view:
<h2>Show Orders</h2>
Back<br>
Any ideas are appreciated. I'm not sure what to check at this point.
UPDATE:
Here are the 3 important things I figured out from this little exercise:
1) Angular views don't have a default route unless you set one with "otherwise". Basically, even if you've set up a couple different routes, ng-view is blank when the page first loads unless either the user loads a route by clicking a link outside the view, or if you've set a default by adding "otherwise" to your route controller.
otherwise (
{
templateUrl: 'templates/add_order.html'
});
This link is extremely helpful:
http://blog.kevinchisholm.com/angular/angular-js-basics-routes-part-iii-creating-a-default-route/
2) Apparently nothing you put inside the html of ng-view will be rendered unless you have a " when ('/' " route in the controller.
3) Angular doesn't work so well when run off the hard drive. You've got to upload it to a server first, for whatever reason.
After adding these steps I got my demo working again. Looking back now, I'm not sure how I got it working the first time around without this knowledge.
It working fine...
Take a look at this Demo
Working Demo
<div ng-view>
</div>
<h2>Show Orders</h2>
Show Order
<h2>Add New Order</h2>
Add Order
<br>
I am very new to angular js and want to make a very simple website, that does the following:
when clicking on a button, it will randomly generate a number, and if the number is odd, redirect to google, otherwise redirect to apple website. I have done the following:
<!doctype html>
<html lang="en" ng-app="homeapp">
<head> ... all imports </head>
<body ng-controller="homeappCtrl">
Click
</body>
</html>
and then in the controller.js, I have:
var homeapp= angular.module('homeappController', []);
homeappController.controller('homeappCtrl', ['$scope',
function($scope) {
if (Math.floor((Math.random() * 10) + 1)%2==0)
{$scope.urlToPick = 'http://google.ca';}
else
{$scope.urlToPick = 'http://apple.com';}
}]);
The problem is that when I click on the link, the urlToPick is not resolved and therefore the link returns error. (the link url is something like xxx/{{urlToPick}} )
I guess I have done something wrong but please tell me where... Thanks!
Your ng-app and your angular.module definitions are different.
Change
var homeapp= angular.module('homeappController', []);
to
var homeapp= angular.module('homeapp', []);