At the first, we will see an overview of an application containing various options such as:

On the main page, it will display all the books at once from the database i.e MongoDB. we will be binding data through AngularJS using its directives and for the UI we will be using Bootstrap

In our application, we will create a form to insert book details with the suitable data into the database. In our application, we will create an another form to update the data which is already stored in the database as it makes easy to update data because we don’t have to re-enter the data. As we are building the MEAN application, therefore, we need the 2 software i.e MongoDB and NodeJs and the other 2 are the Script file i.e. AngularJS and ExpressJS

MongoDB is a documented oriented database, with high performance and easy scalability, it works well with programming languages and reduces the need for JOINS. Set Up MongoDB – See how to start the database connection

The good thing about SPAs is that they make it look as if you are using an app with all it’s components just like usual, while the page remains the same all throughout, with only the views being changed along with the URL – AngularJS handles routing as well as views. In addition to all the pre-packaged directives that come with the decision to use Angular in your applications, you can also make things interesting and simple by creating your own, according to your app’s needs and however you think they might make programming easier, and that they do! To create a directive named, say, , the code would go precisely like below:

As you see, we have applied the function on our Angular app. By default, Angular uses as a value for restrict, which means that the directive is used both as an element and as an attribute. While directives are typically used on a single DOM element, Angular uses the concept of controllers to organize functionality across a group of DOM elements, and does not limit itself to only one of them. Continue reading

In this post you will find how to setup angular development environment and some code to get started with angularjs. File Name: App.js

Add the above file in &head& section as same we did with angular one but make sure this file is written after angularjs in head section. So create one file and name it as core.js which contains every working code and paste these code in it. File name: core.js

Connect the Presentational Component Using Data BindingsAfter extracting the application state integration logic, we can — for now — consider the dashboard component a presentational component and assume that it will have a heroes input property as seen in the template of the dashboard container component. Open in new tab.Data Flows Down From the Container ComponentFitting the dashboard feature into the flow diagram of Figure 1, we see how the container component is notified of heroes that it requested from the hero service through an observable. The container component is notified of the emitted hero name which it passes to the hero service and finally updates the persistent state in the container component model. Ideally, our heroes container component should not be managing persistent state itself, but rather rely on the hero service to do so — or the store in an application that uses NgRx Store. If you want to put the heroes state in the hero service where it belongs, you can extract the state management from this container component. Continue reading

Login forms have become part of the norm in the latest years, and their importance increases with the sensitivity of the information being dealt inside your app. Before we start on this, you’ll have to take a look at the code snippet below first, and then we’ll start on the explanations for each line of code:

What we have above is a main file, which could very well be considered the most important part of our app, but however, it’s pretty simple. We gave our app the name and our controller the name which we define in a script which we have placed in the file. We mentioned before that we gave our app the name and our controller the name which we define in a script which we have placed in the file. We also need the AngularJS directives on both input boxes in order to pass the entered data to the controller. Continue reading

#1 Optimize main bundle with Lazy LoadingWhen we build our application in production without lazy loading, most likely we’ll see these files generated in dist is for making our application compatible for different browsers. Now in the network tab of chrome dev tools we can see that indeed main.js is too big (1.3 mb)The problem is that most of the time users visit the main page, rather than a specific page, so loading all code of other pages is not the best solution. We can say Angular to load our main module (main.js) and when its fully loaded and executed, only after that load other lazy modules in the background, so when users navigate to lazy pages everything will be already downloaded. #2 Debug bundles with Webpack Bundle AnalyzerEven if after splitting the logic of application into many lazy modules you get large main bundle ( as ‘large’ i personally consider greater than 1 mb for small-mid apps), you can optimize further using Webpack Bundle Analyzer. #4 Use Lazy Loading for images that are not visible in pageWhen we load our main page first time we can have images that are not visible for the user (not in viewport). Continue reading

The entire process can be broken down into 3 simple steps:Mark the translatable content and generate translationsGenerate locale-specific bundlesCreate a server to identify and serve the right content based on the requested locale

Marking Translatable ContentFor localizing the application, we need to mark all the text that needs to be translated. In our case, our base locale is English i.e. when we code, we write the text in our template in English so when we generate the translations file, we want to denote the same. We can now consume this within our custom build script:The most important line in the above script is where we are running the build command with all our custom, locale-specific parameters:ng build –aot –base-href=/${locale}/ ${args} –i18n-file –i18n-format xlf –i18n-locale ${locale} –output-path dist/${locale}/We are creating the AOT builds with the base href of the application set to the locale name, that ensures every request originating from the locale-specific template has the locale prefixed to the request. To generate the locale-specific builds, run the below command with the optional prod flag:npm run build — –prodwhich logs the following when the build is successfully run:We can also verify the result of the build by opening the dist folder and verifying the base href path for any locale:Creating a ServerNow that we have locale-specific bundles ready to go, we need a server to check the request that is originating from the browser and then serve the content based on the requested locale or default the user to a pre-determined locale (which is assumed to be en). Implementing Internationalization in React applicationsAs in the case of the Angular application, we need to first set up the base project which has 3 routes and some basic localizable content on the home page. Continue reading

