The website looks like something from the early 2000's.

Your main goal is information. Don't use an image as a background, it's an eye sore and detracts from the main criteria of your site: information.

For the love of god, make the menu bar span the entirety of the page, and make it stay at the top of the browser like most new sites these days (example: https://angular.io/)

I'd highly suggest using material design on the site over it's current design. Look at sights like google now. It uses shapes and shadows to make things more minimalistic and informative. (example: https://colemanrollins.io/)

Don't cater to mobile. Please, if you want to cater to mobile, spend the $200,000 to hire and iOS and Android developer to hook into your API and provide a better experience.

Site definitely needs to be more responsive. This honestly looks like something that was scrapped together in a couple months without and real product ownership

How can 10 third party integrations include a responsive real time map of current stations, and the owners of the damn API can't put one together?

Edit: Your damn feedback form looks better then your entire site, I was about to say, take your feedback form and apply it to the entire site, but I now see it is a google doc.

Just turn your app with pwa with

ng add @angular/pwa

Then you'll have acess to a services called SwUpdate, with it, you can handle new version of you app whatever as you want.

For example, you could do something like:

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {}

ngOnInit(){ this.swUpdate.available.subscribe(() => window.location.reload()) }

Personally, I display a notification that - the App was updated in background and it's changes will take effect in next page reload - I also add a button with "reload now" option... since the user could lose data with the page reload.

But no, pwa it's not a overkill, pretty straigth forward. More info here.

Here- https://angular.io/

It's just Angular now. The semantic versioning number is 4. It's informally called Angular 2 because it is the second generation of the framework. The previous generation is now referred to as AngularJs.

> Typescript

You don't have to use Typescript.

> no recommended project structure

https://angular.io/styleguide

> no default templating language

How about HTML? I would be extremely unhappy if the forced something like Jade on me by default.

The first one is property binding: https://angular.io/guide/property-binding
From the docs: Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.

The second one is called interpolation. When you use {{ value }}, value is converted to a string, but there are times when you don't want the value of a property to be of type string.

Ex.

<input disabled={{ isDisabled }} /> vs <input [disabled]=[isDisabled] />

disabled attribute should be a boolean and not a string. That's when you need to use property binding and not interpolation.

Also, you'll use property binding for passing data (props as in React) into child components later in the documentation.

Do you have the Angular Language Service extension installed?

As for your change event example:

"Event" is the correct interface for the DOM event emitted by an input element's "change" attribute in HTML. Note that in the React example, you are binding to "onChange", which is a custom React directive that emits events of type React.ChangeEvent. The equivalent (deprecated) directive for Angular would be ngModelChange -- but for this sort of thing you'd be better off setting up a Reactive Form in the control class, rather than defining interactivity in the template.

I am quoting this from Renderer2 api doc:

>Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.

The main thing is abstraction. By using Renderer you abstract the DOM, so you can target non DOM environments like server, native mobile etc. Basically for cross-platform capabilities.

> abandoning both AtScript and Dart

They abandoned neither. TS 1.5+ is essentially what AtS was supposed to be. "AtScript" was just a name for TS + meta data. TS supports meta data now.

And AngularDart isn't a side project anymore. The Dart version is now generated from the same codebase.

http://youtu.be/QHulaj5ZxbI?t=25m15s
http://i.imgur.com/SIzctRC.png

Edit:
Dart quickstart guide:

https://angular.io/docs/dart/latest/quickstart.html

https://angular.io/guide/upgrade?

Edit: Downvotes? Seriously? There is absolutely an upgrade path from AngularJS to Angular. Is it easy? No. But considering the fact that they are essentially completely different frameworks, it’s pretty amazing an upgrade path exists at all. Currently in the middle of an upgrade and yes it’s time consuming, but at least I can develop new features in Angular and incrementally upgrade my AngularJS app.

You should checkout Angular Elements: https://angular.io/guide/elements

With Angular Elements (web components) you can use your compiled app anywhere, basically.

After compilation you can concat your .js-files into a single file, if you would like to import a single script.

You should look for route guards, they work checking if a condition is met when changing to a route.

Take a look here.

Hope it helps :).

if you have a service worker, you can detect that a new version has been deployed and force the user to refresh the app: https://angular.io/guide/service-worker-communications#forcing-update-activation.

If you’re new, the official Angular Tour of Heroes tutorial is nice.
Also Traversy Media Angular crash course on youtube is great aswell.

Angular is similar to React anyway, you have ui components with inputs and outputs (events).
IMO the major differences are the templating engine vs JSX, and I find that people don’t use stores with Angular as much as people do with React.

No it's not, at least not in a traditional way. Search engine crawlers execute JS now, but discovery can still be difficult and Google gives huge priority to load speed and using a fat client will hurt that badly. Best practice is to have things pre-rendered statically, then load in JS fat clients for the rest or just have your entire site rendered statically, then use fat clients for your apps that don't need SEO.

If they're deadset on Angular then Angular Universal is what they have to use. Alternatively, Gatsby or Next.js are good on the React side and VueJS has VuePress.

And just to ease my pedant side, Angular is on version 6 which is a continuation of the version 2 methodology. Angular*JS* specifically referrs to 1.x, which is based on a different methodology. Their naming schema is odd.

TLDR: Don't do this.

The better approach would be to try and think about why you are returning HTML from the API? Is it because the backend service only knows about certain data? What if you converted this data to a more consumable format, like JSON?

If you could reason with what the HTML is supposed to represent, and then convert it to JSON, you could then construct Component's on the front end using the Dynamic Component Loader (https://angular.io/guide/dynamic-component-loader).

So, for example, let's say your JSON response was something like:

{ "div": "content for div", }

Then you could take this response and know to construct a div component, with the content for div inside of it. Which is a simple enough ng-content Component.

But, the hard part is going to be reasoning with this API, and figuring out what it's trying to represent, instead of just the raw HTML.

Don't use angular if you're going to use PHP includes.

It sounds like you are missing some fundamentals about angular and components.

I can highly recommend taking a little time and do the heroes tutorial:

https://angular.io/tutorial

Coming from PHP there's a bit of a learning curve, once you get through it, you'll never want to use php again.

I'm going to ignore your self-promotion and assume you're asking a question, then point you to the official docs:

https://angular.io/guide/dependency-injection

Lol this is just pointless symantics.

By skimming your post i can tell that the reason why you think dependency injection is "complex" is because your attributing a bunch of other principles into di.

Dependency injection is a very specific pattern and is very straightforward.

The article above is a very simple example and is 100% correct about what DI is.

But dont take his word for it.

https://martinfowler.com/articles/injection.html

https://msdn.microsoft.com/en-us/library/hh323705(v=vs.100).aspx

https://angular.io/guide/dependency-injection-pattern

I use route module for every module that needs to handle its paths. I find it easier to maintain that way. Angular instructions here: https://angular.io/guide/router#milestone-2-routing-module

But really, it is up to you and how you like it. As long as you stay consistent throughout your application.

Angular is a JavaScript framework for writing single page applications. AngularJS is the original version of the framework. Angular is the new version, which was a complete rewrite of the framework at version 2. They're now up to version 5, but still just call it Angular.

If you're wanting to get into Angular, I'd recommend the newer version. Check out /r/Angular2 or https://angular.io/ for more info.

The tour of heroes tutorial on the angular site is a great way to get familiar with and excited about the concepts.

Otherwise I'm using some Pluralsight courses my employer is paying for and plain old google.

Sidenote: Angular.io recommends against filtering & sorting with pipes.

> Filtering and especially sorting are expensive operations.

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

This topic is mentionned in the official style guide: https://angular.io/guide/lifecycle-hooks#oninit They also link an article explaining why you should avoid putting complex logic in the constructor.

Confirmation for routing to another module can be easily implemented with CanDeactivate.

Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.

Something like this could work for a given component:

@HostListener('window:beforeunload', ['$event']) unloadHandler(event: Event) { // Your logic on beforeunload }

Just read the guide. It explains in detail how their releases work. It's how a lot of software is being developed these days including, but not limited to, most browsers, vscode, react (they are on v16 but you don't hear people complaining), and angular itself.

Honestly, I feel like at this point anyone complaining about a new major version number is most likely trolling. You don't see these complaints when react or vue announce a new release. At least not nearly as often, and definitely not every 6 months like clockwork.

Angular is just angular. It's on semver so angular 6 is just the latest version the same way that react is still react even though it's on version 16 now.

There are minor changes here and there but fundamentally it's the same framework.

So if you look for a resource you should prefer one that is 5 or 6 but information about 2 is still relevant and should be mostly correct. Most of the changes are just simple renames like <template> was changed to <ng-template>. So look for a newer resource first but a resource about angular 2 won't fundamentally be wrong but it might use slightly wrong names for some things.

Use the cli to get started and personally my advice is to begin with the official guide which covers starting with the cli and links to the official tutorial.

After that if you need more you could look into other guides but personally I'd start with the official stuff. It's always kept up to date and if nothing else is a good primer.

Every time change detection is run, your function will be called. If you log something out in the console within that function you'll see just how many times that is. An option you could use is ChangeDetectionStrategy.OnPush where change detection will check once.

> On top of the JS-like syntax, there’s the stuff that isn’t JS at all. Angular 1 had things like ng-repeat="item in items" and ng-click="doStuff()". Angular 2 switched it up a bit because people found the Angular directives confusing, so now it’s *ngFor="let item of items".

Angular 1 had a massive problem with confusing treatment of properties passed to directives, or in plain language, was it <mydirective param="{{foo}}"/> or <mydirective param="foo"/>? The new template syntax was designed pretty much to avoid issues around that.

params? this tells us that it is optional : HttpParams | says that the type of the params is HttpParams and then that pipe at the end says it could also be of a certain object signature.

Now let's break down the object signature

{ [param: string]: string | string[]; };

[param: string] is declaring that this is an indexed object. This tells the compiler that the object will have some parameters on it that are type string, meaning the object should be accessed by params['TargetProperty'] just like in old school JavaScript. This is used because we don't know what parameters the user is going to want to pass in at compile time, so we can't define out the possible options.

And finally string | string[] tells us that the value of the params key value pair should be either a string, or an array of strings.

HttpParams documentation

Index Signature

To be honest, heavily relying on ng-deep shows that your CSS might not be as structured as it should, and I believe that's one of the reasons why they deprecated it, because people tend to have parent components styling children ones, while they shouldn't, the child component should expose inputs ot edit theme if they want to be edited, that's it.

Also, they said they are going to drop support, not deleting it (see https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ), and finally, if you want all your css to just go trough everything, use a global css file that's loaded inside your angular.json configuration, or simply switch view encapsulation for the components you want to be higlhly customizable to ViewEncapsulation.None .

I feel like you're trying to make Google responsible for bad design choices while there's plenty of possibilities for you to work around that and plan a migration on your style stuff for later in the project, I mean this has been deprecated for at least a year now...

Also, Google is open sourcing stuff so people can contribute and use it for free, because passionated devs will always be happy to help or even fix the stuff they don't like or found a bug inside of it. Every single framework, Open Source or not, has refactors, deprecations, and breacking changes, switching to another one won't change this.

I'm not sure whether you're agreeing or disagreeing with the template syntax, but my intention was to say that it's not really better in Angular 2, it's just different. You have to re-learn a special syntax again.

I agree that the docs are a big part of the confusion, but it's also because there's like 15 different ways to do everything.

This right here is exactly what I'm talking about:

> ngFor is not a template expression. It’s a microsyntax...

So once I've internalized which parts of JS work inside a template expression, I need to learn this "microsyntax" too, and keep them straight in my head. Ugh.

And all the little callouts in red boxes are stumbling points in the abstraction or terminology that really should be tidied up. Like these little things:

> A template input variable is not the same as a template reference variable!

> Don’t make the mistake of writing ngIf="currentHero"!

> Do not put the asterisk (*) in front of ngSwitch. Use the property binding instead.

> Do put the asterisk (*) in front of ngSwitchWhen and ngSwitchDefault. For more information, see * and <template>.

You probably need to bind it?

https://angular.io/guide/attribute-binding#binding-to-an-attribute

<div [attr.data-is]="chat.timestamp">

Not sure why you need to go through CSS:before to put text in, though.

It's actually quite simple! I've done this previously. What you'll need are two things...

&#x200B;

https://angular.io/api/router/CanDeactivate
Use this to determine whether or not you can move away from your page. Search around for examples using this. (Hint: You'll want to check if the form is pristine)

Second, you'll want to check the beforeunload event and verify that your form is pristine before unloading the page.

One of these is for when you navigate within the page, the other is for when you navigate using the browser back button or otherwise.

Look for examples using these two and you'll be golden. In all honesty, I may have googled with stackoverflow and found the solution through there. :)

If you set the href to something static like www.google.com does it work as expected? I have a feeling it has to do with a malformed url due to your binding.

If this is routing to a page within your app, you should really be using the [routerLink] directive as well.

https://angular.io/api/router/RouterLink

<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}"> link to user component </a>

Not a repo, but I always use the angular style guide by John Papa as a starting point for any style guides I use with teams.

https://angular.io/guide/styleguide

It is really good and has good examples of good structures and why they are a good idea.

For a repo, I would suggest any of the @ngneat projects. They are good libraries to be aware of and written by really talented devs.

https://github.com/ngneat

So CORS is a browser thing. The way to get around it when you're calling an api you don't control, is to build your own api. If you have an app on a server calling an api on another server, there's no browser involved and therefore no CORS.

Then you just have to set the CORS headers on your own api and you're good to go.

For a side project or a small app, this can obviously be a bit of a pain. Lucky for us, Angular has built in support for a proxy server. That will reroute all your api calls through a proxy and bypass CORS errors.

https://en.wikipedia.org/wiki/Fluent_interface

pretty easy to implement where you want it.

for example, Console.WriteLine("blue".ToUpper().Reverse().ToArray()); or var result = new string("blue".ToUpper().Reverse().ToArray()); works fine in c#.

we need to do some type coercion to convert the array of characters back to a string, but yeah.

can also look at something like https://angular.io/guide/pipes where you end up with things like {{ birthday | date | uppercase }}.

Use a service that exposes an Observable from a Subject.

In the child component: Whenever possible, use the async pipe to consume the data. If you must manually subscribe to the Observable, always remember to unsubscribe in ngOnDestroy to avoid memory leaks.

Eventually if your services start getting complicated, consider a Redux-pattern state management library (ngrx/ngxs).

If you're doing CORS with auth you might have to set the withCredentials flag: this.httpClient.post('/api/scraper/scrape/', { urls: urls }, { withCredentials: true });

MDN | Angular Docs

Also your request goes to "localhost:4200/scraper/scrape", looks like it's hitting your frontend? I think you might want a different URL there?

The async pipe will subscribe for you and pass the data that the BehaviourSubject holds to the child comp, not the subject itself. If you want to subscribe to the BehaviourSubject inside the child then skip the async pipe (not the best practice imo) or change the data input variable to the type the subject holds (ie any[]), and use ngOnChanges hook to reach the data in the ts file when it changes. https://angular.io/api/core/OnChanges

React and Angular are completely different ways of developing a Javascript web application. Do you want to learn one or the other? I suppose if you want to learn something quickly, React is a lot easier to learn than Angular. If you want to compare, here is the official react tutorial and here is the official Angular tutorial.

On the other hand, while Angular has a steep learning curve, it has almost everything you need built in. For React, you'll have to put things together yourself and do some research on best practices.

For the Java side, you'll just be creating an API. Probably the easiest way to get that set up is with Spring Boot. The Spring Petclinic application shows you how you can do that with various combinations of technologies. For example, there are examples for both React and Angular.

For the first example, the ToH is showing you the explicit version of how observables work but the majority of the time you will want to use the async pipe to get data from an Observable onto a template. I guess they want to show what's happening in the tutorial before showing the right way to handle displaying observable data.

The second example of injecting a public service is not something you will see very often. Since, unlike react, technically a template function isn't a member of a component controller class the values you want to bind to a template must be public. But in general you wouldn't want to expose a service to anything outside the component as it is considered an internal implementation detail.

Honestly, I haven't looked at it in a while and that part of the ToH tutorial is pretty bad. I mean it is properly showing the ideas off and how the parts are working. But it's doing things you are unlikely to ever see in a real app.

Functionally there's not really a difference between the 2 methods.

If you were to use the async pipe, as I mentioned above, instead of subscribing to observables manually then you get to set change detection to on push. That is a nice performance increase as you save on constant change detection cycles. But since neither method above is using the async pipe neither is currently able to use the on push method.

I'm not sure I really answered your question in my rambling above so let me just put it this way:

Both those examples are ok for showing how things work, but neither are the ways I would actually use Angular. So if I were you I would consider those more as explanations rather than proper usages.

The Angular Tour of Heroes gives a pretty good walk-through of what a Typescript/Angular project can look like. If you'd like to see a personal code base with a working example you can check out my project's codebase and corresponding web app.

hey so I wanna learn angular for job reasons

ok

ng new fuckingjabbascriptREEEE

120 seconds later and a fat 210 MB

sweet!

okay time to learn HttpClient shit to do webrequest

keep getting errors from some Dependency Injection shit, all the while I was following the fucking guide at https://angular.io/api/common/http/HttpClient and https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

and still getting nowhere

FUCK JAVASCRIPT DEVELOPMENT. THE ECOSYSTEM IS SHIT.

My advice would be to try both out. Both are fundamentally capable of the same things so you aren't losing utility. Angular is more out of the box feature complete where react by itself is just a component library and needs a stack of other libraries to bring in the same feature set.

Also Angular is written in typescript, a superset of Javascript. You don't technically have to use typescript yourself using Angular but honestly you really should. It's a much better experience. Typescript provides static typing to Javascript which is really useful for both tooling support and general code usability. You can use typescript with react as well but since Angular is actually written in it the experience is probably a bit better.

If you do try Angular make sure to use the cli. It simplifies project and code generation, provides a good development server, and takes care of the build process. If you have any questions /r/angular2 is the best place to ask them. The official quick start guide shows how to create a new project and the basics of using the cli.

It should be noted that Angular with AOT does almost the same. It still includes a small runtime, I think, but should be highly performant.

Between that and this, the performance difference should be negligible.

But then again, if we prefer working on code that should be compiled, I would seriously consider looking at Elm.

I assume you've already done the (great) tutorial?

Once you've done that pick one of the many seed projects to start from and you should be good to go.

Their own documentation is shaping up nicely.

Start with the 5 minute quickstart, and then move onto the Heroes app tutorial.

I'm a bit confused... From the text it seems you are expected to somehow just make some adjustments to upgrade from AngularJS to Angular 10, is that it? Because that a herculean amount of work...

AngularJS (before 2.0) is simply not the same framework as Angular (2.0 and later) and while there are even some nice guides about how to migrate from an Angular version to a newer one, it's not that simple when it comes to AngularJS > Angular.

You could try this guide from the official Angular website, it offers some guidance of what to do (there are even ways to mix both AngularJS and Angular on the same application), but honestly, depending on how complex the website is you might as well just rewrite the whole thing, there's no way a complex application made in AngularJS can simply be "converted" to Angular and result in good code.

Picasa turned into Google Photos, yes it's not quite the same thing but people still do use the old Picasa software and it still works.

Google Reader was an RSS reader... I never understood why people are so upset, it's literally the most basic thing, and there are dozens of alternatives out there. RSS was a dying medium, and as expected, it is nearly dead by now. Why waste time on a dying medium?

Inbox was an alternate Gmail interface. Yes, it was unfortunate but you didn't lose any of your emails, just a few features. Facebook and every other site lose features during redesigns all the time.

Angular is still very much a thing: https://angular.io

Google Fiber TV? Really? They had something like 68k customers, is that what you consider "a big service". The stadia subreddit alone already has more users than that, let alone the service.

In addition to that, a directive might be useful if you don't want to tie the functionality to the class. In this case, an attribute directive seems fitting. You could modify the parent using the native element reference and also listen to the events.

Server side Blazor is useful for the same reasons Angular SSR and React SSR is useful: Browser indexing. This enabled better search engine optimization for your site. Google spiders cant render and index your whole SPA.

https://angular.io/guide/router

You're asking for a few hours of research and reading which is difficult to summarize here. I'd read the link above to get a handle on Angular routing.

I feel like I need an explanation or some sample code here. My first thoughts are "ngIf"

<div *<code>ngIf</code>="condition">Content to render when condition is true.</div>

and if you were trying to show/hide a component based on some boolean condition:

<ng-container *<code>ngIf</code>="condition"> <component-selector></component-selector> </ng-container>

The importance of naming convention is explained in the documentation: https://angular.io/guide/styleguide However, you already brought up a very good point, you component.ts, model and service will all have the same file name. If the file names are too long for your colleague to read, I recommend this VS Code extension: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme After a couple days you will be able to recognize which file you are working with at a glance.

You should add to your blog post, that there is big security risk when Using URL params within your HTML. If you mark these values as trusted you are allowing xss attacks.

https://angular.io/guide/security https://security.stackexchange.com/questions/166675/is-inserting-url-parameters-directly-into-the-page-safe-in-angular-2

First, there are two versions of angular.

Angular 1.x aka angular.js - this is the old outdated one. Some might disagree but I would recommend to not start any new development in it.

Angular 2+ - Angular. Angular, angular, angular, just angular. Angular is on semantic versioning so technically it's on v6. Fundamentally v6 is the same as v2. This is the one whose documentation is at angular.io is for. This is the one to start new development in imo.

When you are going to use an spa for the front end you should stop thinking in terms of an entire application. You should start thinking in terms of 2 completely separate applications that just happen to talk to each other.

So the backend, a C# asp.core or whatever api is fine, should serve data not premade views. Usually the data is in json format.

The front end will just happen to talk to this api. But fundamentally it's a separate application.

If you have experience with C# then you should be able to come to terms with typescript relatively quickly. Angular also follows an mvc model with dependency injection, etc that should feel pretty natural to you. And the tutorial on angular.io is a good start.

You can! check out preloading and custom preloading strategies!

I'm guessing you have a router outlet on your component that is doing some navigation which adds a location state to the router. If you identify where you're doing extra navigation, you can add the skipLocationChange parameter to the navigation so you don't have an extra history location: https://angular.io/api/router/NavigationExtras

the other comments here aren't wrong, but the level of detail required to someone new to the JS world grasp a concept like this is probably bigger than can fit in a comment. (or is at least more than most redditors are going to want to go into)

You referenced the Angular docs in your description, I recommend checking out Tour of Heroes. This might be a little more cookie cutter, but I think a show-not-tell approach might help you wrap your brain around Single Page Applications.

There's a lot more nuance than that tutorial is going to show you, but hopefully it helps.

I'm not positive on which level you're asking but...

you need an api that is the middleman between the 2... you'll POST or PUT to the api when you want to write, and GET from the api when you want to retrieve data... the api is responsible for returning data to the application, writing to the sql database, queries to the sql database when the application asks for data, etc.

Google "Express api MySQL" or something - there should be plenty of resources to help you get started..

if you're confused with how to hit your API within Angular, you need to use HttpClient.. https://angular.io/guide/http

That's a blast from the past. Yeah that's outdated, typing are more automatic now.

Save yourself a lot of trouble. Follow the quickstart guide and use the cli as per the instructions there.

Well to answer the simplest form of your question, you can use (click)=functionName directive to perform an action when clicking on a div, just add it to the div elements.

I would also refactor your template to read from an array using *ngFor and then create a typescript class for your EstimateOption which contains a title, sourceImage, and click action.

Further your selection could be leveraging the router and child views and filling in each view based on the content rather than showing and hiding with *ngIf.

Anyways stuff to look at later, but you're probably looking for <code>(click)</code>

Are you talking about these docs? https://angular.io/guide/aot-compiler

My understanding is that this was old and aot is handled by angular-cli now.

So simply ng build --aot

Am I understanding you correctly?

Lets say you have a component to show the details of a hero (just the name for simplicity)

@Component({ selector: 'hero-detail', template: {{hero.name}} }) export class HeroDetailComponent { @Input() hero: Hero; }

You can show this component in another page by just simply using its selector

@Component({ selector: 'heroes', template: <div *ngFor="let hero of heroes"> <hero-detail [hero]="hero"></hero-detail> </div> }) export class HeroesComponent { public heroes: Array<Hero> = [{name: 'Superman'}, {name: 'Batman'}]; }

The 'ngFor' here is a simple for loop for all the items in the 'heroes' array, so this will render the hero-detail component two times once for Superman and once for Batman.

The [hero]="hero" parts sends data to the input (@Input() hero: Hero;) of the hero detail component.

You should really read the getting started tutorial about this subject!

You can find it here.

By making the browser do the conversion from Typescript to Javascript, it adds an extra steps, which means an extra delay before the browser can process the scripts and display your application. This is fine on Plunker, as it's a developer tool, aimed to help you quickly test things, and therefore you don't want the extra step of compiling the TS to JS each time.

When you're packaging an app for production, it makes sense to do the compilation at that point, and deploy your app with the already compiled JS.

As for development, you can use npm start to launch a server and compile TS to JS as it detects changes, so it's almost a seamless process

https://angular.io/docs/ts/latest/quickstart.html#!#package-json

I have seen quite a few Angular projects that do not use custom directives, do not have unit tests or have just a few large controllers several hundred lines each.

Then I started asking myself, may Angular just encourage such style of programming unless you know what are its numerous good and bad practices? It definitely takes a lot of effort to know how to use Angular properly. One problem is that it is just way too complex and does not encourage simplicity.

Rather it transplants some of the ideas from the world of enterprise Java development into the JavaScript world. Controllers, dependency injection, services, directives, scopes, providers, etc. go a bit contrary to the core JavaScript philosophy of simplicity and focus on functions.

Instead Angular introduces many heavy class-like objects and patterns and using it feels a lot like moving into the direction of Java development. Maybe this is just a Google thing, like with GWT, or Dart, many things they do are highly influenced by Java.

Looks like Angular 2.0 will address some of those issues, it will be simplified and more focused on components, so hopefully the current shortcomings of Angular are well understood already and will be fixed https://angular.io/

Start by working through the tour of heroes project in the angular docs

https://angular.io/tutorial

I had a similar position a about 8 months ago, having to transition from React to Angular, and the tour of heroes was a good first step.

The Angular CLI is absolutely fantastic! I would love to go like nx create page dashboard (Where dashboard would be the name)

And it would create the whole thing within the right directories etc

Trying to separate code into libraries and the horrible development process / inner loop (link).

The need to stop an ng serve after a library change/rebuild is terrible. I've moved to NX which solves that problem but nx workspaces only work in a mono-repo, so if you have a framework in one git repository and an app in another, you can't use the framework libraries in the app without the same stop/restart of ng serve.

ng serve really needs to handle the building and rebuilding of libraries and synchronizing that with restarting/updating ng serve so we don't have to pay the startup cost of ng serve every time a library changes.

If you are doing this in the template you are better off in using a pipe instead of directly calling .slice, as it would otherwise be run on every change detection cycle and not only when your objects have changed: https://angular.io/api/common/SlicePipe

so you'd need *ngFor="let o of objects | slice:0:4"

Disclaimer: I had no idea what Plesk is prior to reading this. But googling Plesk it apparently uses standard web servers, so this answer ought to apply.

For typical use cases (not counting Server Side Rendering, which is an advanced case) Angular apps are simply deployed as a static collection of HTML/JS/CSS etc files. With that in mind, Angular isn't special, it works like any other SPA. You do a prod build that gives you a deployment artifact (basically a folder), then you throw that up on your web server and configure the web server to use it (taking care to have the webserver setup rewrite rules that make your routing work). Angular documents this pretty well as is: https://angular.io/guide/deployment

TL;DR Use Angular's deployment guide to setup the web server that Plesk uses.

Alright, the variety of concepts you’re missing here is pretty large. But that’s okay! Everyone is new to programming at some point.

The two things you need to understand are modules: https://www.typescriptlang.org/docs/handbook/modules.html and dependency injection: https://angular.io/guide/dependency-injection

Learning Angular is tough if you haven’t learned: - simple programming - medium understanding of Typescript in particular - the frameworks/libraries which underpin Angular, like RxJs for example

However! I will try to explain the difference

In JavaScript (which TypeScript transpiles to) combining multiple files of code together is done by importing modules into other modules. TypeScript has the same concept. When you’re writing import, you’re importing code from one file into another file.

However, Angular also provides another mechanism for sharing code throughout your application, called Dependency Injection. Dependency injection occurs at runtime, whereas importing occurs at compile time. The one thing that makes dependency injection tricky to understand in Angular is when you import something in an NgModule, you’re telling Angular to provide that thing at runtime. So in the case of importing FormsModule in your app module, you’re telling Angular to make the stuff inside forms module available when the app runs. This isn’t really what the non-NgModule imports mean, they mean “include the code from this file into my file at compile time”

If this is the type of thing you’re struggling, with in Angular, I would recommend studying some fundamentals first. Maybe learn to write some simple JavaScript programs? Move on to getting a handle on TypeScript. Then give Angular another crack?

> If someone is strong in Angular, does that automatically mean that they have experience coding in Typescript?

Not exactly, but most likely. TypeScript is the programming language (a variation of JavaScript) and Angular is the framework. Most everything that can be done in TypeScript can also be done in JavaScript, including Angular, though Angular strongly encourages TypeScript and their documentation and examples all use it. From their documentation:

> ## Assumptions > These docs assume that you are already familiar with HTML, CSS, JavaScript, and some of the tools from the latest standards, such as classes and modules. The code samples are written using TypeScript. Most Angular code can be written with just the latest JavaScript, using types for dependency injection, and using decorators for metadata.

https://angular.io/docs

If I found someone with Angular experience, it would be extreme likely they'd also be familiar with TypeScript.

Step 1: Figure out a small website you can build for fun Step 2: https://spring.io/quickstart Step 3: Build the API Step 4: https://angular.io/start Step 5: Build the website using angular

That should cover it. Remember you’re not trying to be a pro, know just enough to cover the basics.

KISS: keep it simple, stupid

Edit: Being a professional dev requires confidence, who cares if you don’t know it. Learn it! That’s the best part about coding, is learning :)

