I've got an array inside my <script> tags and am trying to reference it in the html body:
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/yeti/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('HomeController', function($scope){
this.posts = feedback;
});
app.controller('TabController', function($scope){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
});
var feedback = [{
author: 'Joe Shmo',
body: 'I really love this product, no complaints',
votes: 0,
createdOn: 1397490980837,
tags: ['great', 'cool'],
people: ['Santa Clause']
},
{
author: 'Stinky Pete',
body: 'Sucky product all around',
votes: 0,
createdOn: 1397490980837,
tags: ['terrible', 'stinks'],
people: ['Tooth Fairy']
}];
</script>
</head>
<body>
<section ng-controller="TabController as tab">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active:tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Home</a>
</li>
<li ng-class="{ active:tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Groups</a>
</li>
<li ng-class="{ active:tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Notifications</a>
</li>
<div ng-show="tab.isSet(1)" ng-controller="HomeController as home">
<h3>Home Base</h3>
<div ng-repeat="post in home.posts">
<h4>{{ post.author }} <em class="pull-right">{{ post.votes }}</em></h4>
<h5>{{ post.createdOn | date }}</h5>
<p>{{ post.body }}</p>
</div>
</div>
<div ng-show="tab.isSet(2)">
<h3>Your Groups</h3>
</div>
<div ng-show="tab.isSet(3)">
<h3>Nothing to see here.</h3>
</div>
</ul>
</section>
</body>
When I have this running in the browser, I don't get any errors, but when I click the "Home" tab, only Home Base appears and, upon inspecting the page, the <h4>, <h5> and <p> tags are all there, but they are empty. Any help would be appreciated!
FOLLOW UP: I'm using Angular1.4.9, Django1.9 with REST framework, could it be some kind of compatibility issue?
As many of the comments have said, the content is displayed when you open it as a static file, but when I have my django server going, the content does not appear.
I was able to get this to work by doing two things:
Using $scope for the "posts" var:
Replace this:
app.controller('HomeController', function($scope){
this.posts = feedback;
});
With This:
app.controller('HomeController', function($scope){
$scope.posts = feedback;
});
Next - Remove "home" from the ng-repeat here:
<div ng-controller="HomeController as home">
<h3>Home Base</h3>
<div ng-repeat="post in posts">
<h4>{{ post.author }}
<em class="pull-right">{{ post.votes }} </em></h4>
<h5>{{ post.createdOn | date }}</h5>
<p>{{ post.body }}</p>
</div>
</div>
looks like you may be using angular version 1.1.4 or below. Your code works if angular is v 1.1.5 or above. This is because Controller as syntax used in your code was introduced post 1.1.5
None working fiddle: http://jsfiddle.net/halirgb/Lvc0u55v/
This gives below error. Check your console.
Error: Argument 'TabController as tab' is not a function, got undefined
Working Fiddle: http://jsfiddle.net/Lzgts/683/
var app = angular.module('myApp', []);
app.controller('HomeController', function($scope){
this.posts = feedback;
});
app.controller('TabController', function($scope){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
});
var feedback = [{
author: 'Joe Shmo',
body: 'I really love this product, no complaints',
votes: 0,
createdOn: 1397490980837,
tags: ['great', 'cool'],
people: ['Santa Clause']
},
{
author: 'Stinky Pete',
body: 'Sucky product all around',
votes: 0,
createdOn: 1397490980837,
tags: ['terrible', 'stinks'],
people: ['Tooth Fairy']
}];
Turns out it was an issue with Django and Angular. Both use the {{ }} notation so the interpreter was seeing {{ post.author }} as django and not angular. The way to fix this was to put {% verbatim %} and {% endverbatim %} at the beginning and end of my html file, and it works now!
Not sure this is an issue with onsen-ui or me being a newbie with angularjs...
I've got a menu with 2 different popover. I wanted to use the same controler since they are similar. The only difference is the button that call it and the page used for the popover menu. So I have something like this
app.controller('PopoverController', function($scope) {
$scope.popurl = function(url) {
$scope.param = url;
};
ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) {
$scope.popover = popover;
});
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
});
And it gets called this way
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popover.show($event); popurl('popover_share.html')">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popover.show($event); popurl('popover.html')">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
This is not working. if I change ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) by
ons.createPopover('whatever.html',{parentScope: $scope}).then(function(popover) {
Then it works but obviously display whatever.html all the time
So I guess my first question is why is it working when I hardcode the URL and doesn't when I use a variable ?
The second question is : Is there a simpler way to pass my argument to my controler ?
Thank you for your help !
There are two mistakes in your code:
you are trying to show the popover before it has been created.
when you click the toolbar-button you are calling two functions in sequence, without considering that maybe the second function will finish its execution before the first one. This will give an inconsistent result (the popover will be displayed before the new URL will be initialized).
You can solve your issues by creating the popover inside $scope.popurl(), after the URL has been initialized. You can also show the popover after it has been created. Don't forget to destroy the popover after you close it, as any button click will create a new instance of the popover.
HERE you can find a working CodePen example and here is the code:
HTML
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popurl('popover_share.html', $event)">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popurl('popover.html', $event)">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<ons-template id="popover_share.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is "popover_share" popover!</p>
</div>
</ons-popover>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is "popover" popover!</p>
</div>
</ons-popover>
</ons-template>
JS
ons.bootstrap()
.controller('PopoverController', function($scope) {
$scope.popurl = function(url, e) {
$scope.param = url;
ons.createPopover($scope.param, {
parentScope: $scope
}).then(function(popover) {
$scope.popover = popover;
$scope.show(e);
});
};
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
});
Hope it helps!
this is my js code :
var application = angular.module('app', ['onsen']);
application.controller('ItemController',function($scope){
$scope.local = [];
$scope.loadPresentation = function(id){};
}
and this is my ons-list :
<ons-list id ="list" style="margin:0px;padding:0px;" ng-controller="ItemController">
<ons-list-item modifier="chevron" ng-repeat="item in local">
<ons-carousel style="height: 100%;width :100%;position: absolute;left: 0;top: 0;" swipeable initial-index="1" auto-scroll>
<ons-carousel-item class="list-action-menu">
<ons-button modifier = "quiet" ng-click="menu.setMainPage('default.html', {closeMenu: true, callback: function(){loadPresentation(0);}});">
{{item.name}}
</ons-button>
</ons-carousel-item>
<ons-carousel-item class="list-action-menu">
<ons-button ng-click="local.splice($index, 1);runtime.local=local">
Remove
<ons-icon icon="ion-trash-a">
</ons-button>
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
</ons-list>
The second button works fine but the first ng-click in the first carousel item is not firing but it works with the function outside the scope when i use onclick.
ng-click expects Angular expressions, what means function declarations are not allowed. Just create the callback in your controller and link it from your view:
$scope.myCallback = function(){
$scope.loadPresentation(0);
};
ng-click="menu.setMainPage('newpage.html', {closeMenu: true, callback: myCallback});".
Hope it helps.
Edit: callback with parameters
$scope.customSetMainPage = function(params) {
$scope.menu.setMainPage('newpage.html', {
callback: function() {
console.log(params);
}
});
};
I implemented a controller to store the title of an item and a page link associated with the item.
myApp.controller('takeAwayListCtrl', function($scope)
{
$scope.items = [{itemName: 'Pizze', page: 'pizze_takeaway.html'}, {itemName: 'Pasta', page: 'pasta_takeaway.html'}, {itemName: 'Dessert', page: 'dessert_takeaway.html'}];
});
While the x.itemName is intrepreted correctly, the following code fails to interpret the page attribute x.page correctly when I pass it to the pushPage function for the navigator.
<script type="text/ons-template" id="takeaway.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Take Away</div>
</ons-toolbar>
<ons-list ng-controller="takeAwayListCtrl">
<ons-list-item modifier="tappable" ng-repeat="x in items">
<ons-button ng-click="myNavigator.pushPage( {{x.page}}, { animation : 'slide' } )" modifier="large--quiet">
{{ x.itemName }}
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</script>
Do I need to escape something ?
I don't think you need to wrap the x.page with an {{ }}.
Just use it directly like this:
<ons-button ng-click="myNavigator.pushPage(x.page, { animation : 'slide' } )"
I have just started learning Angular JS and created some basic samples however I am stuck with the following problem.
I have created 2 modules and 2 controllers.
shoppingCart -> ShoppingCartController
namesList -> NamesController
There are associated views for each controller. The first View renders fine but second is not rendering. There are no errors.
http://jsfiddle.net/ep2sQ/
Please help me solve this issue.
Also is there any possibility to add console in View to check what values are passed from Controller.
e.g. in the following div can we add console.log and output the controller values
<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
So basically as mentioned by Cherniv we need to bootstrap the modules to have multiple ng-app within the same page. Many thanks for all the inputs.
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap()
HTML
<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
...
</div>
JS
angular.
bootstrap(document.getElementById("module2"), ['mySecondModule']);
The reason for this is that only one AngularJS application can be automatically bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application.
In other words, while it is technically possible to have several applications per page, only one ng-app directive will be automatically instantiated and initialized by the Angular framework.
You can use angular.bootstrap() directly... the problem is you lose the benefits of directives.
First you need to get a reference to the HTML element in order to bootstrap it, which means your code is now coupled to your HTML.
Secondly the association between the two is not as apparent. With ngApp you can clearly see what HTML is associated with what module and you know where to look for that information. But angular.bootstrap() could be invoked from anywhere in your code.
If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
You can get the source code for it at:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
It's implemented in the same way as ngApp. It simply calls angular.bootstrap() behind the scenes.
In my case I had to wrap the bootstrapping of my second app in angular.element(document).ready for it to work:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("app2"), ["app2"]);
});
Here's an example of two applications in one html page and two conrollers in one application :
<div ng-app = "myapp">
<div ng-controller = "C1" id="D1">
<h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
</div>
<div ng-controller = "C2" id="D2">
<h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
</div>
</div>
<script>
var A1 = angular.module("myapp", [])
A1.controller("C1", function($scope) {
$scope.s1 = {};
$scope.s1.title = "Titre 1";
});
A1.controller("C2", function($scope) {
$scope.s2 = {};
$scope.s2.valeur = "Valeur 2";
});
</script>
<div ng-app="toapp" ng-controller="C1" id="App2">
<br>controller 1 in app 2
<br>First Name: <input type = "text" ng-model = "student.firstName">
<br>Last Name : <input type="text" ng-model="student.lastName">
<br>Hello : {{student.fullName()}}
<br>
</div>
<script>
var A2 = angular.module("toapp", []);
A2.controller("C1", function($scope) {
$scope.student={
firstName:"M",
lastName:"E",
fullName:function(){
var so=$scope.student;
return so.firstName+" "+so.lastName;
}
};
});
angular.bootstrap(document.getElementById("App2"), ['toapp']);
</script>
<style>
#titre{color:red;}
#D1{ background-color:gray; width:50%; height:20%;}
#D2{ background-color:yellow; width:50%; height:20%;}
input{ font-weight: bold; }
</style>
You can merge multiple modules in one rootModule , and assign that module as
ng-app to a superior element ex: body tag.
code ex:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">
<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
<li ng-bind="first">{{first}}
</li>
</ul>
</div>
</body>
</html>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
var namesModule = angular.module("namesList2", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("App2"), ['namesList']);
angular.bootstrap(document.getElementById("App3"), ['namesList2']);
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
<div id="App3" ng-app="namesList2" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
</body>
</html>
// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);
// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
$scope.msg = 'App 1';
});
// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
$scope.msg = 'App 2';
});
// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);
<!-- angularjs#1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<!-- root-app -->
<div ng-app="root-app">
<!-- app1 -->
<div id="app1a">
<div ng-controller="main">
{{msg}}
</div>
</div>
<!-- app2 -->
<div id="app2b">
<div ng-controller="mainB">
{{msg}}
</div>
</div>
</div>
Only one app is automatically initialized. Others have to manually initialized as follows:
Syntax:
angular.bootstrap(element, [modules]);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js#1.5.8"></script>
<script data-require="ui-router#0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var parentApp = angular.module('parentApp', [])
.controller('MainParentCtrl', function($scope) {
$scope.name = 'universe';
});
var childApp = angular.module('childApp', ['parentApp'])
.controller('MainChildCtrl', function($scope) {
$scope.name = 'world';
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
</script>
</head>
<body>
<div id="childApp">
<div ng-controller="MainParentCtrl">
Hello {{name}} !
<div>
<div ng-controller="MainChildCtrl">
Hello {{name}} !
</div>
</div>
</div>
</div>
</body>
</html>
AngularJS API
You can define a Root ng-App and in this ng-App you can define multiple nd-Controler. Like this
<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController1', function ($scope) {
$scope.student = {
firstName: "MUKESH",
lastName: "Paswan",
fullName: function () {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
mainApp.controller('studentController2', function ($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees: 500,
subjects: [
{ name: 'Physics', marks: 70 },
{ name: 'Chemistry', marks: 80 },
{ name: 'Math', marks: 65 },
{ name: 'English', marks: 75 },
{ name: 'Hindi', marks: 67 }
],
fullName: function () {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
<body>
<div ng-app = "mainApp">
<div id="dv1" ng-controller = "studentController1">
Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/>
<br/>
You are entering: {{student.fullName()}}
</div>
<div id="dv2" ng-controller = "studentController2">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I have modified your jsfiddle, can make top most module as rootModule for rest of the modules.
Below Modifications updated on your jsfiddle.
Second Module can injected in RootModule.
In Html second defined ng-app placed inside the Root ng-app.
Updated JsFiddle:
http://jsfiddle.net/ep2sQ/1011/
Use angular.bootstrap(element, [modules], [config]) to manually start up AngularJS application (for more information, see the Bootstrap guide).
See the following example:
// root-app
const rootApp = angular.module('root-app', ['app1', 'app2']);
// app1
const app1 = angular.module('app1', []);
app1.controller('main', function($scope) {
$scope.msg = 'App 1';
});
// app2
const app2 = angular.module('app2', []);
app2.controller('main', function($scope) {
$scope.msg = 'App 2';
});
// bootstrap
angular.bootstrap(document.querySelector('#app1'), ['app1']);
angular.bootstrap(document.querySelector('#app2'), ['app2']);
<!-- angularjs#1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<!-- root-app -->
<div ng-app="root-app">
<!-- app1 -->
<div id="app1">
<div ng-controller="main">
{{msg}}
</div>
</div>
<!-- app2 -->
<div id="app2">
<div ng-controller="main">
{{msg}}
</div>
</div>
</div>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="shoppingCartParentModule" >
<div ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="name in names">
<p>{{name.username}}</p>
</div>
</div>
</div>
</body>
<script>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [
{product_name: "Product 1", price: 50},
{product_name: "Product 2", price: 20},
{product_name: "Product 3", price: 180}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [
{username: "Nitin"},
{username: "Mukesh"}
];
}
);
angular.module("shoppingCartParentModule",["shoppingCart","namesList"])
</script>
</html>