Your Choice JavaScript News

Angular News Monday, January 22

Angular News TLDR / Table of Contents

Score: 185000
URL: http://www.c-sharpcorner.com/article/angular-5-basic-demo-project-overview/
Tweeted At: Sun Jan 21 20:30:00 +0000 2018
Publish Date:
Author: Sibeesh Venu

  • So, at the end of this article, you will have some basic understanding of Angular project structures and how it really matters when it comes to project.
  • The Import section helps us to import some existing functionalities available in the framework like we have included the component from Angular/core in the above code snippet.
  • The decoration is the place where we decorate the component, giving a selector( which is unique to each component), Style the UI, giving the template URL which points to a particular HTML file where we customize the component.
  • The tsconfig.app.json file is the place where we can set the configuration for our project, like setting the module versions, compiler options etc.
  • In our next article, we will start developing some components in our Angular app.

Tags: Angular project structures, Angular Application, application root folder, Angular app, particular HTML file

Score: 54000
URL: http://www.techjunkieblog.com/2017/03/angularjs-spa-part-5-create-mongodb.html?m=1
Tweeted At: Mon Jan 22 06:40:01 +0000 2018
Publish Date:
Author:

  • Here are the steps: – – dbpath : specifies the path of the data files – – logpath : specifies the path of the log file – – verbose: specifies how verbose we want out log files to be, in this we want our log files to be very verbose…
  • The settings is from v to vvvvv  going from least to most verbose – – 4.
  • Save the file,  put the path C:\Program Files\MongoDB\Server\3.4\bin into the Environment Variables “Path” varible, now open up the command line utility  type in the following command to use the configuration file

Tags: mongodb configuration file, log file, AngularJS SPA, Shopping List, log file path

Score: 40000
URL: http://www.techjunkieblog.com/2015/07/angularjs-spa-part-1-setting-up-angular.html
Tweeted At: Mon Jan 22 08:40:05 +0000 2018
Publish Date:
Author:

  • In “Source Location” paste the angular-seed clone URL that you’ve just copied, then on the “Target Directory” field type in or browse to the folder that you want to store the repository in on your local machine.
  • In the browser type in the http://localhost:8000, you will see that angular-seed is hosted on the web server – – angular-seed is an AngularJS application skeleton template.
  • In the command line navigate to the angular-seed git in your local machine, then type “npm install” without the double quotes.
  • bowerrc file and change the directory to “app/js/lib”, the final markup should look like the followingNote: If you need more information on bower you can visit this blog that I wrote about it12.
  • After “npm install” command finish executing type in “npm start” in the command line to have nodejs start a local web server

Tags: Open Git GUI., Git GUI click, application skeleton template, boiler plate template, Github angular-seed page

Score: 35250
URL: https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1
Tweeted At: Mon Jan 15 14:58:00 +0000 2018
Publish Date: 2018-01-09T14:32:12.993000+00:00
Author: Luis Aviles

  • 😄Initializing server applicationCreate a package.json file and then install the following dependencies:npm install –save express socket.io @types/express @types/socket.ioWe’ll need to install some devDependencies to allow integrate gulp and typescript so that we can define build tasks easily with these tools later:npm install –save-dev typescript gulp gulp-typescriptTypeScript Compiler ConfigurationCreate a tsconfig.json…
  • let’s see further details into our server/src directory:server/|- src/ |- model/ |- message.model.ts |- user.model.ts |- index.ts |- server.ts|- package.json|- tsconfig.json|- gulpfile.jsChat Server ImplementationThe main files in server directory are index.ts and chat-server.
  • The first one allows us to create and export our ChatServer app, while the last one contains express and socket.IO configurations:Server ClassesThe previous code will give a result of the following classes and relationships:Build and Run the ServerIn order to have JavaScript files needed by the V8 engine of Node.js, we…
  • js command to have the server running.Client CodeLet’s generate our client directory using the latest Angular CLI version:ng new typescript-chat-client –routing –prefix tcc –skip-installThen install your dependencies running npm install(I prefer to use Yarn for this step):cd typescript-chat-clientyarn installAdding Angular MaterialFind and follow the latest guide to install Angular Material inside…
  • This time inside chat directory:ng generate service chat/shared/services/socket –module chatng generate class chat/shared/model/userng generate class be ending with a structure similar to:client/|- src/ |- app/ |- chat/ |- shared/ |- model/ |- user.ts |- message.ts |- services/ |- socket.service.ts |- shared/ |-app.module.tsObservables and Web SocketsSince our Angular app comes with RxJS,…