Component Interaction in the official docs:

• Input binding for parent-to-child (@Input)
• Output binding for child-to-parent (@Output)
• Dependency-injected services for more flexible communication from anywhere to anywhere.

So, the short answer is that it's possible. The longer answer is depending on the complexity, it can be done with only a fair amount of effort.

First question, does the user need to login to access your suite of products? If so, then I would suggest a JSON Web Token with cookies to have the token work throughout the suite of products.

Secondly, you would need to serve each product as its own app and can route to it via ngZone (at least this is what we use at work). ngZone is super cool because it let's you do stuff inside or outside the Angular zone, and you can Google around to understand it better than I can explain it here.

So, to oversimplify the process what you would do is have have all the projects in one code repo that way you can import the modules from other projects, this goes into a better explanation of the above

Hope that helps.

I am sure.

https://angular.io/guide/deprecations#http

Didn't affect me but it's the most significant breaking change. It's been deprecated since Angular 4/5 though hasn't it?

It is not recommended to use pipes for sorting or filtering as explained here https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Your other questions strongly depend on your specific use cases. In an application where you typically navigate from a list to another page and then back to the list, as a user I'd expect the list to be sorted as I did before.

Angular has a style guide: https://angular.io/guide/styleguide

Scroll down to their "Overall Structural Guidelines" and give it a read.

