Hi I am a new comer to angular js. when I load the page it shows two errors
1 - Error: [$injector:unpr]
2 - Error: [$injector:cdep]
HTML
index.html
<body ng-app="MyApp">
<nav>
<!-- navbar items displaying here -->
</nav>
<div ng-view></div>
</body>
<script src="libs/js/angular.js"></script>
<script src="libs/js/angular-route.min.js"></script>
<!--angular controller file-->
<script src="libs/apps.js"></script>
<script src="libs/controller.js"></script>
<!--Other UI Libraries-->
<script src="libs/js/jquery.min.js"></script>
partials/developers.html
<section class="developer">
<div class="container-fluid">
<div class="col-md-9 col-md-offset-3">
<form ng-submit="check()">
<div class="form-group">
<div class="col-md-6">
<input type="text" class="form-control" autofocus="true" ng-model-options="{debounce: 300}" ng-model="search" placeholder="Search text here"/>
</div>
</div>
</form>
</div>
<div class="sort col-md-5 col-md-offset-3">
<label class="formgroup">Sort By</label>
<select ng-model="order">
<option value="name" selected="selected">
Name
</option>
<option value="org">
Organisation
</option>
<option value="designation">
Designation
</option>
</select>
<label class="formgroup">
<input ng-model="direction" type="radio" name="order" checked>
Ascending
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" name="order" value="reverse">
Descending
</label>
</div>
<div class="col-md">
<div class="col-md-9 col-md-offset-3">
<div class="col-md-6 mydiv" ng-clock>
<ul ng-show="search ">
<li class="items" ng-repeat="item in list | filter:search | orderBy:order:direction" ng-model-options="{ updateOn: 'blur' }">
<label class="lbl">Name</label><p class="text name" ng-bind="item.name"></p>
<label class="lbl">Designation</label><p class="text desig" ng-bind=" item.designation"></p>
<label class="lbl">Organisation</label><p class="text org" ng-bind="item.org"></p>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</div><!--Container fluid closes-->
</section>
app.js
var myApp = angular.module("MyApp",[
'ngRoute',
'appController'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/list',{
templateUrl : 'partials/developers.html',
controller:'DeveloperController',
}).
otherwise({
redirectTo: '/list'
});
}]);
controller.js
var appController = angular.module("appController", []);
appController.controller('DeveloperController', ['$scope','$http',function($scope,$http) {
$scope.name="asdsas";
}]);
see the console image here
EDIT
this is my directory structure of project. will it make any trouble. I'm not running it on wamp or any other server.
anyone please help me to sort it out
The error is caused due to missing inclusion of ngRoute module. It needs to be included separately
Try including the following in your scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
Refer this for more details.
the code provided for index.html is incorrect.
See if this helps
<div ng-app="MyApp">
<div ng-view>
</div>
</div>
Related
Im using angular 1 for the data binding from the form to the next view using the routing module to display the html structure form the different files, it i have all the html code in one file the prototype works perfect, but when i use the routing module the data is not binding through the links,
In the following link im using only css for the transitions so all the html is in one file and not using the routing module and there it works http://jspmultimedia.com/angular-cv-css/#form
and in the next link is where is not working using the routing module
to pass the data from the form to be displayed in the next view.
http://jspmultimedia.com/angular-cv-route/#!/form
var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
$routeProvider
.when("/", {
controller : 'myCtrl',
templateUrl : 'dashboard.htm'
})
.when("/form", {
controller : 'myCtrl',
templateUrl : 'form.htm'
})
.when("/result", {
controller : 'myCtrl',
templateUrl : 'resultdashboard.htm'
})
.otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
$scope.position = [
"Front-end Web Developer",
"Back-end Web Developer",
"UI / UE Designer"
]
//add skills
$scope.skills = [];
$scope.addItem = function () {
$scope.skills.push($scope.addMe);
}
//remove skills
$scope.removeItem = function (x) {
$scope.skills.splice(x, 1);
}
});
this is the form.htm
<!-- FORM -->
<form id="form">
<div class="form-group row"><!-- Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
<div class="col-10">
<input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Last Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
<div class="col-10">
<input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Short Description -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
<div class="col-10">
<textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
</div>
</div>
<div class="form-group row"><!-- select Position to apply -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
<div class="col-10">
<select ng-model="selectedPosition" class="form-control form-control-lg">
<option value="" selected disabled hidden>Choose here</option>
<option ng-repeat="x in position" value="{{x}}">{{x}}</option>
</select>
</div>
</div>
<div class="form-group row"><!-- add skills -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
<div class="col-4">
<ul>
<li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
<span ng-click="removeItem($index)" style="cursor:pointer;">×</span>
</div>
</li>
</ul>
<input class="form-control" ng-model="addMe">
<button ng-click="addItem()" class="btn btn-primary">Add</button>
</div>
<div class="clearfix">
</div>
<div class="image-upload"> <!-- Image Upload preview -->
<input type="file" class="form-control-file" onchange="readURL(this);" />
<img id="preview-img" src="http://placehold.it/180" alt="your image" />
</div>
</div>
<!-- FINISH CTA-->
Finish
</form>
and at last the resultdashboard.htm
<!-- Result dashboard CV -->
<div id="resultDashboard">
<div class="row col-12">
<div class="col-3">
<img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
</div>
<div class="col-6">
<h1>{{ name + " " +lastName}}</h1>
<p>{{shortDescription}}</p>
<div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
</div>
<div class="col-3">
<h3>Main Skills</h3>
<ul>
<li ng-repeat="x in skills"> {{x}}
</li>
</ul>
</div>
</div>
</div>
i'm assuming i must be missing something with the controller if anyone can take a quick look please i would really appreciate it, the prototype is suppose to be a CV upload just to learn how to use angular 1 and then go ahead with other libraries, i think understanding the routing is a big step for me. anyways thank you.
Add the controller in your HTML - like ng-controller="myCtrl"
I have created dynamic forms with ng-repeat directive. I am getting form field according to userid value. Once I have filled every field in form my add user button should be enabled. As of now its not enabled. I have attached my code below.
My html code:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1"></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="!(myid && manualComment && gender)" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
my app.js file
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3]
});
How can I enable add user button once all field are filled?
Update:
If you want to convert your initial array from the server to a usage array check this fiddle
JSFiddle Demo
If you want an object which contains all the form values, please refer to the below fiddle!
JSFiddle Demo
Based on the statement below, this is my solution.
How can I enable add user button once all field are filled?
I have added the required attribute to all the input fields, the form name userForm is a variable in the scope. It has its validation variables, in my case I am using userForm.$invalid which will be true unless all the fields with required attribute are filled. The Add User is disabled by using the ng-disabled attribute, check the below JSFiddle for a demo.
JSFiddle Demo
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
</div>
I am a new programmer and I have a little question. This is a part of my code:
<script type="text/html" id="experienceTmpl">
<li class="clearfix">
<div class="page-header no-border holder">
<a class="btn btn-icon-toggle btn-accent btn-delete stick-top-right"><span class="md md-delete"></span></a>
<h4 class="text-accent">Food Items
<%=index%>
</h4>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="experience-company-<%=index%>" placeholder="Food Item" name="experience-company-<%=index%>">
<label for="experience-company-<%=index%>"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="experience-functiontitle-<%=index%>" placeholder="Price" name="experience-functiontitle-<%=index%>" data-rule-number="true">
<label for="experience-functiontitle-<%=index%>"></label>
<p class="help-block">Digits only</p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="select1-<%=index%>" name="select1-<%=index%>" class="form-control" placeholder="Select" required>
<option value="Full Plate">Full Plate</option>
<option value="Half Plate">Half Plate</option>
<option value="Quarter Plate">Quarter Plate</option>
</select>
<label for="select1-<%=index%>"></label>
</div>
</div>
</div>
<div class="form-group">
<input type="text" multiple name="cuisine" class="tagsInput" value="Afghani,Mughlai" data-url="cuisine.json" data-user-option-allowed="true" data-load-once="true" required />
</div>
</li>
</script>
My question is how can I add this script in this html template so the class in input tag call this script:
<script type="text/javascript">
$('.tagsInput').fastselect();
</script>
Is this Possible to call this script in the html template please provide the solution I'm totally blank.
I think best way to do this is, when rendering particular script/html template dynamically add javascript to DOM.
Detail:
In application level you know which template is going to rend in the page. make separate JS files for each template id's and inject active template related javascript file to DOM.
Note:
This is like you are going to create template engine. Best way to use existing template engine such as Handlebars,JADE,Underscore. it will save your development time and reduced bugs.
I'm trying to use this library to implement dateTimePicker in AngularJS: Angular-Datetimepicker
I install the library with Bower, injected the module and I copy/pasted the example code.
Controller:
// Disable weekend selection
$scope.isDisabledDate = function(currentDate, mode) {
return mode === 'day' && (currentDate.getDay() === 0 || currentDate.getDay() === 6);
};
View:
<datetimepicker ng-model="date"
date-format="dd-MMM-yyyy"
date-options="dateOptions"
date-disabled="isDisabledDate(date, mode)">
</datetimepicker>
The problem is that the date field is empty and in the console I have those two errors:
angular.js:12520 Error: [$compile:tplrt] Template for directive 'uibDatepicker' must have exactly one root element. uib/template/datepicker/datepicker.html
angular.js:12520 Error: [$compile:tplrt] Template for directive 'uibDatepickerPopupWrap' must have exactly one root element. uib/template/datepicker/popup.html
UPDATE: this is the new html, I sourrounded the tag with a element:
<div class='form-group'>
<datetimepicker ng-model="appointment.date"
date-format="dd-MMM-yyyy"
date-options="dateOptions"
date-disabled="isDisabledDate(date, mode)">
</datetimepicker>
</div>
The whole html of the form is the following:
<div ng-controller='createAppointmentCtrl'>
<div class="row">
<div class="col-xs-12">
<div class='form-group'>
<label class="control-label">Select client</label>
<select ng-model="appointment.customer" class='form-control'>
<option value='0'>New client</option>
<option ng-repeat="client in clients_list" value="{{client.id}}">{{client.name}} {{client.surname}}</option>
</select>
</div>
<div ng-show="appointment.customer == 0">
<div class='form-group'>
<label>Name</label>
<input ng-model="appointment.name" type="text" placeholder="name" class="form-control">
</div>
<div class='form-group'>
<label>Surname</label>
<input ng-model="appointment.surname" type="text" placeholder="surname" class='form-control'>
</div>
</div>
<label class='control-label'>Date</label><br>
<!--<input ng-model="appointment.date" id="expiry" name="expiry" type="datetime-local" required><br>-->
<datetimepicker ng-model="appointment.date"
date-format="dd-MMM-yyyy"
date-options="dateOptions"
date-disabled="isDisabledDate(date, mode)">
</datetimepicker>
<label class='control-label'>Price</label>
<input ng-model="appointment.price" type="number" placeholder="price" class='form-control'>
<button class='btn btn-primary' ng-click="create(appointment)" style='margin-top: 25px'>Generate appointment</button>
</div>
</div>
<div class='row'>
<div class="col-xs-12" ng-show="generated_link" style='margin-top: 25px'>
<label class="control-label">Generated link</label>
<input type="text" readonly="readonly" value="{{ generated_link }}" class='form-control'>
<div class="row">{{message}}</div>
</div>
</div>
</div>
Taken from my comment:
Make sure to include the ui.bootstrap dependency in your application, as well as well as the ui-bootstrap-tpls.js file which includes the html templates for the directives themselves.
I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}