Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

Angular

469

Solutions

310

Contributors

Angular is a JavaScript 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–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end 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

Hello - I am playing with an input box with typeahead/completer style functionality in Angular 2+. Its been set up so that a user starts typing...the completer suggests items based on what is being entered...and the user clicks on the selection they want.

What they have selected from the completer drives what is displayed in a table. All that is working fine.

What I am not sure how to do is...if the item they select should have multiple rows in the table...lets say if the completer is searching a list of customers to display orders...but the customer they select has multiple orders.

*ngFor is not working for me...because I get an error telling me it can only be used with an array.

The way things are set up with the completer...i have this code in the component.ts file setting the selected item. It looks in a users array, and sets the item selected to selectedUser.

   protected onCompleterSelect(item: CompleterItem) {
   console.log(item)
   if (item && item.originalObject) {
     console.log(this.users.find(user => user.ID === item.originalObject.ID))
     this.selectedUser = this.users.find(user => user.ID === item.originalObject.ID) ;
    
  }

}

Open in new window


Then in my html file the table is being built based on the selected user.

<table class="table">


   <th rowspan="1" colspan="4" >
     PERSONAL INFORMATION

   </th>
   <tr>
     <td>ID</td><td>{{selectedUser && selectedUser.ID || " " }}</td>
     <td>Name</td><td>{{selectedUser && selectedUser.Name || " " }}</td>
     
   </tr>
  

   </table>

Open in new window



When i try to add an ng-container  with *ngFor...it complains the ngFor needs an array...which because the "selectedUser" is being set in the componet.ts file...where its looking through the array there and specifing the selectedUser based on what the user clicks on when using the completer. ...its not happy.

I have tried a handful of ways to use the *ngFor  ...but it does not work.

Some of the items I have tried are
<ng-container *ngFor="let selectedUser of users">

Open in new window


or
<ng-container *ngFor="let x of selectedUser">

Open in new window

0
Free Tool: IP Lookup
LVL 11
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

HTML front-end development has its own limitations as it may be good for static pages but not much capable for dynamic applications. This is where a framework like AngularJS Development fits in – by enhancing the capability of HTML by several notches. And the end result is extremely functional as we
0
Can anyone please help or guide me on setting up  Angular  CLI  with Jenkins? I am  setting up  a Development environment for a new  Project
0
I've been trying to get this ng-idle example working and got help yesterday from Leakim and Leonidas here  The answer helped but I have an issue now....


You can see it here http://147.75.0.124:88/

1. I first put the ng-idle on the front page as an example and that works. You see that it pops up.
    I did it by changing module.js and I have config with  run
          I also change loginController and added the popup code to index.cshtml

That worked but I want it inside the site itself so I did this  Please login with this admin@admin.test /Password321$

2. Changed "mainController.js" and added
 
 angular
        .module('lawApp', ['ngIdle', 'ui.bootstrap'])
        .controller('mainCntrl', mainController)
    .config(function(IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }).run(['Idle', function (Idle) {
            Idle.watch();
        }]);
  

Open in new window


3. Added the ng-idle code to mainController.js

4. Added the popup code to the razor code

The idle popup displays but look at console and now the other controllers are broken. "feedController" is not defined anymore. Click on "Forms" and FormController is not defined anymore either.

Things I tried:

I added 'ngIdle' to feedController but didn't work
Changed the order of the controllers I call but then mainController throws an error

I know adding .module('lawApp', ['ngIdle', 'ui.bootstrap'])  to mainController is making the other controllers not get initialized. I've read about it on a link Julian Hanson sent me once. I fixed them a while back and now running into it again because I added ng-idle.

Please don't suggest rewriting this in Angular 2
0
Hi Experts:

I have a index.html file. I have an autocomplete function written in jQuery script. It appears an old design now. I want to port this design and implementation to a new design executed in angularJS.

The properties of my design is as soon as you click in Flying From and Flying to Box it will reset itself. As you type characters it will show matched destination.

For the new solution I want few popular destination as default choice on top. Or as soon as you click in the input box it should give you those options in the dropdown list of options.

Then the matched options as characters are printed. Code with few examples would be great help. In AngularJS apparently it can be very simply done. These input boxes can never be empty.

Look forward to your responses.

Best Regards

Sunnybrad

Open in new window

