Develop ionic pre-application angular JS required knowledge

Excerpt from: http://www.cnblogs.com/macyandlujie/p/5865755.html

Angular JS is a Web application framework that is extremely popular and has become one of the most widely used JavaScript tools today. Ionic is built on the basis of ANGULARJS, so it is necessary to learn some angularjs knowledge. Ionic did not independently develop a complete Web application framework, but instead extended the Angularjs to add a number of interface components and other mobile-friendly features.

This article will take you through the core knowledge of ANGULARJS and introduce some basic knowledge. We learn the controller, as the name implies, it controls your data. We then introduce the action, which connects the controller and the user interface, which is called the view. Looking closely at the views, you'll see how they create interactive visuals through templates and scopes. In this process, we will also learn about other features, such as how to use filters to transform data, how to build and use directives to enhance existing HTML elements, and how to load and save application data from an external data source.

Now let's look at a small application developed by BOOTSTRAP+ANGULARJS to help us understand angularjs. You can view the full project code HTTPS://GITHUB.COM/IONIC-IN-ACTION/CHAPTER3 on the grass GitHub. If you want to see the final effect, you can visit https://ionic-in-action/chapter3.herokuapp.com

1. Views and templates: describing content

ANGULARJS is closely related to HTML, especially when you create a template. A template is a piece of HTML content that you can load into your app when you need it. Angularjs has added many new features to HTML and expanded the semantics of HTML. The view uses templates to present the data. The view must have a template (that is, HTML tags), and there will be templates that need data. The view transforms the template into a visual effect that the user ultimately sees, meaning that it modifies the template based on the data. Let's take a look at a template

<ul class= "List-group" >    <li class= "List-group-item" ng-repeat= "note in Notes" ng-click= "Displaynote ($ Index) "ng-class=" {active:note.id==content.id} ">        {{note.title}}<br/>        <small>{{note.date| Date: ' Short '}}</small>    </li></ul>

This template shows just a <li> element in <ul> that contains multiple properties called angular directives. The directive modifies the behavior of the element that contains it. In this example, ng-repeat iterates over a JavaScript object or array and creates a <li> element for each element. Ng-click a JavaScript-like onclick time processor that invokes the Displaynote () function when clicked. When this template is rendered, a list element is created for each element in the notes array.

The double curly braces ({{}}) indicate that some data will be shown here, and this idea is called data binding, which is called the expression in which all the contents of the curly braces are expressions, and angular evaluates the expression with the data of the current model. Therefore, the contents of the Note.title are inserted into the position of the curly braces in the <li> element. A template is an HTML with an instruction or an expression. The view gets the data and uses the values in the data to render the template. Suppose that there are 5 notes in the notes array,<ul> element contains 5 list elements.

Angular has a lot of instructions, which start with Ng. Some are used to modify display styles (such as Ng-show, Ng-class), some for forms (such as Ng-model, Ng-form), and some for various events (such as Ng-click, ng-mouseover) that listen for clicks. Angular also has many directives that work on native HTML elements, providing some functionality that HTML does not have, including input boxes, text areas, and anchor points. For example, angular can add additional attributes to <input type= "text" > elements, allowing it to support custom validation. For a complete list, please refer to angular official documentation.

2. Controllers, models, and scopes: managing Data and logic

A controller is a function attached to a Document Object model (DOM) node that is used to drive your application logic. In JavaScript, a controller is a function that communicates with the scope and responds to time.

Scopes can be understood as a context shared between the controller and the view. It can be seen as a bridge between the controller and the interface, and the scope updates the view when it is updated in the controller. The scope has two core roles: storing data and allowing the controller to access the data in a way. The data stored in the scope is called a model. The model can be any JavaScript value (the same city is an array or an object, or it can be a simple data or string), you can store it in scope, and then share a controller and view through the scope. Let's take a look at an example that combines views and templates:

Angular.module ("APP"). Controller (' controller ', function ($scope) {    $scope. notes=[          {id:1,title: ' Note 1 ', Date:new date ()}  ,          {id:2,title: ' Note 2 ', Date:new Date ()}        ];    $scope. Getnote=function (index) {        $scope. content= $scope. notes[$index];    });

The controller uses elements from an array to set up the notes model, which is stored in a special $scope object. This object is provided by angular, with each scope, you can store the data and share it in the controller and view (that is, the model). The view uses Ng-repeat to display an array of notes in the list. The Getnote () method can help you declare which notes need to be stored in the content model. Views can call this method because they are in the same scope.

Everything in the controller is isolated from the rest of the app, except its own child scopes. This is important because it can limit the visibility of code and variables. For a new angular development this is the common challenge of accessing content in different scopes, which is not possible by default.

The scope of angular is hierarchical, and scopes can be nested like DOM. In effect, the scope corresponds to the DOM structure on the page. Scopes can be accessed only by an additional implementation of an HTML element and other child elements, just as a CSS class can apply a target style to a set of elements and child elements of a class.

Hierarchies become particularly important when you want to cross-scope communication, because child scopes can see the parent scope (just like JavaScript's prototype inheritance, if you're familiar with it). Some directives in angular create child scopes, so sometimes it's not good to judge specific scopes. If you access a nonexistent value in a child scope, it actually looks for that value in the parent scope until all the parent scopes are found or traversed.

The root scope (accessed through a special $root scope object) is the first scope created by angular and is the basis for all other scopes. This means that everything you put on the root scope is visible to other scopes and sounds good, but it's best not to do so. You need to keep the scope clean and focused, rather than putting everything in the root scope. This is the problem with the scope of JavaScript, where applications typically use global scopes to hold variables. Suppose you have a value named ID, and if your child scope also has an ID, a conflict occurs and you cannot access the value in the root scope. This problem is more pronounced when co-development, because the more people who develop the same application or the more external tools you use, the more likely you are to have a naming conflict.

Note: The controller is not omnipotent

There are some facts that should not be done in the controller because they will make your code more difficult to maintain and test. The most important thing is to avoid DOM manipulation in the controller, assuming that you are building a slide effect, the controller should not alter the DOM or change the style of the slide because it should have a custom instruction implementation. You should also avoid formatting or filtering data in the controller, which you can do with the form.

3.Service: Reusable objects and methods

In angular, there is a concept delivery service, which is essentially a JavaScript object that can be shared throughout the app. Angular provides a number of service defaults, and you can create your own service. If you've tried angular, you've definitely used your own service.

$http is a very common service,angular used to manipulate HTTP requests. It has many methods, such as Get (), post (), and other HTTP actions. The service can be very complex (such as $http), or it can simply contain some data.

Service is loaded with angular delay, that is, they are only loaded into memory when they are in use. They are also singleton, and if you change the service value in one place, the rest of the service will be affected. Ionic has written many features into the angular service, and it needs to be remembered that almost everything contained in the controller is a service.

4. Bidirectional data binding: Sharing data between controllers and views

One of the most powerful features of angular is bidirectional data binding. You've seen how a view binds data to a template, which in turn works the same way. The view can change the data in the scope and the data is immediately updated to the scope and reflected in the controller. This is especially useful in forms where the values in the scope are updated synchronously when the user enters content into the text box. You don't need to do anything special to start two-way data binding--she'll do it automatically.

Conclusion: The above is the core concept of angular, these background knowledge is enough for you to start.

Develop ionic pre-application angular JS required knowledge