Angularjs A general introduction to learning Notes

This weekend to stay at home for two days, just to continue to share angularjs in the noon leisure time related, today mainly share Angularjs general introduction and data binding part of the content, the following directly into the topic.

1. Basic concept:Angularjs is designed to overcome the lack of HTML in building applications. HTML is a very good declarative language for pseudo-static text presentation design, but it seems weak to build a Web application. So I did some work (you can also think of it as a gimmick) to get the browser to do what I want, and in general, we use the following techniques to solve the lack of static web technology in building dynamic applications. 2. Version

angualrjs1.x: currently more stable version.
angularjs2.x: Based on typescript writing, he changed a lot on the 1.x basis, favor the development of the mobile side, ES6 standard writing
angularjs4.x Latest Version

The current version of 2.x is not on the basis of a 1.x upgrade, is basically subversive, currently started two versions to maintain, 2.x began to put 1.x version basically re-architecture, and optimize a lot of things, and more advocating component into, this is similar to vue,react.

3. Core Features
MVC (or MVVM) design ideas:

A lot of people would think that Angularjs is the front-end MVC framework, I think that MVC is just a design idea, I think it can be said that there is an MVVM shadow inside, because MVVM is on the basis of MVC upgrade, add the data bidirectional binding function, but this is only my personal opinion, ask the great gods to correct.

bidirectional data binding:

Data two-way binding is not angularjs proposed, is very early, there is Microsoft's WPF in the use of MVVM ideas, front-end framework Knockoutjs have the concept of data bidirectional binding.
modularity and Dependency Injection

Modularization and Dependency injection are the core content of Angularjs, and also the highlight of angular.
Instruction System

The directive decency is also the core of angular, the instruction system is built-in directives and custom directives, which I think the function of the custom command is very powerful, can achieve a lot of powerful functions, details to explain the instructions in detail.

4. Field of expertise

1) Single page application application (SPA)
2) crud Program

It is possible that some of the park friends may not be very understanding of the single page application, such as our traditional through the IFRAME framework of the Multi-page application MPA, multi-page application of the drawbacks of multiple pages loaded, single page application through the HTML segment to load or switch mode. Here to Mpa,spa do not do too much introduction, we can Baidu a bit to understand.

Angularjs is suitable for CRUD application system, not suitable for the page frequently interactive application or the graphical page and the game class system does not fit the frame.

5. ANGULARJS Application Composition

Any NG application consists of a module type consisting of a controller, a service, a directive, a route, a filter, and so on, let me use a graph to represent the relationship:

6, Modules (module)
Module is a core presence in Angularjs, including many aspects such as Controller, Config, service, factory, Directive, constant, and so on.
How modules are created:
Angular.module (' myApp ', []);
Use of the module:
Add Ng-app where needed (on a tab in HTML)
Benefits of using Modules:
1) Keep the global namespace clean;
2) It is easier to write test code;
3) Easy to reuse code between different applications.
4) Make it easier for people to understand how to use the declaration.

7. Use Angularjs in the application

1) The JS library code of the angular framework is first referenced in the page when using angular in the application.

2) Add the Ng-app module to the HTML element of the angular range, add the controller Ng-controller, this is not necessarily on the body element, can be arbitrary elements, this is to indicate the use of angular application boundary.
<body ng-app= "MyApp" ng-controller= "Myctrl" >    <!--    1, expression binding---    
3, add JS code, and define modules and controllers and other content
<script>/    /module definition    //First parameter: application name, second parameter: Application dependent module    var app = Angular.module (' MyApp ', [' ngsanitize ']);    controller definition    //    first parameter: Controller name, second parameter: anonymous function, incoming scope, and add extra function on scope    app.controller (' Myctrl ', function ($scope) {        $scope. expression = "Hello expression";        $scope. Ngbind = "Hello Ng-bind";        $scope. Htmlbind = "<font color= ' red ' >hello,htmlbind</font>";        $scope. Subctrl = "Hello Subctrl";    }); </script>
From the above code snippet can be seen how to define the module and controller methods, and each parameter of the meaning are written comments, we can look at.
By the time you share the source code on github, you can download it.
Today to share how much content it, the next time the data binding and controller-related content to share to everyone, in this thank you for your support, and what is wrong to welcome you to correct!
Angularjs A general introduction to learning Notes