I am using angular in my mvc project.
I have added the following js file and called it MyApp.js
(function () {
//Create a Module
var MyApp = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing
})();
On my _Layout.cshtml I have added ng-app to the body tag
<body ng-app="MyApp">
.....
Code
.....
</body>
On the view I want to display the angular object I have added:
#Scripts.Render("~/bundles/angular")
<script src="../../Scripts/MyApp.js" type="text/javascript"></script>
<script src="~/Scripts/AngularController/BudgetAndDetails.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('body').on('click', '.CX span', function () {
//When Click On + sign
if ($(this).text() == '+') {
$(this).text('-');
}
else {
$(this).text('+');
}
$(this).closest('tr') // row of + sign
.next('tr') // next row of + sign
.toggle(); // if show then hide else show
});
});
</script>
<div ng-controller="BudgetAndDetails">
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>Budget Name</th>
<th>Year</th>
<th>Month</th>
</tr>
</thead>
<tbody ng-repeat="O in budgetdetails">
<tr ng-class-even="'even'" ng-class-odd="'odd'">
<td class="CX"><span>+</span></td>
<td>{{O.budget.BudgetName}}</td>
<td>{{O.budget.Year}}</td>
<td>{{O.budget.monthname.MonthName1}}</td>
</tr>
<tr class="sub">
<td></td>
<td colspan="5">
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Category</th>
<th>Subcateogry</th>
<th>Amount</th>
</tr>
<tr ng-repeat="a in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
<td>{{a.category.CategoryName}}</td>
<td>{{a.subcategory.SubCategoryName}}</td>
<td>{{a.Amount}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
In my bundles I added the following code:
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js"));
However every time i run the program I get the error
Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=MyApp
I know I an not misspelling it I read it could be an issue with the order of my scripts. I have tried several alternatives but can't find the problem.
Could someone help me?
You include MyApp.js in your view, not in my_Layout.cshtml.
Try to include it at the same level as your <body>. Angular try to load you app before it is included, which leads to the error. Of course, the part #Scripts.Render("~/bundles/angular") should be in the my_Layout.cshtml too.
I remember that you can have this error if you include twice the same module, make sure you are not inculding twice your MyApp module.
I have also faced same issue and in my case it was just something in controller.
I have found that there is a encoding problem with my JSON. If you face the same issue try to empty your controllers and and see if there is a syntax or encoding error.
Related
I am extremely new to AngularJS and JavaScript in general so any help would be appreciated!
I have two data sources Users and Pets - both are Array objects and I want them to display in a table on different pages of my site. I have an app.module.js which calls the module petsapp or usersapp Currently the controller only being called is the petspp.
I have tried to use $scope but I don't really know what I'm doing!
I currently have set up an app.module.js, which looks like this (but possibly wrong:
(function(){
'use strict';
angular.module('petsapp',[]);
angular.module('usersapp',[]);
})();
another file called **Pets.controller.js:**
(function () {
'use strict';
angular
.module('petsapp')
.controller('PetsController', function ($scope) {
})
PetsController.$inject = ['$http'];
function PetsController($http) {
var vm = this;
vm.pets = [];
vm.getAll = getAll();
vm.deletePet = deletePet();
init();
function init(){
getAll();
}
and a users.controller.js which looks like this:
(function () {
'use strict';
angular
.module('usersapp')
.controller('UsersController', UsersController)
UsersController.$inject = ['$http'];
function UsersController($http) {
var vm = this;
vm.users = [];
vm.getAll = getAll()
vm.delete = deleteUser()
init();
function init(){
getAll();
}
my pets html (working) is:
<!DOCTYPE html>
<script type="text/javascript"src="/static/angular.min.js" th:src="#{/angular.min.js}"></script>
<script type="text/javascript"src="/static/app/app.module.js" th:src="#{/app/app.module.js}"></script>
<script type="text/javascript"src="/static/app/pets.controller.js" th:src="#{/app/pets.controller.js}"></script></head>
<header th:insert="fragments.html :: nav"></header>
<body ng-app="petsapp" ng-controller="PetsController as vm">
<!-- Page content goes here -->
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<!-- Display animals in a table -->
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Gender</th>
<th>Breed</th>
<th>Age</th>
<th>OK with Children?</th>
<th style="width: 100px"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pet in vm.pets">
<td>{{pet.id}}</td>
<td>{{pet.animalName}}</td>
<td>{{pet.animal}}</td>
<td>{{pet.gender}}</td>
<td>{{pet.breed}}</td>
<td>{{pet.age}}</td>
<td>{{pet.compWithChildren}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>.
my users html (not working as it is only pulling the pets.controllers.js) is:
<head th:insert="fragments.html :: headerfiles">
<script type="text/javascript"src="/static/angular.min.js" th:src="#{/angular.min.js}"></script>
<script type="text/javascript"src="/static/app/app.module.js" th:src="#{/app/app.module.js}"></script>
<script type="text/javascript"src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<header th:insert="fragments.html :: nav"></header>
<body ng-app="usersapp" ng-controller="UsersController as vm">
<!-- Page content goes here -->
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<!-- Display animals in a table -->
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>Roles</th>
<th>Email</th>
<th>Contact Number</th>
<th style="width: 100px"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="userdetail in vm.users">
<td>{{userdetail.username}}</td>
<td>{{userdetail.roles}}</td>
<td>{{userdetail.email}}</td>
<td>{{userdetail.contactNo}}</td>
<td>
<!--Only Admin can delete rows --->
<button class="btn btn-danger" ng-click="vm.deleteUser(userdetail.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html
I think the problem is in the app.module.js file where I've defined two modules?
do I need to combine both controllers into one file? if so how do I implement that?
Ok. This one really has me stumped. Here is what I am trying to build.
I have a table. In the first <tr> I have it repeating data, and the last <td> has a button. When I click this button, I want to show a set of hidden rows underneath each repeated <td> tag. In those hidden rows, I want to call more data.
I'm using mysqli and php to encode the data on the DB into json, which I then populate into the cells. I can do all of this with 1 controller. However, if I want to pull data from another source, to populate into the hidden cells, I have to make another controller.
Here is the base code: (pardon the inline css, its easier for me to format it into external css after its functional)
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('tableCtrl_1', function($scope, $http){
getdata();
function getdata(){
$http.post("angular_data.php").success(function(data){
$scope.getdata = data;
});
};
});
app.controller('tableCtrl_2', function($scope, $http){
getdata();
function getdata(){
$http.post("angular_data_2.php").success(function(data){
$scope.getdata = data;
});
}
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="padding:0px;">
<table class="table table-bordered" ng-controller="tableCtrl_1">
<tr style="height:70px;background-color:#0C4791;">
<th style="text-align:center;color:white;vertical-align:middle;">Flexi Floor/Low Wall</th>
<th style="text-align:center;color:white;vertical-align:middle;">Cooling</th>
<th style="text-align:center;color:white;vertical-align:middle;">Heating</th>
<th style="text-align:center;color:white;vertical-align:middle;">Nominal Capacities(cooling/heating)</th>
<th style="text-align:center;color:white;vertical-align:middle;">Pipe Length</th>
<th style="text-align:center;color:white;vertical-align:middle;">List Price</th>
<th style="text-align:center;color:white;vertical-align:middle;">Quantity</th>
</tr>
<tr ng-repeat = "getdata in getdata | filter:'Flexi Floor/Low Wall':true">
<td style="vertical-align:middle;text-align:center;">{{getdata.model_no_from}} + {{getdata.model_no_to}}</td>
<td style="vertical-align:middle;text-align:center;">{{getdata.cooling}}</td>
<td style="vertical-align:middle;text-align:center;">{{getdata.heating}}</td>
<td style="vertical-align:middle;text-align:center;"><span style="color:blue">{{getdata.nominal_cooling}}</span><span style="color:red;">{{getdata.nominal_heating}}</span></td>
<td style="vertical-align:middle;text-align:center;">{{getdata.pipe_length}}</td>
<td style="vertical-align:middle;text-align:center;"><span style="font-weight:bold;">{{getdata.system_listPrice | currency: "£"}}</span></td>
<td style="vertical-align:middle;text-align:center;"><button class="btn btn-default btn-large btn-block">Select</button></td>
</tr>
</table>
<table class="table table-bordered" ng-controller="tableCtrl_2">
<tr ng-repeat ="getdata in getdata">
<td style="vertical-align:middle;text-align:center;" colspan="7">{{getdata.sales_description}}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
The second table is just so that I could test and make sure it's pulling in data properly. (turns out it wasn't, as I had to encode in utf-8)
SO TLDR:
controller 1 pulls in main data, populates cells. Click the button in a cell, and it will show hidden cells underneath with controller 2 data.
Problems I am having: matching the secondary data to the ng-repeat of the primary data, using both data sources in one controller area.
image for visual aid:
Image link
This is my technique working with relational data from MySql. Using the angular build in filter to march the main view. In MS access it is a main form and subform. for me I use slim framework to build easy API Slim
Here is the $scope handle the related key.
$scope.showDetail = function(saleId,saleDetails){
$scope.dataDetails = $filter('filter')(saleDetails,{main_id:saleId},true);
}
look at the Plunker
Good luck!
I want to show data in a table with angular js. I have tried many code but didn't solve my problem. Please help
Here is my code of View page..
Script code
<script>
var app = angular.module('myApp', []);
app.controller("customersCtrl", function($scope, $http) {
$http.get('<?php echo base_url('items/getRecords'); ?>').
success(function(data, status, headers, config) {
$scope.users = data;
});
});
</script>
HTML Code
<div ng-app="myApp" ng-controller="customersCtrl">
<table class="datatable table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA" ng-repeat="x in users">
<td style="text-align:center;">{{x.item_code}}</td>
<td style="text-align:center;">{{x.item_name}}</td>
</tr>
</tbody>
</table>
</div>
On Controller
public function getRecords(){
$this->load->model('item_model');
$data=$this->item_model->getTransactionData();
$this->output->set_header('Content-type: application/json');
$this->output->set_output(json_encode($data));
}
And finally on Model
public function getTransactionData(){
$query=$this->db->get('ac_itrans');
return $query->result();
}
Here is Json format of my result:
[{"itrans_id":"17","cocode":"OFLT","yearcode":"OFLT16","vseries":"S","vnum":"1","vdate":"2015-10-06","linenum":"1","item_type":"services","item_code":"26","item_name":"AC Repair"}];
Console log
please read tutorial from here, there is good way to do integrate angularjs with codeigniter php framework.
Apparently, code is correct.
you need to debug to check whether you are getting right JSON format. check this using console.log($scope.user)..instead of data.length.
use devtool to see what it returns. Put that snapshot here.
and don't you need to initialize the user !
$scope.user = [];
Im trying to use Resource in my app and I get the following error:
$injector:unpr
"errors.angularjs.org/1.3.15/$injector/unpr?p0=mkResourceProvider%20%3C-%20mkResource%20%3C-%20mkController".
Here is my Code
app
var logApp = angular.module('mkApp', ['ngResource','ngRoute']);
Controller
angular.module('mkApp').controller('mkController', function ($scope, mkResource) {
$scope.ddl = [];
mkResource.LookUp(function (data) {
$scope.ddl = data;
console.log($scope.ddl);
});});
Resource
angular.module('mkApp').factory('mkResource', function ($resource, $http) {
var lookup = $resource('api/HowOftens');
function LookUp() {
return lookup.query();
}
return {
LookUp: LookUp
}});
HTML
<head>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/jquery-2.1.3.min.js"></script>
<title></title>
<div ng-app="mkApp">
<div ng-controller="mkController">
<table>
<tr>
<td> F Name</td>
<td> L Name</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td>
<slect></slect>
</td>
</tr>
</table>
</div>
</div>
<script src="MkApp/MkApp.js"></script>
<script src="Controller/MkController.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
From all the reading ive been doing i understand its injection error. I don't understand what Im not injecting properly though. The final plan was to load ddls from data I will receive.
You would need to be loading your angular-route and angular-resource (your libs) before you actually load up your angular app files.
I am unable to do a simple sort for my Smart Table Angular module. Shouldn't I just be able to add st-sort="propertyName" to my th?
JS:
var app = angular.module('app', []);
app.controller('SomeController', ['$scope', function($scope) {
$scope.items = [{color:'red'},{color:'blue'}];
}]);
Html:
<html ng-app="app"><body ng-controller="SomeController">
<table st-table="items">
<thead>
<tr>
<th st-sort="color">Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.color}}</td>
</tr>
</tbody>
</table>
</body></html>
If you click the Colors th, nothing happens and the data does not sort. What am I missing? Live demo here: http://jsbin.com/ganine/2/edit
You should add a smart-table module dependency to you app module like this:
var app = angular.module('app', ['smart-table']);
See working example.
You need to load the smart-table script and add the 'smart-table' module reference to your app module definition.
var app = angular.module('app', ['smart-table']);
You can see my changes in jsbin - http://jsbin.com/bunokerife/3/edit