Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

AngularJS

434

Solutions

288

Contributors

AngularJS is an open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hi

In my Angular 2 application, i need to open a popup on button click where i can add  TO address and from address and attach file to the email and send emails..

Can you please provide me a sample code for sending emails in Angular application..
0
Free Tool: Site Down Detector
LVL 10
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I'm learning how to unit test an Angular 2 application and I would appreciate some guidance here. In the function below, I have some code that connects to a SQLite database and runs a transaction. I am trying to understand how to unit test the parts in red (shown in screen shot). Can you please help me to understand how I would write tests that generate coverage?

I am using Jasmine 2.5.3, karma 1.5.0 and angular 4.1.3.

Thank you for advice and guidance.

runSqlTransaction(db: SQLiteObject) {
    this.db = db;
    return new Promise((resolve, reject) => {
      this.db.open().then((res) => {
        try {
          db.transaction(tx => {
            this.tx = tx;
            tx.executeSql(this.sqlQuery, this.params,
              (tx: any, res: any) => resolve({ tx: tx, res: res }),
              (tx: any, err: any) => reject({ tx: tx, err: err }));
          });
        } catch(e) {
          reject(e);
        }

      }).catch(e => {
        console.log('Is the database open failed', e);
      });
    });
  }

Open in new window


Coverage
0
What is the angular 2 version of this jquery code ?

$(this).parents().find('ul#breadcrumb').append('<li>Create </li>'); 

Open in new window

0
Hi ,

I am creating a simple component in Angular 4

-my-account  // angular project folder
--app
----account  // angular component folder
-----css
-----js
-----images
-----account.component.html

//css , js , images are folders I created and put files.


Now I want to use css files from the above css folder in account.component.html.  How do I access ?


Here is my non working code

account.component.html
----------
<head>
 <Link href="css/datatables.min.css" rel="stylesheet" type="text/css"/>
 ....
 </head>
 
 
 I'm getting error
 zone.js:2744 GET http://localhost:4200/css/datatables.min.css 404 (Not Found)

please note this file is already present in css folder.
 
Do you have any suggestion how to access css files in component html   ?  what is the proper way to fix ths issue ?
Need help
1
When I hit ng serve on cmd it's not working although its working 1st & 2nd time but its not working now. All things are running perfectly. eg ng --version .. the problem is only with ng serve ..it only runs for the 1st & 2nd time..

Here is the error that cmd geneartes.

 $ ng serve
    ENOENT: no such file or directory, stat 'E:\Work\Angular\Basic website\Angular 4\my-first-app\src\tsconfig.json'
    Error: ENOENT: no such file or directory, stat 'E:\Work\Angular\Basic website\Angular 4\my-first-app\src\tsconfig.json'
        at Error (native)
        at Object.fs.statSync (fs.js:1000:11)
        at AotPlugin._setupOptions (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@ngtools\webpack\src\plugin.js:62:16)
        at new AotPlugin (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@ngtools\webpack\src\plugin.js:27:14)
        at _createAotPlugin (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:12)
        at Object.exports.getNonAotConfig (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-configs\typescript.js:71:19)
        at NgCliWebpackConfig.buildConfig (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-config.js:29:37)
        at Class.run (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\tasks\serve.js:43:98)
        at 

Open in new window

0
This is my main.html codeThis is my main.html codeThis is my insert.php codeAnd this is the error which always arises whenver i use localhostHi There I have been getting this issue lately. I don't know where this error come from. Whenever I use my localhost(Obviously i need it for my php files to run) this error arises in console

