pg连接串

書名： PhoneGap and AngularJS for Cross：platform Development
作者名： Yuxian Eugene Liang
本章字數： 843字
更新時間： 2021-08-05 17:24:39

A brief overview of AngularJS

AngularJS ( super heroic JavaScript MVC framework, which is maintained by Google. It is open source and its main goal is to assist with creating single page applications. These are typically one-page web applications that only require HTML, CSS, and JavaScript on the client side.

While one may argue that there are already many frameworks out there in the market that help with this issue, I would like to say that AngularJS is different in a few ways. And in quite a few of these instances, it makes your life much easier as a frontend programmer.

Core concepts

There are many concepts related to AngularJS, but I will cover the most commonly used ones for the sake of progressing through this chapter. As we go along in this book, I'll touch on other concepts, such as the use of self-defined directives and performing RESTful requests via AngularJS. The main concepts that you should understand in this section are directives, controllers, and data binding.

Controllers

If you have already used JavaScript frameworks, such as BackBone.js, Can.js, Ember.js, or KnockOut.js, you should be familiar with this concept. Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks, or watching model changes.

Data-binding

Data-binding is an automatic way to update the view whenever the model changes, as well as updating the model whenever the view changes. The coolest aspect of this concept is that it is a two way data-binding process. Used in tandem with controllers, this can save you a lot of code, as there is no need for you to write the usual updating of the DOM elements.

Directives

Directives are another awesome concept in AngularJS. What they do is teach your application new HTML syntax and new things specific to your application. Directives can be self-defined and predefined. Some of the more notable predefined directives include:

ng-app: This declares an element as a root element of the application, allowing its behavior to be modified through custom HTML tags.
ng-bind: This automatically changes the text of an HTML element to the value of a given expression.
ng-model: This is similar to ng-bind, but allows two-way binding between the view and scope.
ng-controller: This specifies a JavaScript controller class, which evaluates HTML expressions. In layman's terms, what ng-controller does is that it applies a JavaScript function to this block of HTML so that this particular JavaScript function (including its accompanying logic, expressions, and more) can only operate in this block of HTML.
ng-repeat: You can see this as a loop through a collection.

A conceptual example

Now, let's take a look at how some of the previous concepts play together. Consider the following piece of code:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Say Hello World</label>
      <input type="text" ng-model="yourHelloWorld" placeholder="Type anything here.">
      <hr>
      <h1>Hello {{yourHelloWorld}}!</h1>
    </div>
  </body>
</html>

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Let's go through the code.

We defined an HTML5 HTML document in this case, as seen in the first line
Next, notice ng-app in the second line of the code; this is an AngularJS directive, which tells AngularJS that this is the root of the AngularJS application
In order to use AngularJS, we obviously have to install the script on this web page, as shown in the <script> tag
Within the body tag, we see a label, an input, and an h1 tag.
Take note of the input tag, there is a ng-model directive, which is mapped to h1 tag's {{yourHelloWorld}}
What the previous piece of code does is that anything that is typed into the input box, will be shown in place of {{yourHelloWorld}}

Take note of the version of the code we are using in this chapter, version 1.2.12; should you be using newer versions of AngularJS, there is no guarantee that the code will work.

Now that we have briefly walked through the code, let us copy the code and run it on our web browser. Feel free to copy the code and save it as concepts.html. The source code for this chapter can be found in the concepts.html file in the Chapter 1 folder.

Copied the code? If so, open the file in your favorite web browser. You should see the following screenshot in your browser:

A sample concept web page

Got the previous code? Ok great! So now you can try typing into the input box and see new text being appended to Hello and before ! in the screen.

For instance, when we type world, we will see the new characters being appended to the screen as I continue to type. By the end of typing the word "World", we should see the following screenshot:

After typing World

Now that we have a brief idea as to how a simple AngularJS app works, let us move to a more complicated app.

官术网_书友最值得收藏!

PhoneGap and AngularJS for Cross：platform Development