I like to split my app in "features" with ng g module <feature-name>. It keeps it a bit cleaner and I would create a "shared" folder in each feature that would have it's service and model structure as well.

My first app started out small, but grew quickly and ended up with a ridiculously large service and model file. I then read the angular style guide and spent an afternoon breaking the app out into features. Not only is it easier to navigate, hopefully now it wont someone else as long to figure out the structure.

So your app module shouldn’t need to export anything as exported items will only be made available to a module that imports AppModule which you aren’t doing.

In regards to the error, you should import MaterialModule in the UsersModule as it is components in this module that will be using the material components. You would import MaterialModule in all modules that use the components.

Generally importing a module in AppModule will make injectables available to all child modules but not components. You may have noticed that in child modules you need to import CommonModule to use things like *ngIf, which is the same reason, we don’t automatically get access to components and directives that are available to the parent module.

There is a great FAQ section of the angular docs that might help:

https://angular.io/guide/ngmodule-faq

Hopefully this helps!

You should only be using the built in HttpClient. It's built on top of XHRHttpRequest so it will work with old browsers unlike Fetch.

Why the HttpClient vs Fetch? The client is built specifically for Angular so it is recommended that you use it. It returns Observables which make the client extremely flexible, for example, doing a retry on a failed request is effortless and can be done in a very clean way.

