Angular study Notes

20150605

At present, in learning Angularjs, this front-end framework based on the JS language, and jquery for the different ideas of the product, jquery simple easy to use, learn how to take the DOM node, and then use Baidu, basically, can complete the basic things, and angular more like HTML has been cured, directly in the JS script to manipulate the data, give up the use of JS to manipulate HTML, but directly manipulate the data, this concept can be from the Shopcar (shopping cart) This example, to be reflected, Below will be posted Shopcar and filter Angularjs code, I believe, by reading the code, you can take a hint to the essence of angular and advantages.

Here's a comb, by writing two demo:shopcar and filter for some of the learning notes and noteworthy points of knowledge.

1, using bootstrap:

. Container: Is the container of bootstrap, in order to put the HTML content inside the container, the displayed HTML will be displayed in the center to use the. Col-lg-2 grid system.

Here is the code that uses the boot class to place input and button on a line, which is available online and can be copied directly:

(here all the HTML code uses sublime simple rules, want to understand this rule can be self-Baidu)

Div.input-group>div.input-group-btn+input.form-control+div.input-group-btn

2, bidirectional data binding:

This is my feeling, angular most NB aspect, can use the dirty check mechanism to monitor the model and the data in the view ($apply and $watch), which side of the data changes, will be reflected, very good!

3,foreach (Data,function (Value,key) {})//The key here is the index value of the data index

4,ng-show= "Data.length"

ng-show= "!data.length"

These two tag properties can control the display/hiding of this tag

5, the dirty check mechanism in the future practice and practice to summarize the methods used.

6,{{function ()}}, inside can put function,function can return some value

Sharing data between 7,controller:. Factory () services, services are angular important data containers that you will learn to use in the future.

8, data processing can be done directly in the HTML processing:

ng-repeat= "I in Data | Filter: ' String ' |orderby: '-id ' "

Filter can put a string, you can also put model, directly with the model data to filter information

If you want to filter by a field: html.ng-model= ' search.id '

9,class transform with Ng-class true and false to achieve, ng-class= ' {classname:true/false} '

True/false---can also be converted to expressions &&

Front-end engineers must have skills: HTML5 and CSS3, do a few angular of the demo will learn these two things, very important!

Angular study Notes