Error in response to storage.get: SyntaxError: Unexpected token <
    at Object.callback (chrome-extension://nkeimhogjdpnpccoofpliimaahmaaome/js/content.js:1:50)
    at chrome-extension://nkeimhogjdpnpccoofpliimaahmaaome/js/content.js:1:22

This error occurs for all files which i open using localhost.But when I used without localhost ie simply open the html file it works just fine.
Currently I'm learning Angular.js
Here I want to insert data in database using ANGULAR & PHP
0
Hi,
I have used AngularJS sound manager(<sound-manager></sound-manager>).
While playing If i click on the progress bar then it is playing from the beginning, how do i start from the selected position.
This is my HTML code:
<sound-manager></sound-manager> <div class="mv-vmPlayer"> <ul> <li><button id="playPreviousTrack" ng-attr-title="{{localize.ux.messageViewer.PlayPrev_btn_label}}" ng-click="widget.onPlayPrevVMClick()" ng-disabled="widget.playPrevDisable"><i class='icon-arrow-left'></i></button></li> <li><button id="playNextTrack" ng-attr-title="{{localize.ux.messageViewer.PlayNext_btn_label}}" ng-click="widget.onPlayNextVMClick()" ng-disabled="widget.playNextDisable"><i class='icon-arrow-right'></i></button></li> <li><button ng-click="widget.pauseTrack()" ng-attr-title="{{localize.ux.messageViewer.Pause_btn_label}}" ng-disabled="!widget.isPlaying"><i class='icon-pause'></i></button></li> <li><button id="playTrack" ng-attr-title="{{localize.ux.messageViewer.Play_btn_label}}" ng-click="widget.onPlayVMClick()" ng-disabled="widget.playDisable"><i class='icon-play'></i></button></li> <span id="spnEmbedTag"></span> <!--<li><button id="widget.playVM" ng-click="widget.onPlayVMClick()" ng-disabled="widget.playDisable"><i class='icon-play'></i></button>--> <li><label>&nbsp;</label></li> <li><label>&nbsp;</label></li> <li><label>&nbsp;</label></li> <li><label>{{ widget.currentPosition }}</label></li> <li> <div class="seekBase" seek-track> <div id= "seekLoad" class="seekLoad 

Open in new window

0
I am very new to the technologies and learning angular js by developing a quiz app using angular js(MEAN stack). I want to mix the questions of Multiple choice questions and fill in the blank questions. I have created multiple choice questions but I am not able to create fill in the blank questions. could someone please give some suggestions, how to create fill in the blank questions.

for example: how ---you?, what --- you doing?. these kinds of questions.

Thanks in advance
0
I am very new to the technologies and learning angular js by developing a quiz app using angular js(MEAN stack). I want to mix the questions of Multiple choice questions and fill in the blank questions. I have created multiple choice questions but I am not able to create fill in the blank questions. could someone please give some suggestions, how to create fill in the blank questions.

for example: how ---you?, what --- you doing?. these kinds of questions.

Thanks in advance.
0
Hello to All,
Scanario:- I have to share product with user and i have two list- 1st connected user list for share product with user and 2nd is the shared user list(sahred product list) if i have click on  the  checkAll checkbox here all checkbox will be check but at time i have to remove 1 user at  a time and click on the shared user list.now again i click on the checkAll checkbox here only 1 user found and i will get 1 update user but here i will be found all user again because i have iterate all the list again,
angular.forEach($scope.selectedSharedBuyerObjectList) - here i will remove the match keyID and updated the 1 user how  to resolve this issue?


/**
 * @Summary: checkAllConnectedUser function, to create album
 * @param: index, productObj
 * @return: callback(response)
 * @Description:
 */
$scope.shardBuyerKeyIdArray = [];
$scope.countBuyer = 0;
$scope.checkAllSharedBuyer = function(isChecked) {
  if (isChecked) {
    if ($scope.selectAll) {
      $scope.selectAll = false;
    } else {
      $scope.selectAll = true;
    }
    angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
      selectedBuyer.select = $scope.selectAll;
      //IF ID WILL BE EXIST IN THE ARRAY NOT PSUH THE KEYID
      if ($scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId) == -1) {
        $scope.shardBuyerKeyIdArray.push(selectedBuyer.userTypeDto.keyId);
        $scope.countBuyer++;
      }
    });
  } else {
    …
0
Free Tool: ZipGrep
LVL 10
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

I have included pdf through embed tag which will display in a modal after clciking the button using  angualrjs, now i want to show a loading spinner till that pdf loads, how can i get to know that pdf is loaded or not and how can i add spinner? Can anyone help me on this??
0
I have the following AngularJs code:
var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$http', function ($scope, $http) {
    
    
    $http.post('/Home/GetDesiredResult', { numberOfRecords: 20 })
        .then(function (response) {
            // success
            console.log(response);
            $scope.desiredResult = response.data;    

             // Over here, $scope.desiredResult contains data       
        }, 
            // Error
            function (response) {
                console.log(response);
        });

    // Over here, $scope.desiredResult is undefined


}]);

Open in new window


What is the cleanest way to get the data I get back from my $http.post saved in $scope.desiredResult so it is accessible in my app?
0
Hello I am using Angular UI Grid to display the data in neat and clean manner. In the UI grid, there is one column as "Duration". I want to sort this column in descending order but unfortunately, i am unable to do that. I tried but it is sorting in text format.
In the controller part I have written as follows:
$scope.sortTrendingEvents = function () {
$scope.slaGridOptions.data = $filter('orderBy')($scope.slaGridOptions.data, "duration", true)
console.log('this button is clicked when trending event is pressed');
};
In the HTML part I have written as:
<button id="toggleFiltering" class="nxn-btn-primary nxn-mar-right-10" ng-click="sortTrendingEvents()">Trending Events</button>