You should read some more about the HttpClient though. https://angular.io/guide/http

This sounds rude to ask but why did you use Fetch anyway inside of an Angular project?

To answer your question: Change all requests using Fetch to the HttpClient, Use the HttpClientTestingModule, mock your request and check if the class properties are set.

It's annoying but you should change your code to use the built-in HttpClient, not only for testing sake but also for the framework sake. You aren't doing it in the "Angular way" now.

The async pipe is your friend when putting observable data onto a template.

In short, given an observable in the component controller:

data$: Observable<{ name: string, list: string[] }>;

Then in the template you can do something like:

<ng-content *ngIf="data$ | async as data"> <h1>{{data.name}}</> <ul> <li *ngFor="let item of data.list"> {{item}} </> </>

You can either organize where the router outlets are in relation to the rest of the content or you can use secondary routes.

For the first choice say you have a map url where you are displaying a map and have a side menu. Basically you describe the route as something like this:

{ path: "map/:id", component: MapLayoutComponent }

So then MapLayoutComponent might have a template that looks something like:

<div> <sidebar><router-outlet></></> <map></> </div>

So here I'm embedding the router outlet inside the sidebar. Then in order to change What's in the sidebar you can define that inside child routes of the map route:

{ path: "map/:id", component: MapLayoutComponent, children: [ { path: "", component: ListViewComponent }, { path: "details", component: DetailsViewComponent }
] }