index.html
0
Hello - I'm trying to figure out how to override CSS to make an input box larger.

I downloaded code from github for an ng2 completer (that provides typeahead functionality).
https://github.com/oferh/ng2-completer

I'm trying to make the input box tied to the <ng2-completer> larger and am not having a lot of luck.

I'm seeing some options on-line on items to try...but many of them seem to be depreciated. I do not want to spend time trying to learn something that is being depreciated...so thought I would see if someone could provide some guidance on which method to pursue.

Some sites seem to say that specifying a css style in the components .css file...starting wit with ":host" could do the trick...but I tried that and it did not work.
Css entry:
:host .completerWidth {
  width: 650px;
}

used in HTML by:
<ng2-completer class="completerWidth"
...other completer settings...
closing >

That does not work...works on a regular input box...but not the ng-completer.

Two other items I have tried...

I tried specifying styling in the global css file and using it in the component with the ngcompleter...no luck.

I have also tried viewing the underlying code of the ng completer and determining where the width is specified so I can change it...and have not been able to pinpoint the correct place.

Any tips you can provide would be greatly appreciated.  

Thanks,
0
Time to get some help because this the 3rd day that I'm trying to figure out what I'm missing

1. I'm following this example ng-idle example
I found other examples as well and this is another Another example

2. You can see it here. I have the "start demo" button on the front page
http://147.75.0.124:88/

3. In module.js, I have this. I step thru it and I see 'Idle' is defined

(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap', 'ngIdle'])
    .config(["IdleProvider", "KeepaliveProvider", function (IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }])
        .run(['Idle', function (Idle) {
        Idle.watch();
    }]); //['ui.bootstrap']  I moved this to login page and it works fine. Having it here and not having it in the login page also works

  
})();

Open in new window