In this post, we are going to build a simple filter method for Angular Async Pipe. Then, let’s add a method to filter and return an observable of list of countries. Then inside the method, we are going to return an observable of countries object (filtered) from our service:

And that’s it for our pipe. NB: You can also check whether the list of countries is empty at the filter service and throw an error at that point instead. First, we are going to need a container for our application:

Then, we are going to add a filter text input for users to enter the term to filter countries by:

Then, we are going to use chain our pipe and angular async pipe to subscribe to observable returned by our custom pipe. Continue reading

In order for the component to display various numbers of thumbs, the parent needs to provide the rating number to the thumb component as an @Input(). Also, we’ll add the ability to raise events in the nested component using @Output() and event emitter. In order for a nested component to receive input from its parent, it can expose a property to do so. Now in the template of the parent component, Property Binding is used to pass data to the nested component. In fact, the only way a nested component can pass data to it’s parent is with an Event. Continue reading

Since we know that Angular is a full framework, Angular would have the best implementation of all the features in its own tutorial. The results of that code can be seen here, Thus, the analysis of that coding into React from Angular is in this contrast. In component state managementReact can maintain a model of the data for your application at the single component level. Locally Scoping CSS to a ComponentThis is a feature that I found particularly useful in Angular that React does not have out of the box. FilesIn Angular, you would follow a pattern where you would split out your files per UI component domain and contents. Continue reading

You server side app needs to implement JWT authentication and exposes a few endpoints:

Now, after creating the JWT service in your Angular 7 application, you need to implement the necessary methods that will be used to handle the authentication in your application. Next, you used the method which is a member of the RxJS for chaining operators and the function to execute a side effect for persisting the JWT access token, returned by the server, in the browser's local storage. Just like the method, you also need to add a method that send a request to the server to register a user for the first time:

In your Angular 7 service, add the following method:

Again, you've used the method to send a POST request to the server with the registration information (email and password) then used the and function to run a side effect that calls the method to logs the user in once the registration is done. This method doesn't need to send any request to the server, all it needs to do is removing the JWT access token from the user's local storage. Open the file and import the available from the package:

Next, you need to include it in the array of the application module:

You use the method of to provide a configuration object with the following attributes:

In this example, you add the URL to the white-listed domains so only your Angular application that's running from this address will receive the access tokens. Continue reading

As we have seen in AngularJS to repeat the loop, we have to use the angular’s directive named as . As the new Angular 5 feature comes with the same functionality but its directive is named as . For previous AngularJS version we have to simply just import or linked the library in the project, but now the Angular 5 (TypeScript) has its requirements such NodeJS and Git Version Control (optional), Can be used from windows command prompt. on running the this will open up a pre build component of Angular Documentation

After installation, let’s create a component for any view but the scope of this tutorial was to learn about ngFor

Check out what are components? In AngularJS to display the data from an array as a list, we would use the directive, In Angular 5 we have the directive. Continue reading

Solution: Ghost OverlaysGhost Overlays use separate, distinct view components to render either the real DOM or the ghost DOM. Ghost List is an overlay DOM groupThis approach provides maximum features to animate DOM during :enter and :leave events, to stagger elements… all independent of the other layer. Here is a StackBlitz demo/source for Animated Ghosts Overlay:Using Overlays, we can run both the fadeIn and fadeOut animations simultaneously… delivery a very slick user experience. The downside to using overlays is that developers must choreograph when the ghosts are removed and fine-tune layouts to match the ‘real’ DOM layouts.Solution: Inline GhostsInline Ghosts use the same DOM elements to either show ghosts or ‘real’ data. Customers will be shown specific ghosts that highlight data still pending…Here is a StackBlitz demo/source for Animated Inline Ghosts:Solution: Inline Ghosts with Async LoadsIf each record of server data is wrapped in an AsyncItem wrapper, we can treat our data items as having data lifecycles. Continue reading

For the emojis app, we might end up with bundles like:– application.js // React source code + App component with React Router- index.js // just the IndexView component– about.js // just the AboutView component– emojis.js // the EmojiIndexView, EmojiEditView, and EmojiNewView componentsOnce we split out the distinct parts of our app into separate bundles that only include the code they need, we can try lazy loading, where a single-page app only fetches the source code for a page when a user requests to load it. In order to render the content a user will actually see when they first visit the site, the browser has to :fetch the initial HTML filefetch the JavaScript that renders the siteexecute the JavaScript

That’s a lot more work just to load the page, and the load time can be significant if you have a lot of JavaScript to send over the wire. Mitigation: Many front-end frameworks now support isomorphic apps, or apps which utilize the same code to return a server-side rendered page that loads a single-page app. The idea is that instead of returning an empty HTML page, the server will render all the HTML for the initial page load so the user can see the app as soon as possible. But that initial page also loads the JavaScript for a single-page app that can take over the rest of the routing and make the other page transitions feel snappy. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.