Then when the user is on /map/123 the route inside is bound to the sidebar's content and displays the ListView and if they somehow navigate to /map/123/details the DetailsView will be shown instead inside the sidebar.

The second option using secondary routes is the same basic idea just using a secondary route so that the main routing actions of the url can be used for other things, say in case the main url is being used to control the map itself. But fundamentally it's the same basic idea.

you would use a service and inject it into each of the components that needs to use it.

https://angular.io/tutorial/toh-pt4

the heroes tour pretty much does exactly what you're looking for. it has a service that exposes a collection of heroes and you can select an individual hero to view details.

i would recommend you just go through the tour in full.

You have a few options...

1. https://angular.io/guide/i18n

This is great since its maintained/supported by the Angular team. It works by scanning your project and extracting translatable values. When you compile your project you need to compile and deploy it per language. This is an important distinction to make vs ngx-translate or i18next.

1. https://github.com/ngx-translate

This is one you have already discovered. It does work if you configure everything correctly. It can pull translations from separate sources/files (ie /assets/en/translations.json, /api/i18n/en, etc.) and comes with a service, directive, and pipe to help you translate your application. Make sure you also install a loader as well since the core package does not have any specifics built in on how to fetch resources. If you have very specific needs you can also build your own loaders/parsers as well.

1. https://github.com/Romanchuk/angular-i18next