Trending Events
In short what I have done is on the click of a button the Duration column must be sorted in DESC order but with the help of this code,

I am unable to sort this column in number pattern.
Please do guide me. Thank you so much.
0
I am following the tutorial from here: "http://itsolutionstuff.com/post/codeigniter-3-and-angularjs-crud-with-search-and-pagination-exampleexample.html"

I am getting these errors: errors
Where am i going wrong ? i have tried exhaustively to search for answer or hint but i am lost, i am obviously pretty new to codeigniter.
Here is link to github files that i downloaded for tutorial. I appreciate any help or suggestion. Thank You all.
0
I am learning Angular, Node, npm, deployd, mongodb, etc.  I am making my way through a book titled "Pro AngularJS" by Adam Freeman.

on page 120 I am attempting to prepare the data for a "real world" application called "sportsstore".

I was instructed to install a module called "deployd" which apparently is used for modelling  API's for web applications.

I did that and when I try to start start the "deployd" service I get an error:

C:\PROGRA~2\deployd>dpd -p 5500 sportsstore\app.dpd --mongod
starting deployd v0.8.9...
internal/child_process.js:289
  var err = this._handle.spawn(options);
                         ^

TypeError: Bad argument
    at TypeError (native)
    at ChildProcess.spawn (internal/child_process.js:289:26)
    at exports.spawn (child_process.js:380:9)
    at Object.exports.restart (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\lib\util\mongod.js:38:14)
    at Command.start (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\bin\dpd:149:16)
    at Command.listener (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:301:8)
    at emitOne (events.js:96:13)
    at Command.emit (events.js:188:7)
    at Command.parseArgs (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:617:12)
    at Command.parse (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:458:21)
    at Object.<anonymous> 

Open in new window

0
I am exporting a table using pdfmake
The table exports, but there is one item that is 'undefined'.  

I have a main page with multiple tabs and once you hit the 'Printer Friendly' btn, a pdf report opens in a new tab for the specific tab you selected.  The 'printer friendly' btn is what exports the page.  

This code broadcasts  the print function to produce the pdf report depending on what tab you are on.
$scope.printDiv = function(divName) {		
		$rootScope.$broadcast('print');		
	}
	

Open in new window


and the button
<button ng-click="printDiv('rollup-tab')">Printer Friendly</button>

Open in new window



Here is the rest of the code.

