Angularjs developing Next-generation Web application notes (i)

First, write in the top

Angularjs is a Web application development framework launched by Google. It provides a range of well-compatible and extensible services, including data binding, DOM manipulation, MVC design patterns, and module loading.

Now the online JS framework is vast, I really do not know what the framework to learn, learning the framework, perhaps also useless in the project, there is a better JS frame out. The front end is constantly tossing new things, life is tossing ~

Yes, so much of the front-end framework, is not really to learn?? The answer is of course not, look at the project to be completed. This is to bring my front-end predecessors to tell me, specifically using what framework or not framework,

Look at the project requirements, everything on time according to the quality of completion as the criteria for selection. But new things to learn, not to lag behind in learning.

Ii. What are some important concepts of ANGULARJS

Client templates for a chestnut: hello.html

Model/view/controller (MVC)

Data binding

Dependency Injection

Routing Management

Instruction (Angular's soul)

Example: Shopping cart ( source code at the end )

Iii. understanding of these concepts　

Angular is best used for single page Web applications. The concept of single page Web application was looked up on Baidu. As table:

Single page Web application (QQ music)

Single page Web Application,spa, which is just one web page app. A single-page application (SPA) is a Web application that loads a single HTML page and dynamically updates the page as the user interacts with the application. The browser loads the necessary HTML, CSS, and JavaScript at the beginning, and all of the operations are done on this page, which is controlled by JavaScript. Therefore, the development and design of modularization for single page application is very important.

Advantages:

1). Good interaction experience (users do not need to re-tan the new page, get the data are asynchronously obtained through Ajax) 2). Good front-to-back separation 3). Reduce server pressure (the server uses only data, no tube display logic and page composition, throughput will increase several times) 4).. A common set of back-end program code (without modifying the backend program code can be used in the Web interface, mobile phones, tablets and other clients)

Disadvantages:

1). SEO Difficulty is higher 2). Forward and backward management (all page transitions need to build stack management yourself) 3). The initial load time is much longer (code merge, CDN) Like game development, frequent manipulation of the DOM is also not suitable for use with angular

Client templates
Multi-page	Single page
Create HTML by assembling and linking the data on the server, and then sending the built-in HTML page to the browser.	Angular push templates and data to the browser to assemble them, and then the server role simply provides static resources for the template and provides data for the template

model/view/controller (MVC)	 
Clear separation of data management in code   ( ) v   application sequential logic   ( controller  ) c  and presenting data to the user   (	Angular in the the data in the M model is the property that is stored in the object ( property value V Document Object Model (DOM) C Controller is the link between JavaScript Class C and V is $scope

   

Data binding	Two-way binding
Ng-model	The so-called two-way binding, is nothing more than the interface from the operation can be reflected in real-time data, data changes can be displayed in real-time interface.

Dependency Injection	Give me a chestnut.
In the process of running a program, you need to collaborate with another object (call its methods, access his properties) without creating the callee in your code, but instead rely on the injection of the outer container	In the Hellocontroller controller, the $scope object will automatically pass data binding to us; we don't need to call any function to create him. Simply request it by preventing him from being in the Controller's constructor.

  Controller Hellocontroller Word first letter capitalization

Data binding
	This procedure does not register an event listener that changes the value on the input field.

Instructions	Angular can write templates like HTML, because the framework core contains a powerful DOM parsing engine.
Extended Directives	For example: Ng-controller. The HTML template sees new attributes that are not part of the HTML specification, which are called HTML extension directives
Custom directives	Define the instructions you need (it is said that the instruction is the soul of angular)

Attached shopping Cart source code:

<!DOCTYPE HTML><HTMLNg-app><Head>    <MetaCharSet= "UTF-8">    <title>Shopping Cart</title>    </Head><BodyNg-controller= "Cartcontroller">    <H1>Your Order</H1>    <Divng-repeat= "Item in Items">        <span>{{Item.title}}</span>        <inputNg-model= "Item.quantity">        <span>{{item.price | currency}}</span>        <span>{{Item.price * item.quantity | currency}}</span>        <ButtonNg-click= "Remove ($index)">Remove</Button>    </Div></Body><Scriptsrc=".. /assets/js/angular-1.3.0.js "></Script><Script>functionCartcontroller ($scope) {//currency is a filter that is used to convert text    //The $index parameter contains its index value in the Ng-repeat    //Splice () arrayobject.splice (index,howmany,item1,....., ItemX)    //defines a one-dimensional array to hold objects$scope. Items=[{title:'Paint Pots', Quantity:8, Price:3.95}, {title:'Polka Dots', Quantity: -, Price:12.95}, {title:'Pebbles', Quantity:5, Price:6.95}    ]; $scope. Remove= function(index) {$scope. Items.splice (Index,1); }}</Script></HTML>

View Code

Post-run results:

Angularjs developing Next-generation Web application notes (i)