AngularJs Basics (60-minute entry) (RPM)

AngularJs is a good framework for developing SPA Apps ( single page Web Apps ). single page Web Application,spa, which is just one web page app. The browser loads the necessary HTML, CSS, and JavaScript at the beginning, and all the operations are done on this page, and JavaScript controls the rendering of the different view on this page . This article comes from a good AngularJS tutorial video on YouTube: AngularJS Fundamentals in 60-ish Minutes, mainly on AngularJS directive,data The concept and usage of binding,filter and module. Personally, these four concepts are the core of Angularjs, supporting the angularjs skeleton. The mastery of them is very helpful in grasping angularjs in the global sense. Advanced will require a lot of practice and the official website API document reading.

Take a look at the general to see what ANGULARJS is capable of.

First download angular.min.js and angular-route.min.js from the official website. Can be downloaded from official website (https://angularjs.org/or https://code.angularjs.org/)

Create a blank empty Web project in vs.

Directive and Data Binding

The directive concept in AngularJs is not easy to understand, and the introductory phase can be understood as a tag for extending HTML. Angularjs will parse these tags to implement the Angularjs magic.

The code below uses two Directive:ng-app and Ng-model.

Ng-app: Used to auto-bootstrap a ANGULARJS application. This is a required directive, which is generally added to the root object of the HTML (as shown in the following code). More detailed explanation, the official website: https://docs.angularjs.org/api/ng/directive/ngApp

Ngmodel: Used to establish a two-way data Binding between the property and the HTML control (Input,select, textarea), which means that the value change of the HTML control will reflect the property and vice versa. The property is an object created through {{}}.

The following code shows the creation of the data Binding between the text control and name.

<! DOCTYPE html>
Directive can be prefixed with "X" or "data-". Directive can be placed in the element name, attribute, class, comment.
<! DOCTYPE html>
The following is the result of the HTML run.
The following example shows the use of an array through Ng-init and ng-repeat to iterate through the operation.
<! DOCTYPE html>
For more directve use, refer to official website Https://docs.angularjs.org/api
Filter
The function is to receive an input, process it through a rule, and return the processed results. It is mainly used for array filtering, sorting the elements in the array, formatting the data, and so on.
Angualrjs contains filters that are: currency (currency), date (date), filter (substring matching), JSON (formatted JSON object), LimitTo (limit), lowercase (lowercase), uppercase (uppercase), number (numeric), order by (sort). Total nine kinds. In addition to the custom filter, this is powerful enough to meet any required data processing.
The following code shows the implementation of data filtering, sorting, and case conversion. Each filter is followed by the data and is separated by |.
<! DOCTYPE html>
Results of the operation:
Module
The module is a container that manages the various parts of a ANGULARJS application and is a very important concept in ANGULARJS. A ANGULARJS application is a module that acts like a assembly in a C # application. In C # We use the main function to bootstrap the application. And Angularjs Bootstrap a ANGULARJS application by means of na-app= "modulename". ModuleName is the name of the module object.

is a module which is composed of some common parts.
Config/route: a route (AngularJS) used to configure a AngularJS app that acts like Config/route in an ASP. NET MVC application.
Filter: Filtering The data, explained above.
Directive: The most important concept in extending the HTML,ANGULARJS. There is no angularjs without directive.
Controller: Acts like a controller in an ASP. NET MVC application. The page logic is implemented in the controller, and the model can be manipulated by the controller. Angularjs uses the built-in data-binding mechanism to bind the model to the view (HTML control)
Factory/service/provider/value: Provides access to the data source. RESTful APIs, for example, are common sources of data. The controller accesses the data source through Factory/service/provider/value to complete the crud operation of the data.
The following code implements the same functionality for the above instance, and the difference is that the instance is created by creating a module (ANGULARJS application) and adding Contorller under the module to achieve the above functionality. In Simplecontroller, we created the customers model and initialized the data, and the View (HTML control) was directly bound to the customers (model).SCOPEIsOneAANGUALRJSInTheYesVIEWMODULEOfCapacityManagerRightLike。Con tr ol le r need  to  pass  over  Scope to access the Viewmodule.
This example is closer to the actual engineering usage than the example above.
<! DOCTYPE html>  
<! DOCTYPE html>view code  
<! DOCTYPE html>View Code
Shows the relationship of module and its various components.
The following example implements a spa instance by configuring the route of the module with CONFIG. First create view1.html and view2.html. directory structure such as.
<div>    
view1.html
<div>    
view2.html
The View1 and View2 routes in the current page are configured with $routeprovider, which is the controller that corresponds to each view. View1 and View2 will show where the Ng-view is labeled on the current page.
We also decoupled the controller and HTML tags through config. For the above example, we need to add Ng-controller tag to the HTML tag to use the controller. This configuration is done directly through CONFIG.
<! DOCTYPE html>
Effects such as.
The last instance is closer to the actual engineering usage, we introduce factory to initialize the data (in the actual project, where access to WEBAPI gets the data to complete initialization), and the controller obtains the data through factory.
<! DOCTYPE html>
Http://www.cnblogs.com/1zhk/p/5348391.html
AngularJs Basics (60-minute entry) (RPM)