My Angularjs Learning Journey (ii)

Remember a great God said, "Time is like a sponge in the water, squeeze always have." Most of the time, I am so busy that I have no time to do what I want to do, rather than lazy to do it.

Don't say a word, go ahead.

3.3 Instruction (Directives)

One of the most powerful features of Angular is that you can write the template in HTML form. [Note: Angular introduces a powerful DOM conversion engine that can be used to extend the syntax of HTML]

Common built-in directives;

{{Greeting}} One-way data binding

Ng-model bidirectional binding

3.4 Filter (Filters)

Filters are used to format the values in an expression. It can be used in a view template (templates), a controller (controllers), or a service (services).   We can easily customize the filter. Using Filters in Templates

Filters can be applied in expressions in a view template, in the following format:{{expression | filter name}}

Example:

For example, the number 12 is formatted as a currency in the "{{currency}}" tag, which uses the Currency filter.

The result after formatting is "$12.00".

Filters can be applied to the results of another filter. This is called a "chained" use, as in the following format:

{{expression | Filter 1 | filter 2 | ...}} Filters can have (multiple) parameters, in the following format:

{{expression | filter: Parameter 1: Parameter 2: ...}}

Example:

For example, formatting in the tag "{{1234 | number:2}}" shows that the number 1234 is two digits after the decimal point, and that it uses the # filter.  The results are displayed as "1,234.00". 3.5 Dependency Injection Dependency Injection (DI) is a design pattern that lets code manage its dependencies. deep understanding of dependency injection (dependence injection)Introduction to Di

An object or function can obtain a dependent object (for short) in three ways:

1. Create dependencies, usually via the new operator

2. Find dependencies, check it in a global registry

3. Incoming dependencies, where this dependency is needed to wait for the dependent object to be injected in

The third approach is ideal, because it eliminates the burden of locating the corresponding dependency in the customer code, and in turn, the dependency is always easily injected into the component that needs it.

And here's a classic example to explain

Example

function SomeClass (greeter) {    this. greeter = greeter;  }      function (name) {    this. Greeter.greet (name);  }

In the above example, SomeClass you don't have to worry about what it depends on ( as long as the type A is used in the B type instance, a depends on B) where the greeter object is coming from, just know one thing: at run time, the greeter dependency has been passed in, just use it.

The code in this example is ideal, but it puts most of the responsibility for acquiring the dependent object in the customer code that we created SomeClass .

To separate the responsibilities of create dependencies, each Angular application has a injector object. This injector is a service locator that is responsible for creating and locating dependencies. When a certain dependency is declared in your app, Angular will call this dependency injector to find or create the dependencies you need and then return to you for use) 4, Angular compatibility with other frameworks Ng-app declaring Angular boundaries

Pure angular applications

      <ng-app>      //some            codehere ...</html  >

If it's an existing app that already uses other technologies such as java/rails to manage the DOM, you can have angular manage only part of the page

< HTML >        < Div   Ng-app > .....             </ Div > </ HTML >

5. Summary

We chose a framework that must have been a fancy to some of his advantages, and of course no omnipotent framework. Compared with the traditional framework, angular has its own unique advantages:

① solves the problem of interface display and related business mix together ②angular we can write a controller that contains business logic without referencing the DOM of course, for beginners like me, Angular have a less good place, on the one hand relatively small data, and debugging is more complex , maybe for you, not the problem, positioning it, will delay too much time. 6. Integrated demo Like most programmers, learning a thing, I am very eager to apply them to the project, and gradually can use it to build a more complete project structure. The structure of JS on the client side is as follows

Here, for example, the home module contains the Homemodule Master module, the Homectrl,editctrl,detailctrl,lstctrl controller, and a Peopleservice service

Here is actually the realization of a simple change and delete function

The effect of running is as follows:

Here is the ASP. NET MVC 5 combination of angular, the code part, the author is finishing ...

Resources:

angularjs Chinese Community

"Developing next-generation Web applications with Angularjs"

Deep understanding of dependency injection (dependence injection)

My Angularjs Learning Journey (ii)