Navigating the Seas of Angular Frontend

After extensive research, I have been unable to find the precise answer I am seeking. Upon beginning my journey with Sails app development (a new venture for me), it came to my attention that the framework creates its own frontend using EJS by default.

  1. To confirm, is this assumption accurate?
  2. If indeed true, why does an npm package called "sails generate frontend" exist?
  3. In the case of wanting to employ an Angular frontend, is sails-generate-frontend-angular the recommended approach?

Your assistance is greatly appreciated!

Answer №1

First and foremost, it is important to separate the server templating (EJS) from angular.

Although sails defaults to an EJS template engine, it does not mean that you cannot still include angular in your asset library and create an angular app. EJS is the default programming language that sails uses for building its templates on the server which are then delivered to the client. Angular templates are utilized by the client to display information and perform tasks.

Above all, ensure that these two components are separated.

For setting up your asset pipeline, consider using sails-generate-frontend. It helps in creating grunt tasks for copying image files and configuring javascript libraries such as ANGULAR.js and jQuery for your front-end purposes.

In some cases, it may be beneficial to have two projects - one for Sails API and another for the Angular app, especially if it is a single-page application (SPA).

If you only need to use angular in specific areas of your app (similar to how jQuery is used), generate-front-end can be employed to obtain the angular library from a source like bower_components and incorporate it into your assets when lifting your app. This tool also ensures that the library is available to be included in your app's HTML.

However, I personally prefer using sails templates (specifically Jade instead of EJS) to create and modify my angular templates on the server side before they reach the client. While this practice might be more advanced and somewhat confusing without understanding the distinction between generating HTML on the server versus the client, it suits my needs.

An alternative approach is to create the index page on the server, which includes the necessary CSS and scripts. This page could be the only one on your server, with all other pages being angular templates rendered on the client side via JSON calls. In such a scenario, SAILS (EJS, Jade, or any preferred template engine) is used solely for rendering the single page INDEX.js.

However, it's worth noting that Sails already includes these functionalities out of the box, so sails-generate-frontend is not necessarily required as it comes pre-packaged in a standard Sails app.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a customized post method in Angular's resource API

I am looking to streamline my code for posting data to a SharePoint list by utilizing a resource factory. Currently, I have been posting data using the following method: this.save = function(data) { data["__metadata"] = { "type": getItemTypeForListNam ...

Uploading files to AWS-S3 using Angular $http PUT method: A step-by-step guide

When attempting to upload a file to AWS-S3 using $http.put(url, file) in my Angular application, I encounter an issue. The HTTP-403 Forbidden error message indicates that the signature calculated by S3 differs from the one I provided. However, if I use c ...

Tips on sorting JSON data with Angular

Trying to categorize JSON Data into online and offline users with errors. The criteria are based on the presence of a 'stream' object (online), absence of a 'stream' object (offline), and the presence of an 'error' property. ...

Tips for concealing the ID value within a URL or parameter

I just started learning Angular JS and I have a question about hiding parameters in the URL when clicking on anchor tags to send data to another controller. I don't want any ID or its value to be visible in the URL. Is it possible to hide parameters i ...

"Enhance your Angular experience with SweetAlert integration using directives and translation

Currently, I am utilizing the Angular implementation of the SweetAlert plugin from GitHub. I am attempting to pass an Angular directive with translation to the title. The variable being passed as the title is: {{ 'register.confirmation_modal.SUPERI ...

Angular2 HTTP POST request

I am currently in the process of upgrading an Ionic v1 application to Ionic v2. One of my methods involves calling a WCF service. In AngularJS, I would do it like this: $http({ method: 'POST', url: url, data: JSON.stringify({ dato: 11 }), da ...

Tips on finding the key associated with a specific value

When a form is submitted, one of the fields being sent is an ID number instead of the name for easier processing by the server. For example: HTML dropdown select <select ng-model="myColor" class="form-control" ng-options = "color.ID as color.color ...

AngularJS Date Formats

I'm trying to display the date in the format "Saturday, August 30, 2014" Currently, my view code looks like this: {{masterlist.created_date}} But instead of the desired format, I'm getting this result: /DATE(1452842730000)/ Any suggestions o ...

"Creating a custom comparator in Angular for sorting objects based on their keys

I am embarking on the challenge of designing a directive that will generate a dynamic table complete with front-end pagination and search functionality. It has become clear to me that in order for the search feature to work effectively, I must implement a ...

Navigating efficiently with AngularJS directives

Hello, I am currently searching for a solution to dynamically modify the navigation links within the navigation bar based on whether a user is logged in or not. Of course, a logged-in user should have access to more pages. I have developed a UserService t ...

Learn the methods for successfully transferring dynamic values from Angular to a jQuery script

This is the script that I have included in my HTML code: <div class="progress-bar"></div> <script type="text/javascript"> $('.progress-bar').gradientProgressBar({ value: $(this).attr('$scope.moodvalue'), ...

Emptying the trumbowyg editor within an Angular environment

I am currently experiencing issues with the trumbowyg editor in a project I'm working on. I am able to update the editor by changing its model but cannot seem to clear its content using $scope.editorModel = '';. For a more detailed explanati ...

How to use AngularJS to close a window in node-webkit

Is there a way to programmatically close a window in an AngularJs and node-webkit environment without using the windows.close() function while navigating through the app? ...

How can I access a TypeScript variable from a global var set in a .cshtml file?

I have defined several variables in my .cshtml file to be used in my angular services: <script> var _APIURL = '@(Url.Content("~/Admin/api/"))'; var _AREAURL = '@(Url.Content("~/Admin/"))'; var _APPURL = &a ...

Avoid repeatedly invoking an API within a loop

Is there a way to continuously call an API every 2 seconds within a loop? var itemArray = ['apple', 'banana', 'orange']; for (var i = 0; i < itemArray.length; i++) { $timeout(makeApiCall(itemArray[i]), 2000); } functi ...

Having trouble getting AngularJs ng-repeat to function properly when using multiple items in ng-init?

Just getting started with AngularJs and running into an issue with ng-init and ng-repeat in the example I'm working on. Below is a snippet from my code within the body section: <div ng-app="" ng-init="books=[ {title:'Pride and Prejudice&a ...

What type of pop up modal can be implemented in the application that utilizes ui-router?

My webpage includes various pages that are accessed through the UI-router, each with different states and modules integrated using ng-include. I now need to incorporate a popup modal into my webpage, but the current modal is not functioning as desired. A ...

What is the best way to set up callbacks for an AngularStrap or Angular UI Bootstrap Popover, to run when the popover is opened and closed?

I am currently exploring the functionalities of the Angular UI Bootstrap popover and I have a particular need to define callback functions for both when it is opened and closed. The purpose behind this requirement is that I intend to utilize the popover fo ...

Tips for arranging information in ng-repeat using nested objects within JSON data on AngularJS

Looking to display an array of object properties in an Angular view. Here is the object: $scope._Json = { "foo": { "ItemDimension1": { "Item": "item1", "ItemIndex": 1, "SelectedItems": [{ "C ...

Issue with $dirty flag in file type input field

Hello, I'm pretty new to using AngularJS. Currently, I am facing an issue with a form that has two fields - name and profile picture. My aim is to have the 'Save' button only enabled when either field has been changed (dirty) and there are n ...