This is an Angular library wrapping the famous i18next. Very similar in concept to how ngx-translate works.

An important distinction between 1 and 2/3 is the "compile per language" requirement that I mentioned earlier. If you have a requirement to support app shell for example then this would absolutely be required since the shell being built will have translated text. You can still support app shell with #2 and #3 in the list above but you would need to ensure you're using the correct node file system loaders instead of the http loaders.

100kb should not be a deal breaker. Think of it as one more hero/jumbotron/banner image added to the page.

Angular also supports lazy-loading modules based on route: https://angular.io/guide/ngmodule#lazy-loading-modules-with-the-router

I do not know enough about Vue to know how much support there is for that.

http://javascript.info/ -- specifically part 2.

http://eloquentjavascript.net/ -- new edition coming out

https://angular.io/tutorial -- I think this is one of the better online tutorials for a modern framework

p.s. The "no Microsoft experience" part is not relevant.

What you're asking about is extremely basic stuff that is better covered in the documentation than in a reddit post. Specifically http requests here and data binding here. You should consider going over the tutorial from the beginning because this stuff is covered there in more detail than someone will post on a message board.

you are almost right, the syntax is

<div *ngFor="let user of users"> <div>{{user.firstName}}</div> </div>

I'd suggest to work through the tutorial if you are new with Angular: https://angular.io/tutorial The [ngForOf]-syntax is explained in chapter 3 ;)

