You will also notice in Figure 1 a non-standard HTML attribute, ng-app. At the heart of AngularJS are extensions to HTML called directives, which declaratively describe the behavior of a web page. Every AngularJS application declares ng-app, which sets up the framework for interacting with and/or dynamically modifying the Document Object Model (DOM). If you have ever programmed with the DOM API, you probably know how tricky this can be because of occasional differences between the different browser products. AngularJS is an alternative means of doing the same thing, but also affords you the benefit of browser-agnostic programming. With AngularJS, you no longer have to contend with vendor-specific quirks and can safely write code that works across all modern browsers.
Figure 1 also demonstrates a non-standard HTML element, tic-tac-toe. This directive is a custom element implemented to encapsulate the tic-tac-toe game.
Figures 2 through 5 demonstrate how capable a custom HTML element implemented by AngularJS can be:
NOTE: The below is four boxes. Do not resize.!-->
Many new software applications target the mobile device as the primary platform. The industry has long accepted that developing a mobile app requires programming for two different platforms, each requiring a different programming language: Objective-C and, more recently, Swift, for iOS; and Java for Android. Each platform also has its own programming stack. Native application frameworks, however, are increasingly being challenged by advances in hybrid mobile application development. Hybrid mobile applications use the web browser to host the application. Skilled developers can make hybrid mobile apps look and behave as good as any native mobile application.
Figure 7 shows the result of the porting the AngularJS tic-tac-toe to Ionic.
The CLI has additional features for managing plugins, building the project, starting a local web server to aid with testing within a browser, generating splash screens and icons, and uploading the mobile app to a central repository, so you can share a preview link with friends.
If you work on a Mac, you get emulation services for both iOS (after installing Apple XCode) and Android. Later, you can also install Ionic View on your smartphone, a testing app that loads previews of your mobile app while it is still in development. Hyperlinks to your preview app can be shared with friends, and they too can take a look at the app with Ionic View before it becomes generally available on the Apple Store or Google Play.
So far, our tic-tac-toe game requires both players to share a single keyboard and screen to play. Wouldn’t it be so much better to challenge a player in another location? We could provide a match-making service for our hypothetical tic-tac-toe game, so that the client application could join a game with http://www.playtictactoe.com/join/Bob, and the server application responding with (Figure 8)
Express is a mature web framework, having inspired other frameworks to be derived from it, such as Koa, Hapi and Sails.
Firebase is one such NoSQL service. It supports many frameworks, including AngularJS. With Firebase, one could coordinate a match-making service for our tic-tac-toe game, allowing the game to begin when two players have indicated they wish to play. Firebase data, as is all
When each player takes a turn, his moves can be persisted to Firebase. The Firebase AngularJS API provides three-way binding that synchronizes data between the Firebase application, the view on the player’s screen and data stored on the player’s app. This means, in near-real time, when one player takes a turn the other player’s screen is updated. Figure 10 demonstrates a snapshot of how the Firebase application console might look while a game is in progress, and while another player is waiting for an opponent.