Table creation and exports the pdf pdf
$scope.$on('print', function(event, filter) {
			var docDefinition = {

					content: [	
					          {
						  table: {

					              body: [                   			                
					                [ 
					                  '',
					                  'Actual Pieces Issued',
					                  {text: $filter('mcGoalNumberFilter')($scope.actualPiecesMCGoal) + ' /wk'},			                  
					                  {text: $scope.actualPiecesMon, style: 'tableData'},
					                  {text: $scope.actualPiecesTues, style: 'tableData'},
					                  {text: $scope.actualPiecesWed, style: 'tableData'},
					                  {text: $scope.actualPiecesThurs, style: 'tableData'},
					                  {text: $scope.actualPiecesFri, style: 

Open in new window

0
<div class="input-controls">
     <div>
       <label>
        <input #female name="gender" type="radio" value="Female" (click)="gender=female.value"/>
        </label>
       </div>
      </div>

import {Component} from '@angular/core';
@Component({
    selector: 'input-controls',
    templateUrl: './components/input-controls/input-controls.html'
})
export class InputControls {
    gender:string;
}
0
I am using iFrame in my application's html, with ng-src="https://someOtherServer.co,/portal?token=theTokenID&language=en&embedded=true"
This iframe is not loading on IE bubt works in Chrome.

I have already tried adding:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
New Jquery library
but getting nowhere.

ANy help appreciated.

Thanks
0
I have two distinct modules in an Angular app, a parent and a child. They both also have distinct default routing HTML pages. The Parent router has one basic router-outlet setup. However for the Child default route, I have a bootstrap side menu and another router-outlet.

When I go to the Child Module section, the side menu is appearing, however it looks like the Parent router-outlet is being utilized. I've searched for several hours for a resolution to this issue, but cannot find one. Each module (Parent and Child) has their own routing files and modules. And each module file has a distinct reference to a specific HTML initial routing page.

I'm sure this is something simple and stupid (which these things usually are), but any help would be appreciated. The angular.io documentation is so bad that finding anything that falls outside the realm of the 'Hero' demo is a waste of time.

Thanks!
0
Free Tool: SSL Checker
LVL 10
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I am populating a table by adding first column as radio button. Want to select first row radio button as default and fire the radio button event ng-click.

            
<div class="col-5-md col-lg-8">
            <div class="well well-sm">
                <table id="eventsTable" st-safe-src="vm.AllEmployees" st-table="displayCollection" class="table table-striped">
                    <thead>
                        <tr>
                            <th> </th>
							<th st-sort="EMPLOYEE_ID">EMPLOYEE ID</th>
                            <th st-sort="EMPLOYEE_NAME">EMPLOYEE NAME</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr st-select-row="row" ng-repeat="row in displayCollection">
                            <td><input type="radio" value="false" name="eventsRadio" ng-click="vm.onEventSelection(row)" /></td>
                            <td>{{::row.EMPLOYEE_ID}}</td>
                            <td>{{::row.EMPLOYEE_NAME}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

Open in new window


Thanks for your help in advance.
0
calling above using in Angular as:

 function Login(email, password, callback)  
 {  
        var GetAll = new Object();  
        GetAll.email = email;   
        GetAll.password = email;  
        $http({  
            url: "http://localhost:52587/api/TokenAuth/Login",  
            dataType: 'json',  
            method: 'post',  
            data: JSON.stringify(GetAll),       
            headers: {
                      'Content-Type': 'application/json'
                      }      
         }) 
      .then(function loginSuccessCallback(response)
 {...

Open in new window

I've tested this using swagger and ajax which worked fine. I set it up with json object in the body (set to raw and JSON (application/json)).

I have written the following Web API:

namespace WEBAPI.Controllers  
{   
    public class user  
    {   
        public string email { get; set; }   
        public string password { get; set; }  
    }

 [Produces("application/json")]   
 [Route("api/[controller]")]       
 public class TokenAuthController : Controller    
 {

  [HttpPost("Login")]    
  public async Task`<IActionResult>` Login([FromBody]user usr)   
{   
..................               
..................             
}      
}         
}

Open in new window

But I am getting [FromBody ] 415 unsupported media type. Please help me.
Anyone see where I'm going wrong?
0
We have a web page built using angularJS where we are showing the videos of the uploaded videos using JWPlayer,

but When the web page is loaded, the JWPlayer doesn't load the video instead it shows half the width of the actual video width and when the play button is clicked, video is not played instead video starts to download.

This behavior is seen across different browsers, across different systems. However, on certain systems it is playing fine. Also, on certain systems it is playing fine in Chrome but not playing on firefox. The browser setting across the browsers on different systems is the same.

When the element is inspected, different HTML tag is shown for browsers where it is not working and a different HTML is shown for browser where it is working.

For half width player (not working): The 'a' tag is shown with the with href path where the content gets downloaded when clicked on play.(half-image.png)
For full width player (working): The video is wrapped in div container with default player embedded in it and content is played when clicked on play.(full-image.jpg)

After updating the browser and re-logging in, the JWPlayer loads the video with full width in some cases.

versions used:
jwplayer : 0.2.1
ng-jwplayer : 5.9.2118
half-image.png
full-image.jpg
0
I am exporting a table as a pdf using the pdfmake library.  (http://pdfmake.org/#/gettingstarted)
This is accomplished correctly when I select one specific route and one table is successfully exported.  However, when I select 'All' within the Route filter, multiple tables appear in the main page and I want to export all those tables as one pdf when a user selects 'Route: All'.

I have several tabs created for my page each of which contains their own table data.  

There is a print btn in the html, which also contains the creation of the tabs as well as the btn
<button ng-click="printDiv('rollup-tab')">Printer Friendly</button>

Open in new window


Within the js, this broadcasts to the tab you are currently on and is called
$scope.printDiv = function(divName) {
		//BROADCAST TO EACH TAB
		$rootScope.$broadcast('print');	
		
	}

Open in new window


Within the lcp.js file (lcp tab), it makes a call to the broadcast, which exports the table as a pdf.
$scope.$on('print', function(event, filter) {

			var docDefinition = {
					info: {
					    title: 'LCP'
					    
					  },
					content: [
					          
							{
							    margin: [0, -40, 0, 30],	 	
								image: 'data:image/png;base64,iVBORw0KGgo......'
								width: 200,
								height: 58,
								style: 'centerImage',

							  },					  
					         
					         {
						        	  fontSize: 9,
								       margin: [0,-30, 0, 10],
								       
									  table: {
										  headerRows: 1,
										  

Open in new window

0
After upgrading to node.js 7.5.0, I encountered this error too:  Loading "grunt-karma.js" tasks...ERROR >> TypeError: Cannot read property 'prototype' of undefined
0
how to send the combined parameters of both sorting and paging to add back end query
0

AngularJS

434

Solutions

288

Contributors

AngularJS is an open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.