4. I put the rest of the code from the demo in logincontroller.js

 function loginController($scope, loginService, $uibModal,Idle,Keepalive)
   {
       .....

            //*** idle

       $scope.started = false;

       function closeModals() {
           if ($scope.warning) {
               $scope.warning.close();
               $scope.warning = null;
           }

           if ($scope.timedout) {
               $scope.timedout.close();
               

Open in new window

0
How  can  I   run  NPM  commands behind a company  corporate proxy server?I tried to google online with no  success.
npm config set proxy http://xxx.cc.zz:8080
npm config set https-proxy http://xxx.cc.zz:8080
0
i have a service where i am using observable, it working fine when i am using it in my component and no url change but when my url change then observable which i updated last not provide me that value ...

service instantiate in my main module that is app module...

any help will be helpful.... thanks..
0
Have  an HTML5 "tel" control and I wanted the user to enter phone number with any of the following format

(404) 555-1111
404-555-1111
40405551111

I have an ng-pattern to handle the 10 digit. The max length should be between 10 and 14
ng-pattern = "/^(\d{10})$/"

How can I create a regular expression to do this,,

Thanks for your help
0
Receive 1:1 tech help
LVL 11
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Hi Experts:

I have this angularJS code. This has few airline flight data, I need the following filters:
1. To display only one airline flights e.g. Delta only or United only.
2. Given a min max price range. I need to display flights only in that range. Say, the range is 100 USD till 125 USD. I need flights within the range of 100...125.
3. I need to display flight taking off before 10 AM.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<table ng-controller="myCtrl">
<tr ng-repeat="x in flights">
  <td>{{x.no}}</td>
  <td>{{x.from}}</td>
  <td>{{x.to}}</td>
  <td>{{x.starttime}}</td>
  <td>{{x.reaching}}</td>
  <td>{{x.Duration}}</td>
  <td>{{x.price}}</td>
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.flights = [
    {no:'DL 123', from:'SFO', to:'DEN', starttime:'7 AM', stop:'0', reaching:'9 AM', Duration:'2h', price:'100 dollars'},
    {no:'UA 123', from:'SFO', to:'DEN', starttime:'9 AM', stop:'1', reaching:'9 AM', Duration:'2h', price:'120 dollars'},
    {no:'VX 123', from:'SFO', to:'DEN', starttime:'12 PM', stop'2', reaching:'9 AM', Duration:'2h', price:'130 dollars'}
  ]
});
</script>

</body>
</html>

Open in new window


Please help me out with slight controller code.

Best Regards

Sunnybrad
0
Hi,

Very Sorry for my silly question, I need to take seminar related  best recent IT technologies now . Please give some idea to choose recent IT technologies currently. And also that seminar topics useful for others.

Better topic related php  ,JS , Jquery, Angular JS etc.
0
My <courses> is not being listed out in my 'app.component.html' file.  The reason is because 'this.courses = service.getCourses();' in my 'courses.component.ts' file return undefined and I'm not sure why.  I am new to Angular and was going through a udemy course.

app.component.html
<h1>Angular</h1>
<courses></courses>

Open in new window

courses.component.ts
import { CoursesService } from './courses.service';
import { Component } from '@angular/core';

@Component({
    selector: 'courses',
    template: `
          <h2>{{Title}}</h2>
          <li *ngFor="let course of courses">
            {{ course }}
          </li>
          `
})

export class CoursesComponent{
    title = "List of courses";
    courses;

    // getTitle(){
    //     return this.title;
    // }

    constructor(){
        let service = new CoursesService();
        console.log("service:"+service.getCourses())
        this.courses = service.getCourses();
    }
}

Open in new window


courses.service.ts
export class CoursesService{
    getCourses(){
        return ["Course1","Course2","Course3"];
    }
}

Open in new window

1
For a .net developer who already has experience with asp.net web forms, MVC, sql server, entity framework, jquery, JavaScript, bootstrap, HTML5, css3.and now wants to learn angular.

What's the best version of angular to start with?

I know that Angular 2 is a complete re-write from the first version of Angular.

I notice a lot of the books out there on the market are on Angular 2 and a few are on Angular 4.

So would it just be best to start learning Angular with Angular 2 and use books, videos and other online articles?

Or in your opinion what's the best approach?
0
I need to allow users to upload their financial reports (PDF or CSV) to my site, but enable them to obscure private data (Business Name, Merchant Account Numbers, etc.) before any data gets stored to the disk.

I need to use Angular to create a list of user data fields extracted from the PDF and display them for approval, perhaps with a checkbox next to each field. Fields which contain that merchants proprietary data need to be then be checked off by the user so those fields would be populated with XXXXX's.

I do not want to store that PDF onto my server. Instead, I want the user to select the fields needing to be hidden. Or even ignore them altogether. I just do not want that PDF on my server.

So, the question is...

Can Angular extract the contents of a PDF that has been uploaded? And a PDF that does not exist on disk?

I could save the extracted data onto my server in some other fashion, not yet decided.

I prefer Angular 4, and hope this functionality exists in Angular 4.

It's an interesting challenge. I see Angular as a great platform for nested logic and as a place to store objects and lists of objects. And to do the first part of processing this data on the client is what intrigues me.

Thanks.
0
ttip.docxHi All:

I had a really simple question. How do you combine options and tooltip to have this effect as you see in modern travel portal. I have included a document displaying a above mentioned effect. A small example would be really helpful. I guess it is a combination of option and tooltip.

Look forward to your responses.

Best Regards,

Sunnybrad
0
Hi:

I have to add remove input fields dynamically in angularJS. I am including a working Javascript implementation below:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.sanwebe.com/wp-content/cache/minify/e907d.js"></script>
<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });
});
</script>
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

</body>
</html>

Open in new window

I need the same things in angularJS to start with. This implementation is Javascript and uses a Javascript library. This is essentially https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
this example.

A working example of same thing in angularJS would be great.

Best Regards

Sunnybrad
1
Hi,

I want to add page loading spinner in my Angular 2 application.. I have some side bar subscriptions which added in main component and calling the side bar subscriptions  like print, when it takes tile to print or search i want to show the loading spinner,,

Thanks!
0
Hello - I am trying to figure out how to pass data to a child component in Angular 2.

Here is what I have done so far...

The Parent Component is the default app component that comes with the Angular 2 shell when you create a new project.  The child component is main-test.

Based on material I find on-line...the first thing I did was import Input from Angular/core. Then I tried to invoke the Input in the export class as shown below. This is the child component main-test.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-main-test',
  templateUrl: './main-test.component.html',
  styleUrls: ['./main-test.component.css']
})
export class MainTestComponent implements OnInit {
 @Input()
 dataPass: number;

  constructor() { }

