I have included angular.min.js and related controller and Service files in _Layout.cshtml. It throws me an error and takes me to this link
https://docs.angularjs.org/error/$injector/nomod?p0=OmsApp
However when I exclude Layout page and put those scripts in my child page, it works. Is there anything I am missing.
_OmsLayout.cshtml
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<title>_OmsLayout</title>
<link href="~/Content/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/assets/css/OmsStyles.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"> </script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="~/Scripts/Controller/OmsController.js"></script>
<script type="text/javascript" src="~/Scripts/Service/OmsService.js"></script>
</head>
<body>
<div class="container-fluid" ng-app="OmsApp" ng-controller="OmsCtlr">
#RenderBody()
</div>
</body>
</html>
Child Page
#{
ViewBag.Title = "ProductsList";
Layout = "~/Views/Shared/_OmsLayout.cshtml";
}
<h2>ProductsList</h2>
<div class="row">
<div class="col-md-2 col-sm-2">
<img src="~/Content/assets/images/DotNet_4.5.jpg" height="200" width="200" class="img-responsive CursorPointer" />
<span class="CursorPointer" ng-click="ProductsCount();">Add to Cart</span>
</div>
<div class="col-md-2 col-sm-2">
<img src="~/Content/assets/images/DotNet_4.5_2.jpg" height="200" width="200" class="img-responsive CursorPointer" />
<span class="CursorPointer" ng-click="ProductsCount();">Add to Cart</span>
<input type="button" ng-click="ProductsCount();" value="Click" />
</div>
</div>
My Controller
var app = angular.module("OmsApp", []);
app.controller("OmsCtlr", function ($scope) { $scope.ProductsCount = function () {
alert("Hi");
};
});
Related
I am trying to get a small angular app up and running but am receiving the same error every time I load my app:
Error: $injector:modulerr
Module Error
Failed to instantiate module app due to:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24scope
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:7:76
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:65
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:43:280)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:6)
at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:91)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:237)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:376
at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:8:7)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:138)
at gb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:251
Here is a snippet with my index.html file and my app.js file:
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function($scope){
$scope.submit = function() {
console.log("yay");
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
Please let me know if any other information would be helpful! Thank you.
You cannot inject $scope to config. $scope is only accessible in controller and directive.
I think you are looking for controller?
app.controller('yourCtrl', function($scope){
// your code
});
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function(){
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
I got a list generated using angular 'ng-repeat', and I want if one item is clicked it will pop a popover to show some info. I tried several time but seems it doesn't work fine.
see plunker
a list demo in plunker
my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script data-require="ui-bootstrap#0.4.0" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top">
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here i added sample code..
You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):
<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>
The datepicker directive was also not being called, because it requires "uib-" (note uib-datepicker):
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>
And check output..
I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
I'm not getting any error in console, but ngView is also not updating
index.html
<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">Demo Work</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
Dashboard
</li>
<li>
Charts
<ul class="nav nav-second-level">
<li>Flot Charts</li>
<li>Morris.js Charts</li>
</ul>
</li>
<li>
Tables
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div data-ng-view>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
</html>
dashboard.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
tables.html
It has also some code same as dashboard.html
app.js
var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'page/dashboard.html',
controller : 'contactController'
})
.when('/tables',{
templateUrl: 'page/tables.html',
controller: 'tablesController'
});
});
demoProject.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
demoProject.controller('tablesController',function($scope){
console.log("Tables controller");
});
You need to load the app.js after loading angular route
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
I'm trying to develop an app with the ionic framework and typescript, but I'm receiving this error at ionic.bundle.js:
rrror: [ng:areq] Argument 'MainViewModel' is not a function, got undefined
This is my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TodoApp</title>
<script src="cordova.js"></script>
<link rel="stylesheet" href="css/index.css" />
<link href="Content/ionic.css" rel="stylesheet" />
<script src="scripts/ionic.bundle.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/app/ViewModels/MainViewModel.js"></script>
<script src="scripts/app/index.js"></script>
</head>
<body ng-app="app" ng-controller="MainViewModel">
<div class="bar bar-header bar-light">
<h1 class="title">Todo</h1>
</div>
<ion-content class="has-header">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="New Todo"/>
</label>
<div class="button button-small">Add</div>
</div>
</div>
</ion-content>
</body>
</html>
and here I'm setting up angular:
angular.module("app", ["ionic"])
.controller("MainViewModel", MainViewModel);
Does someone recognize the problem?
you are missing callback function inside controller.
Here is the mistake
angular.module("app", ["ionic"])
.controller("MainViewModel", function ($scope){
//yourcode
});
I'm trying to do a simple project with KendoUi + AngularJs.
When I use the code below, it works fine:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
</script>
</body>
</html>
But, when I try to separate the angular code into a .js file, (like below), it doesn't work anymore:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
<script src="Scripts/app/itensApp.js"></script> <!--ADDED-->
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
</body>
</html>
Scripts/itensApp.js
(function() {
var itensApp = angular.module('KendoDemos', ["kendo.directives"]);
}());
What I'm doing wrong?
Regards
It seems that you did not add the controller to your file.
Here's the code for the external .js file:
angular.module("MyApp", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
Here's a working example:
http://plnkr.co/edit/3vRqvvvQZ8w6RRVohVdi?p=preview