"Thinking in AngularJS" if I have a jQuery background?

[FramJamesgot]

Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer:

• How do I architect and design client-side web applications differently? What is the biggest difference?
• What should I stop doing/using; What should I start doing/using instead?
• Are there any server-side considerations/restrictions?

I'm not looking for a detailed comparison between jQuery and AngularJS.

[natesutherland2]

BOT ALERT:

I believe this style of post is a "Build a reputation" style. In this method, a bot builds a 'reputation' by asking seemingly good questions (although perhaps a bit off topic for authorize.net), thus ranking it as more knowledgeable or interesting to algorithms. There's a good chance these are actually copied from other real users elsewhere.

Then later, I expect it will post an actual spam/scam post.

I could be completely wrong though.

It just seems WEIRD that someone would post that post (basically asking for generic help comparing angularJS to jQuery) within the authorize.net [integrations] forum. There are MUCH BETTER places to ask those questions. Even searching Google would probably yield better results.

Authroiz.net, any chance you can start policing these forums to keep posts on-topic?

[FramJamesgot]

This a little messy and a trifle frail. But in AngularJS, we can do this:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

And our view can look like this:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

But for that matter, our view could look like this:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

And now instead of using an unordered list, we're using Bootstrap alert boxes. And we never had to change the controller code! But more importantly, no matter where or how the log gets updated, the view will change too. Automatically. Neat!

Though I didn't show it here, the data binding is two-way. So those log messages could also be editable in the view just by doing this: <input ng-model="entry.msg" />. And there was much rejoicing.

In jQuery, the DOM is kind of like the model. But in AngularJS, we have a separate model layer that we can manage in any way we want, completely independently from the view. This helps for the above data binding, maintains  separation of concerns  /echatspin and introduces far greater testability. Other answers mentioned this point, so I'll just leave it at that.