Understanding and learning angularjs (I)

Time:2021-8-30

Angularjs

AngularIt’s a themeMVVMThe framework is different from the traditional library:

  • Class libraryIs a collection of functions that can help you write web applications. It’s your code that plays a leading role, and it’s up to you to decide when to use the class library. Class libraries include: jQuery, etc

  • frameIt is a special and implemented web application. You only need to fill it with specific business logic. Here, the framework plays a leading role. It calls your code according to the specific application logic. Framework: knockout, etc.

Angular.jsIt is mainly used to build single page web applications, providing such as:

1. Decouple application logic, data model and view
2. Ajax services
3. Dependency injection
4. Browse history
5. Test and more functions

Brief explanationAngularjsIs one that can giveHTMLPlus interactive clientjsFrame. We need to understand how to makeHTMLTimely calljs

stayAngularIn, we give it through directivesHTMLPlus behavior. An instruction is a tag on an HTML tag that tellsAngularWhich JS code to run or reference. Assign a function name to the instruction to run. But this is not a good way. We just need to understand that this is how instructions bind behavior

Angular module

Module means writeAngularApplication code fragments, which can separate the code, so the code will be better maintained, readable and tested. You can alsomoduleCode dependencies are defined in the code. You can call a module, and then define that the module depends on the other two in the code.

var app = angular.module('store',[]);// Store = > application name, [] = > defines dependencies, and app is the instance object of the module

AngularJSAllow us to useangular.module()Method to declare a module. This method can accept two parameters. The first is the name of the module and the second is the dependency list, that is, the list of objects that can be injected into the module.

expression

expression{{}}Allows you to dynamically insert values into yourHTMLamong.

Controller

The controller helps us display the data information in the application to the page. The controller is where the application behavior is defined by defining functions and variables.ng-controllerDefinedAngularJSThe application is controlled by the controller.

ng-controllerHelp us attach the controller to the HTML element asng-controllerProperty, we want to write the controller name, we useasKeyword alias this property value. We will use this alias in the expression within the element

<div ng-controller="StoreController as store">
    <h1>{{store.product.name}}</h1>
    <h2>${{store.product.price}}</h2>
    <p>{{store.product.description}}</p>
</div>
(function () {
    var app = angular.module('store',[]);
    app.controller("StoreController", function () {
        this.product = gem;
    });
    var gem = {
        name: 'trigkit4',
        price: 2.09,
        description: '...'
    }
})();

The scope permissions of this controller are limited to the elements to which it is attached

Instructions are HTML tags that trigger the behavior of JavaScript functions
Modules are components that define applications
The controller defines the behavior of the application
Expressions control how we display information on the page

Ng app to put the application module on the page 
Ng controller to put the logic controller on the page
Ng show & NG hide to control the display of elements through expressions
Ng repeat to loop through all the data in an array

Filter

angularMany different filters are provided. In a similar representation, take out some data and pass the data (vertical bar | followed by expression) to the corresponding filter,
Sometimes you can add corresponding parameters to it

{{data* | filter:option*}}

For example:
uppercase & lowercase

{{'trigkit4' | uppercase}} /*TRIGKIT4*/

For example, the limitto filter can control the output number of characters:

{{'My dictionary' | limitTo:8}} /*My dicti*/

Directive directives

AngularjsPass instruction(directive)ExpandHTMLGrammar, through{{}}Data binding

ng-app

ng-appProperty declares that all the contents contained by it belong to this propertyAngularJSApplication, only byng-appOnly the elements contained in the DOM element of the property are affectedAngularJSinfluence. If the instruction is not written,angularIt will not be implemented.

ng-init

ng-initInstruction initializes application data, that is, forAngularJSThe application defines the initial value. As follows, for the applicationnameInitial value:

<div ng-app="" ng-init="names=['mike','trigkit4','jack']">
    {{names}} <!--['mike','trigkit4','jack'] -->
</div>

ng-model

Just useng-modelInstructions can bind application data toHTMLElement, implementationmodelandviewTwo way binding. Take the following example:

http://codepen.io/hawx1993/pe…

ng-bind

ng-bindandAngularjsexpression{{}}Very similar, the difference isng-bindYesangularThe data is displayed only after parsing and rendering. Also, expressions cannot be written in the attributes of DOM elements, but instructions can.

http://codepen.io/hawx1993/pe…

ng-click

AngularJSHave their ownHTMLEvent instructions, such as throughng-clickDefine aAngularJSClick events.

http://codepen.io/hawx1993/pe…

ng-hide="true", settingHTMLElement is not visible.

ng-controller

Controller inAngularJSThe role of is to enhance the view. When we create a new controller on the page,AngularJSA new is generated and passed$scopeGive this controller. It can be initialized in this controller$scope

http://codepen.io/hawx1993/pe…

To explicitly create a$scopeObject, we need to install a DOM elementcontrollerObject, usingng-controllerInstruction properties.

In general, we use the controller to do two things:

  • initialization$scopeobject

  • by$scopeObject add behavior (method)

ng-repeat

<div ng-app="" ng-init="people=[
        {name:'mike',age:21},
        {name:'trigkit4',age:22},
        {name:'Tom',age:12}]">
    <table>
        <tbody>
            <tr ng-repeat="x in people">
                <td>{{'Name: ' + x.name + ',Age: '+ x.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

$scope control range

$scopeIs a willview(a DOM element) linked tocontrollerObjects on. Every angular application has one$rootScope。 this$rootScopeIt’s the topscope, which corresponds tong-appThe DOM element of the directive attribute.

It is also aJavaScriptObject that points to all HTML elements and execution contexts within the scope of the application.

All$scopeAll follow prototype inheritance, which means that they can all access the parent$scope, it also has the characteristics of prototype chain, that is, accessing properties and methods up to the top.

In short,$scopeIs the current scope associated with the instruction element, which can be understood as a channel between the view and the controller. When angular is running, all$scopeObjects are attached or linked to the view.

Directive and scope

Instructions usually do not create their own$scope, exceptng-controllerandng-repeat, they create their own child scopes and attach them to DOM elements.

Bidirectional data binding

Bidirectional data binding means that these expressions change automatically when the properties change. When the data changes, the corresponding view will be changed. When our view changes, the corresponding data can be changed. This is two-way data binding.

Bidirectional data bindingSave a lot of boilerplate code.AngularIt helps you divide the application blocks into the following types: controller(Controller), instruction(Directive), factory(Factory), filter(Filter), service(Service)And views(View)(that is, the template). They are organized into modules that can then be referenced by another.

Bidirectional data binding: bidirectional binding between data model (module) and view (view).

The advantage of bidirectional data binding is that there is no need to perform CRUD (create, retrieve, update, delete) operations with unidirectional data binding

The most common application scenario of two-way data binding is the form. In this way, when the user completes the input on the front page, we have obtained the user’s data and stored it in the data model without any operation.

Dependency injection

Dependency injection means that what you need is not created by you, but provided to you by a third party, or container. Such a design conforms to orthogonality, the so-called loose coupling.

In short, you don’t have to care about the object life cycle. When it is created and destroyed, you just need to use it directly. The object life cycle is managed by the framework that provides dependency injection.

The first angularjs web application

Understanding and learning angularjs (I)
Understanding and learning angularjs (I)

todoList demo

http://codepen.io/hawx1993/pe…

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]