Tags: client app, latest Angular features, Real Time Apps, simple chat application, Angular CLI version

Score: 32500
URL: https://realpython.com/blog/python/flask-by-example-custom-angular-directive-with-d3/
Tweeted At: Mon Jan 22 03:57:00 +0000 2018
Publish Date: 2016-08-30T13:04:04+00:00
Author: Real Python

  • Let’s build out the first part of our Directive by adding the following code just below the controller in [‘$parse’, function ($parse) { – return { – restrict: ‘E’, – replace: true, – template: ‘div id=”chart”/div’, – link: function (scope) {} – }; – }]); – – restrict: ‘E’ creates…
  • $watch(‘wordcounts’, function() { – // add code here – }, true); – } – – Finally, add the Directive just below the closing divider to div the Directive set up, let’s turn our attention to the D3 library… – D3 Bar Chart – D3 is a powerful library that utilizes…
  • Step 1: Functional Logic – Add the following to the watch function within the Angular function() { – var data = scope.wordcounts; – for (var word in data) { – d3.select(‘#chart’) – .
  • Step 3: Making the Bar Chart More Interactive – We can chain this on to our existing code and use the D3 style function() { – var data = scope.wordcounts; – for (var word in data) { – d3.select(‘#chart’) – .
  • Let’s review what we tackled: – – We started with the configuration and workflow, setting up staging and production servers – From there, we added the basic functionality – web scraping, data analysis – and set up a task queue with Redis – With the back-end functionality set up, attention…

Tags: custom Angular Directive, refactored Angular controller, D3 library, new custom Directive, D3 style function

Score: 20000
URL: http://www.techjunkieblog.com/2016/06/angularjs-spa-pt-2-preparing-angular.html?m=0
Tweeted At: Mon Jan 22 12:20:06 +0000 2018
Publish Date:
Author: WilliamKing

  • The source code file “index.html” should look like the followingThe path to angularJS file is js/lib/angular/angular.js  somehow it won’t show up in the code sample.
  • The “app.js” file contains the JavaScript codes that will be used for this application.
  • The source code for the app.js file should look like the followingThe code above defines the application name ‘shoppingList’, and the modules that the application is dependent on [‘shoppingController’] in this case the application is dependent on the shoppingController module.
  • Add a folder in the “js” folder and call it “controllers” then create a file call “shoppingController.js” in the “controllers” folder and source code for the file should look like the followingThe code above registers a new module called shoppingList.controller with no dependencies.
  • Type int the following URL in your browser http://localhost:8000/ and you will see the followingIn order to see the application in your browser you must first run the “npm start” in your angular-seed folder firstIn this tutorial we’ve taken care of the plumbing in an AngularJS application.

Tags: application, angular-seed main folder, scope object, source code file, index.html

Score: 4850
URL: https://hackernoon.com/surveyjs-an-open-source-javascript-survey-library-with-versions-for-angular-2-react-vue-2086d988b974?gi=90fe921bed5c
Tweeted At: Mon Jan 22 11:32:16 +0000 2018
Publish Date: 2018-01-17T07:23:52.892000+00:00
Author: SurveyJS News

  • By April 2017, when we published “Meet SurveyJS”, the library was already feature-competitive and stable, we only needed a bit more feedback from the field before we could call it a version 1.0 release.Between April and now, we kept learning from our user’s surveys, forms, and quizzes striving to improve…
  • We will, however, mention a couple more useful functions later in this article, in the section on Expressions and Totals.Dynamic Panel: Dealing with List DataLists must be the worst type of data for surveys, yet examples are numerous: children list, countries visited in the last five years, most recent addresses, jobs…
  • Notice the following repeated code lines:// Two dynamic panels on different pages// connected to the same list source”pages”: [{ “name”: “page1” … “elements”: [{ … “type”: “paneldynamic”, “valueName”: “employers” … }] }, { “name”: “page2” … “elements”: [{ … “type”: “paneldynamic”, “valueName”: “employers” … }]}]Another interesting part is that on…
  • This is controlled by the dynamic panel’s renderMode property that can be set to:“list” (default value, used on the first page)“progressTop” (explicitly assigned on the second page)“progressBottom”, “progressTopBottom” (try them in JSFiddle)…”renderMode”: “progressTop”…Expressions, Summaries, and TotalsDynamic Panels were a hit and the interest snowballed into more user requests.
  • Quizzes usually need to display the time remaining on a page and/or in the survey and need to automatically skip forward when the time is up.The notion of a correct answer to a question and the ability to obtain answer statistics.You can review a simple quiz example that takes advantage…

Tags: SurveyJS, dynamic panel, live sample, custom functions, survey

Score: 3000
URL: https://devdactic.com/ionic-aws-nodejs-2/
Tweeted At: Sun Jan 21 20:40:01 +0000 2018
Publish Date: 2017-11-28T16:00:10+00:00
Author: Simon

  • Our backend has they keys and a user to access our AWS services, so our Ionic app will need to ask for permission / the signed URL to make a request to AWS.
  • We need both of them to upload new images to S3, so go ahead and run: – – We also created a new provider which will take care of accessing our backend URLs inside our app later!
  • The last function of our provider is to upload our file, but as we already got the signed request at that point we just need to make a PUT request with the given URL and the file object (which we need to prepare before) and everything should work alright!
  • Only our backend has the rights to access these resources, therefore we make a call to for each image to get a signed URL which is a GET request then to the actual resource.
  • It’s not super hard to upload files to AWS S3 using Ionic, but it involves some coding on both backend and frontend to make everything secure.

Tags: Ionic app, Ionic AWS S3, new Ionic app, simple NodeJS backend, url

Score: 2400
URL: https://ionicacademy.com/accordion-list-ionic/
Tweeted At: Sun Jan 21 10:49:06 +0000 2018
Publish Date: 2017-06-02T10:00:06+00:00
Author: Rodolfo Antonio

  • But we want to develop an accordion list with Ionic, so we will only rely on simple JavaScript and Angular syntax for this accordion list!
  • module.ts like this: – – As said before we also need some data for our list, so I created a simple JSON structure with a few levels and different depth so we can build a more flexible accordion.
  • Create a new file information.json inside your assets folder and insert: – – Now we got everything we need for our Ionic accordion list, so let’s dive into the fun!
  • Go ahead and put the code into your src/pages/home/home.ts: – – The most interesting part of the accordion list is of course the UI, and here things get a little bit tricky and not super easy to understand.
  • Also, I had to set some styling for the list or a label because the general Ionic styles were preventing the Accordion UI like I wanted.

Tags: Pork chop pastrami, chop pastrami landjaeger, accordion list, landjaeger chuck brisket, pastrami landjaeger chuck

Score: 800
URL: http://angularjs.bestjquery.com/softnotify-soft-notifications-component-angular5/
Tweeted At: Mon Jan 22 11:34:56 +0000 2018
Publish Date: 2018-01-22T11:29:08+00:00
Author:

    Tags: Soft Notifications component, Multiple alert notifications, jQuery Plugins, Best jQuery Plugins, Free Templates

    Score: 92
    URL: https://github.com/amcdnl/material-storybook
    Tweeted At: Sun Jan 21 21:07:34 +0000 2018
    Publish Date:
    Author: amcdnl

      Tags: docs Jan, alignment, chore, link Jan, latest Safari

      Top Angular Courses

      Angular 5 (formerly Angular 2) - The Complete Guide (139,105 students enrolled)

      By Maximilian Schwarzmüller
      • Develop modern, complex, responsive and scalable web applications with Angular 4
      • Fully understand the architecture behind an Angular 4 application and how to use it
      • Use their gained, deep understanding of the Angular 4 fundamentals to quickly establish themselves as frontend developers
      • Create single-page applications with on of the most modern JavaScript frameworks out there

      Learn more.


      The Complete Angular Course: Beginner to Advanced (40,747 students enrolled)

      By Mosh Hamedani
      • Establish yourself as a skilled professional developer
      • Build real-world Angular applications on your own
      • Troubleshoot common Angular errors
      • Master the best practices
      • Write clean and elegant code like a professional developer

      Learn more.


      Learn and Understand AngularJS (66,998 students enrolled)

      By Anthony Alicea
      • Learn fundamental Javascript concepts that power AngularJS.
      • Write quicker, better AngularJS code by discovering how AngularJS itself is built.
      • Become fluent in AngularJS terminology, such as dependency injection, services, directives, transclusion, and more.
      • Realize the power of dependency injection, and how AngularJS accomplishes it.
      • Design custom directives and save time and energy with easily reusable components.
      • Understand what a Single Page Application (SPA) is, and how they work.
      • Build a Single Page Application (SPA) in AngularJS.
      • Be the coder that explains AngularJS to everyone else, because you understand it better than anyone else.
      • Get new free lectures during 2015, keep up with the development of AngularJS 2.0, and get a MASSIVE discount on a future AngularJS 2.0 course in 2016!

      Learn more.


      Angular 5 NgRx Store Masterclass & FREE E-Book (3,038 students enrolled)

      By Angular University
      • Build a Chat Application From top to bottom!
      • Understand the Flux Architecture, its benefits, strong points and most beneficial use cases
      • Understand Single Store Architecture solutions like Redux or Ngrx Store
      • Know all the usual notions of Store solutions, like Actions and Reducers
      • Know how to model the application state of a single store architecture, leveraging Typescript custom types to do so
      • Know the difference between a model and a view model and what to put inside the store
      • know how to derive a view model from a model and how to do that
      • understand the notion of selector in the context of store solutions
      • know the difference between smart components and presentation components
      • know how to build smart components using the Ngrx Store library
      • know how to use the Ngrx Effects library
      • know not only the Ngrx libraries but know also how they all fit together and what are the benefits of a store solution
      • know how to setup the Ngrx store developers tools
      • know how to debug RxJs applications in general

      Learn more.


      Angular Front To Back (6,984 students enrolled)

      By Brad Traversy
      • Build amazing single page applications using Angular 5+
      • Master Angular concepts
      • Understand the file and folder structure of an Angular application
      • Build a client management application with authentication and Firebase's Firestore
      • Integrate Bootstrap 4 into Angular projects

      Learn more.


      Angular Crash Course for Busy Developers (44,316 students enrolled)

      By Mosh Hamedani
      • Master the essential Angular concepts
      • Troubleshoot common runtime errors
      • Write cleaner, more maintainable code

      Learn more.


      Angular (Angular 2+) & NodeJS - The MEAN Stack Guide (26,806 students enrolled)

      By Maximilian Schwarzmüller
      • Build real Angular + NodeJS applications
      • Understand how Angular works and how it interacts with Backends
      • Connect any Angular Frontend with a NodeJS Backend
      • Use MongoDB with Mongoose to interact with Data on the Backend
      • Use ExpressJS as a NodeJS Framework
      • Provide a great user experience by using Optimistic Updating on the Frontend
      • Improve any Angular (+ NodeJS) application by adding Error Handling

      Learn more.