Yes, here is the official getting started: https://angular.io/guide/quickstart

This is the official tutorial that goes over main Angular features (directives, components, services, http, routing, modules, etc. ): https://angular.io/tutorial

if you really wanna go in depth, I recommend to follow Maximilan's Udemy course: https://www.udemy.com/the-complete-guide-to-angular-2/learn/v4/overview

60% of what I know I've learned from him, really good teacher.

Good luck.

To answer the question you actually asked, op, you could certainly use react + friends over Angular but imo one of the biggest benefits of Angular is typescript. The larger the project the more useful static typing is and yes, you can use typescript with React or Vue or whatever but Angular was built with typescript from the ground up so the support is implicit instead of explicit.

Also, I believe you are discounting rxjs way too quickly. It is very powerful and the more you use it the more useful it is.

If you just treat it as a chore to have to subscribe to observables and move on with your life every time you see them then yes, it isn't doing much for you.

But rxjs is at it's core a very functional approach to data streams. All those popular uses you see in js currently about using filter, map, and reduce can be done with rxjs and it provides even more operations that make really complicated functional composition easy.

When I first started using Angular I wasn't sold on rxjs either but the more I've used it the more I've come to appreciate the way it handles data stream processing.

edit: oh and if you do decide to use Angular, or even just give it a test spin, then I cannot stress this enough: use the angular cli. Use the cli. No really, use the cli. Some of the documentation for the cli has already been moved over to the official Angular documentation but a lot of it is still only available on the github page for the cli.

