This question already has an answer here:
Angularjs suitable moment to launch a http request when app start
(1 answer)
Closed 7 years ago.
I have an Angular app running on Express 4.0 and I would like to send some information to the front end on startup, when the index file is served but I didn't manage to figure out on which route I should do this.
Thanks!
I think you are looking for angular.module('...').run(). Here's the documentation on modules in angular. See the section on Module Loading & Dependencies. Also note you can only inject instances (not Providers) into .config and .run blocks.
Use NgInit
<div ng-init="names=[{data: 'a'},{data: 'b'}]"></div>
With that line in the html you will have in the controller the $scope.names object so you can do whathever you want with that.
Put that data in the ng-init directive using one of the templates engines that express has.
You can use the AngularJS $http service to make a GET request on an express route, wich gives you some json with the data you are trying to use in your front end.
Related
Currently I have an application built with Angular 2 (all the front-end side) and Symfony 3 (web framework) . I have defined each view as an Angular application.
I think it's the time to migrate to a Single App but I have some questions before I venture into the lion's den.
If a user change manually the URL, of course, they, should enter to the requested URL, but how can angular know which url is trying to open?
I should create multiple controllers or only one that catch all the requests?
If none of above are the right way, please, can you suggest any way to do it?
Thank you so much.
If you're trying to build a Single Page application, it means that your routes will be managed by your front-end, here by Angular 2 via #angular/router.
Symfony can then be only used as a back-end web service (i.e. a Restful API) that will answer to your front-end calls via JSON responses. Depending on the size of your API, you may wish to use FOSRestBundle for that purpose.
So you don't have to worry about Symfony routing interpretation since your urls will be managed by Angular router. Symfony routes will be called directly by your Angular application to get/post/put/delete/patch your back-end data.
UPDATE
To answer you comment, a user who directly enters a URL will simply see the page you linked to this url via Angular routing, there is (almost) no difference between front-end and back-end routing.
If you want to dive deeply in how hash routing works in javascript, you can check this article.
To see a real-life example of a SPA with full Angular routing, ga.me is a good start.
I am fairly new to nodejs, just been playing around with it for a while.
Now I would like to use angularjs $compile on server-side. In the end I would like to have an API which receives html and json and compiles it together using angulars syntax.
To go in a little more detail, this is what it looks like in angular:
plunkr
$compile(element.contents())(scope);
As you can see the angular function $compile is used to fill a template from a textarea.
I would like to use this $compile function on server-side as a webservice.
tl;dr;:
I would like to use angularjs as a templating engine for express/nodejs on server-side.
I am having troubles integrating angular. Do you think this is a liable approach at all?
Nope, this is not liable, you are drastically over-thinking your architecture, just create your angular.js application, render it using a standard node.js template engine as jade or ejs. Then in your angular app connect to an api provided by node.js and express, and let angular do it's job and node.js its job.
Each tool is used for his main purpose, angular is used for single-page-application that are communicating with the server side using ($http, $resource, sockets etc...). Node.js is a scripting language mostly used for server side, api creation, other operations.
My advice keep the job simple, playful bu simple, you will sleep better at nights.
I am new to Angularjs and want to know can we use angularjs in .ejs files for writing client side applications. Also, can we write both angularjs and nodejs files in the same .ejs file? I will be grateful for any further guidance.
The best way is to render the index page from server and then use angularjs local routing to load templates.
I´d like to know if exists a better way to render a view like this:
For the first load I need bring data from Controller like usual but after apply a filter in same page I need to start use AngularJS and never more uses Razor.
Is there a way to do that ?
Thanks for all.
Yes. you can do that.
Basically, you'd need to add the line below in your view. After you do that, the json is going to be available to the DOM / javascript and angular can take it from there. Hope this help
var json = '#Html.Raw(Model.MyJsonStringForMyCoolAngularJsApp)';
There are multiple ways to implement ASP.Net MVC with AngularJs.
I personally like Mini SPA (Silos). You can watch Miguel A Castro's video here.
You can also download the source at his website.
What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.
FYI: I also use Angular.Net Helpers to generate strongly typed views.
You could use WebAPI project in visual studio to exchange data between frontend and backend. It would go stateless, so to secure the data, you could use a mechanism like JWT.
The frontend would exchange JSONS from/to the backend using REST apis.
Yes. You can make angular views and exchange data using $http.get(/controller/method/). You can also configure routing using ngRoute.
Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.