  ngOnInit() {
  }

}

Open in new window



Then...in an attempt to test things...I tried to pass just one field from the users array from the parent component to the child component. To do this...in my parent component HTML file...I added "<app-main-test [dataPass]="user.id"> </app-main-test>"

app.component.html:

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<div>

<app-main-test [dataPass]="user.id"> </app-main-test>

</div>

Open in new window





Here is the parent .ts file:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class 

Open in new window

0
Free Tool: ZipGrep
LVL 11
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.

Hi:

I have a html display issues. In a page there is data coming in for display. All rows gets displayed except one. In the example attached there is missing department information for executive Gelena Weissman.
I am posting the code snippet html code, and the controller angularJS code.

                  <th width="20%">
                    <div class="cursor" ng-click="exec.sort('department')">
                      <span>Department</span>
                      <span class="glyphicon sort-icon pull-right" ng-show="exec.sortKey=='department'" ng-class="{'glyphicon-chevron-up':!exec.reverse,'glyphicon-chevron-down':exec.reverse}">
                           </span>
                    </div>
                    <input ng-show="test != true" type="text" ng-model="exec.search.department" class="form-control" placeholder="" ng-disabled="hideAddMe || testme">
                  </th>

function executiveSaveOpen(dataSave) {
            if (dataSave !== null) {
                if (vm.StringCheck === true) {
                    $rootScope.loadErrorModal(dataSave, 'validDate');
                } else {
                    if (dataSave.fromDate > dataSave.toDate) {
                        $rootScope.loadErrorModal(dataSave, 'dateCheck');
                    } else {
                        vm.dataSave = {
                            //"projectId": vm.projectId,
                            "fromDate": dataSave.fromDate,
                            "toDate": …
0
I am doing an HTTP post call to a database to pull information to load an audio player.

I am successful getting a JSON string with the desired details.

What I'm having trouble with is passing one of the JSON variables to the audio player as the source.

Here's a bit of code that shows what I'm trying to do.

<h1>{dir.dv_talent}</h1>
<h2>{{total_time}}</h2>

<audio id="player" my-audio>
    <source src="/radio/{{dir.dv_file}}.ogg" type="audio/ogg" />
    <source src="/radio/{{dir.dv_file}}.mp3" type="audio/mpeg" />
</audio>

Open in new window


So what works is the <h1> tag that displays the Talent Name and the <h2>Tag that gives the total time.  I also know there is valid data for dir.dv_file but when I inspect the code, it shows it as {{dir.dv_file}}.

So what that indicates to me is that the {{dir.dv_file}} is not converted to the passed variable inside of the <audio> tag.

So my question is how do I get that variable to be passed within that <audio> tag.
0
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <style>
        <style>
   body{ margin:2em;}
      fieldset { display:inline-block;border:1x solid red; padding: 0px 40px 0px 20px; }
      legend {
        padding: 0.2em 0.5em;
        border:1px solid red;
        color:#fff;
        background-color:red;
        font-size:90%;
        width:auto;
      }
      #raidFrieght{
            margin: 10px 0px 10px 0px;
            padding-bottom: 4%;
      }
    table,
    th,
    td {
    border: 1px Solid black;
    border-collapse: collapse;
    }
    th {
    background-color: red;
    color: #fff;
    }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
      <fieldset>
        <legend> <b>Port Cost <b> </legend>
            <tr style="padding-right:10px;"> Rate </tr>
            <input style="margin-left:4%;" id="rbl_ratetype_0" type="radio" name="rbl_ratetype" value="1" checked="checked" />
            <label for="rbl_ratetype_0">Inbound</label>
            <input style="margin-left:4%;" id="rbl_ratetype_1" type="radio" name="rbl_ratetype" value="2" onclick="javascript:setTimeout('__doPostBack(\'rbl_ratetype$1\',\'\')', 0)" />
            <label for="rbl_ratetype_1">Outbound</label>
            </tr>
            </tr>
       
  <!--CREATE A TABLE-->
        <table>
            <tr>
               <th style="width:5%">SNo</th>
                        <th Style="width:30%">CostHead</th>
               …
0
Hi All:

I have an application that adds one line of input in the form.

I have to change it such that it adds multiple lines of input in the application.

The addition is done via an angularJS controller.

I have attach screenshot of both html code and angularJS controller code.

Look forward to your  responses.

Best Regards

Sunnybrad
Screen-Shot-2017-12-15-at-10.21.28-A.png
Screen-Shot-2017-12-15-at-10.22.26-A.png
Screen-Shot-2017-12-15-at-10.22.41-A.png
Screen-Shot-2017-12-15-at-10.23.22-A.png
Screen-Shot-2017-12-15-at-10.23.35-A.png
Screen-Shot-2017-12-15-at-10.23.48-A.png
0
I am having some trouble getting HTTP Post data to transfer from a PHP database call.  Here are the pieces of code (all of these code pieces are shortened to only show the most critical parts to diagnose):

HTML Part One
This is set up so that a previous selection displays a drop down menu of options that come from a correctly working DB call. When the user hits Submit, it runs the AngularJS call below to do another DB call to request additional data.
                    <p>
                     <select name="devo" ng-model="devo" class="form-control">  
                          <option value="">Select a Devotional</option>  
                          <option ng-repeat="devo in devos" value="{{devo.dvID}}">{{devo.dv_title}}</option>  
                     </select>  
					</p> 
               		<p>
               		    <button type="submit" id="frmsbmt" class="btn btn-primary btn-xl wow tada" ng-disabled="devoFm.$invalid" ng-click="submitDv(devo)">
                                View Devotional<i class="fa fa-sign-in"></i>
                  		</button>
					</p>

Open in new window


HTML Part Two
When the data comes back from the HTTP post call, it then displays in another part of the screen. I am correctly obtaining the data for these fields with the exceptions noted below.
<div ng-repeat="dir in dirct">
      <h4>{{dir.dv_title}}</h4>
      <h1>{{dir.dv_talent}}</h1>
      <p>{{dir.dv_overview}}</p>
</div>

Open in new window


Angular Controller
      $scope.submitDv = function (devo) { 
		  $http.post("direct.php", {'plTpe':'diracc', 'dvID':devo})  
           .success(function(data){ 
                $scope.dirct = data;
			  	console.log(data);
			  	$scope.load = false;
           });
      }

Open in new window


PHP Database Call
The call to the database returns the correct JSON array with data like this (as displayed by console.log for data):
[…]
0: {…}
"$$hashKey": "object:31"
dvID: "15"
dv_file: "w15_SteppingOut(Rothschild) "
dv_overview: "<p>As your relationship with God deepens, He may ask you to go somewhere that doesnt make sense</p>"
dv_photo: "YVwalk3.jpg"
dv_pic: "jennifer-rothschild"
dv_plan: "3"
dv_talent: "Jennifer Rothschild"
dv_title: "Stepping Out"
__proto__: Object { … }
length: 1
__proto__: Array []

Open in new window


HERE ARE MY PROBLEMS


  • It works fine as long as the character count in the field dv_overview is less than around 120 characters. Once over 120 it crashes and doesn't return anything.
  • If the info being return contains HTML formatting characters (e.g. <b>Bold</b> or <p>paragraph</p> tags), they are not correctly converted to but instead are displayed as is.
  • Although the return of data will always be a single record in an array, the only way I can get this data to display is by using a "ng-repeat" (<div ng-repeat="dir in dirct">) to get it to display. Is there an alternative way of displaying?

What do I need to do to fix these problems.

Thank you.
0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="MyApp">
<head>
<title>Add/Delete Table Row</title>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="todo.css">
</head>
<script>
(function() {
var app = angular.module(;MyApp', []);
      app.controller("datactrl", ['$http', function($http) {
           var content = this;
    content.isDebug = true;
    content.datas = [
        {
             "c1":SNo,
        "c2":CostHead,
            "c3":PayTo,
            "c4":Currency,
            "c5":20',
            "c6":40',
            "c7":HQ',
            "edit":false
        ,"del":false
        ,"new":false
               }
    ];
      content.editDatas = [];
   
    content.newRow = function(){
      var newrow = {
        "c1":"" ,
        "c2":"" ,
       "c3":"" ,
        "c4":"" ,
        "c5":"" ,
        "c6":"" ,
        "c7":"" ,
      "edit":true  
        ,"del":false
        ,"new":true
      };
0

Angular

469

Solutions

310

Contributors

Angular is a JavaScript 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–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.