> Turns out, breaking MVC and embedding view code in your controller code doesn't scale.

That's an absurd statement, the fact both Netflix and Facebook use React with view logic in their code shows that it scales in massive apps. Angular 1.x isn't used in any large code bases or applications, it certainly not used by Google in anything major. HTML and JS are not separate concerns, placing HTML into JS allows easier flow of data through it's container(HTML), even NG-2 has started to embrace this with templates being bound to components themselves see here

Yes, but I don't think separation of concerns was the reason why. The concept of templates and controllers still exist in Angular2, just under different names. Here's a snippet of code showing how template, logic, and style are still separate in Angular2:

https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html

@Component({ moduleId: module.id, selector: 'movie-list', templateUrl: 'movie-list.component.html', styleUrls: [ 'movie-list.component.css' ], })

Judging from the quickstart systemjs is optional:

> The QuickStart uses SystemJS to load application and library modules. There are alternatives that work just fine including the well-regarded webpack.

RxJS is not optional AFAICT from the sources, at least router and the Http service depend on it.

If you are attempting to test a component that contains a nested google-map component, then I would recommend using a stub in place of the google-map component. See this part of the Angular documentation: https://angular.io/guide/testing-components-scenarios#nested-component-tests

One thing you didn't specify is whether the second app is for a different client. If that is the case, keep those projects as separated as possible to avoid embarrassing errors ("why is x company's logo showing up instead of ours?").

Git branching is one possible option. Just create another branch and strip out everything not needed.

The more robust option would be an Angular "library project" for shared code. The library can be utilized by:

• Making it part of a monorepo with one or more projects that use it
• Distribute a packaged version using an npm proxy
• Import a packaged tarball in package.json using a relative link ("my-lib": "file:lib/my-lib.1.0.0.tgz").

You don't necessarily need a monorepo -- but depending on your needs it might make your life easier. Similarly, you don't need nx to create a monorepo -- but it might make your life easier (if you agree with its opinionated structure).

Been a bit. But i believe this should help

https://angular.io/guide/router

Should be as simple as defining the path you want. And the component you want to render (and output)

Its been a while since i did it though

Yeah, it's a code smell. As others have pointed out - one way data flow. Do not modify an input you get. It's troublesome at best, and causes bugs at worst.

I want to throw one more possibility in - next to working with a copy and two-way data binding with post and postChanged methods: The ControlValueAccessor (https://angular.io/api/forms/ControlValueAccessor)

Forms are one of Angular's way of modifying data (while keeping track of changes and sticking to one-way data flow principles). Now, for your use case, it might not be the way to go, but I think it should be mentioned. It allows you to expose the post as something to be modified, and you can then use either [(ngModel)] binding or use an actual FormControl to keep track of your data and changes.

Hey!

Don't navigate within the APP_INITIALIZER, mostly this doesn't work and if it would, it would most likely bring a lot of unintended behaviours.

I think what you are looking for is a nav guard see https://angular.io/api/router/CanActivate

This is normally where you want to verify things like auth state, permissions and so on, you can also navigate with the router from a nav guard.

&#x200B;

The APP_INITIALIZER is more intended for loading things BEFORE the app starts.