In this chapter, we're going to cover the following topics:
- Creating a basic Angular view with data binding
- Rendering lists and using Angular controllers
- Routing, filters, and backend services in Angular
- Using Angular's client-side validation
- Making a chart component with Angular directives
- Structuring applications for Meteor.js
- Reactive programming and data in Meteor.js
- Live HTML and user-specific data in Meteor.js
- Security mechanisms in Meteor.js
Within modern web applications, a lot of code is gradually moving from the server to the browser. As a result, new possibilities and challenges are emerging.
One such possibility is instant automated data binding. Client-side code enables us to bind model objects to parts of the web page. This means that changes in the model are automatically and instantly reflected in the view element displaying that model.
Additionally, a challenge in code organization also emerges. JavaScript does not provide adequate module facilities or code organization models that are needed in larger browser applications.
In this chapter, we're going to cover two complete frameworks that attempt to provide solutions to both challenges. These frameworks support a declarative, data-binding approach to writing web applications. At the same time, they provide modularization and organization facilities, allowing us to give a clear structure to our code—to separate it into models, views, controllers, or view-models and components.
The first half of the chapter will cover Angular—a framework coming from Google that provides client-side bindings, and can work with any server-side stack (Rails, Node.js, Django, and so on). It provides data binding+ and organizational facilities. We'll do the following in this chapter:
- Create basic Angular views with data binding
- Use Angular controllers to write a small list editing application
- Add validation to our application
- Create a simple markdown wiki using the Angular router and filters and define a local storage service
- Use directives to create a component that displays a chart
The second half will cover Meteor—a complete framework and platform that covers both the client and the server side, and also provides data binding and organizational facilities. Meteor is more of a truly different way of building web applications, and we will cover some of the following basics for it:
- Structuring your application Meteor style
- Basics of reactive programming, and how to work with data in Meteor
- Live HTML and user data
- Security and authentication