Angular Module/Service/MVVM

Angular and jqueryCommon Ground

• It's just a front-end JS file.

different points:

• angular is a framework

  • the code we write is called by the framework and we have to write code according to a specific rule

• jquery is a library

  • we call the library prefab method or object implementation we want to function

• in mind: + jquery improves the development efficiency of the operating Dom

  • angular has almost no dom operation (no, no, just don't do it ourselves)

  • angular built something like Jqlite angular.element ()

  • angular do not advocate DOM operations

What is Angularjs

• A front-end framework that provides a way to greatly reduce DOM operations by introducing some of the ideas that are traditionally used in background development in front-end pages, enhancing the structure and maintainability of code

• A fully functional front-end framework that provides a convenient way to develop Web applications by enhancing HTML

• Its core feature is that there is virtually no DOM operation, so that the developer's energy and time are all focused on the business

Dependency Injection

• You don't want to come to me, I'll find you.

• The principle framework obtains the passed parameters in the process of invoking the method, and then the framework handles the method ToString after it is processed by the regular expression and then instantiates it sequentially.

Module

• How to do multi-module development

  • Multi-module development usually refers to the development of multiple module modules,

• Multi-module Other ways of use (not recommended)

  • 1. Create multiple module modules as you would any other

  • 2. Set different IDs by ID binding:< div id= "app3">

  • 3 via Bootstrap binding module: Angular.bootstrap (app3,["Otherapp"]);

• Multi-module use

  • One parameter is to look for the module angular.module (' Need to look for the module name ')

  • Two parameters are Add Module angular.module (' Module name ', [' dependent module ']);

• How to divide a module

  • 1. How many modules are required depending on the composition of the application currently in need, such as:

    • Registering the module

    • Login Module

    • User List Page Module

    • User Detail Page Module

• 2. According to the different file types to divide

  Like what:

  • All the Controllers

    • All the Services

    • All the instructions.

Controller

• controller function

  • initialization properties

  • Exposing properties or behaviors

  • monitoring data changes $scope. name=";

     $scope. $watch (' name ', function (newval,oldval) {console.log (newval); Console.log (Oldval);}) If it is a watch object, add one more parameter after 

• controller code compression problem

  • contemporary Code JS compression when the contents of the controller will be replaced as a variable, in order to prevent this problem occurs in the Controller controller (' Myctrl ', ['

• controller multiple notation

  • 1. Standard notation app.controller (' Myctrl ', function () {})

  • 1. fuction written on the outside (cannot be compressed outside) function Otherctrl ($scope) { $scope. name= ' 123 '; } app.controller (' Myctrl ', Otherctrl)

• 1. fuction written outside (cannot be compressed outside) function Otherctrl (otherscope) { Otherscope.name= ' 123 '; } otherctrl. Scope '];//here add $inject App.controller (' Myctrl ', Otherctrl)

• 4 using the Dependency injection app.controller (' Myctrl ', function?) inside the controller. Scope, $injector) {

     $injector. Invoke (function ($log) {       $log. info (123);   })

  })

• 5 Early use (angular-1.2.29 version) function Mycontroller ($scope) {

     $scope. name= "angular early use";

  }

• 6 Object-oriented method usage

  • 1. The function of the controller is not written to reference function App.controller (' Myctrl ', Democtrl);

    • 2. Create an object-oriented function ' function Democtrl () {

          This.name= ' 123 ';} `

    • 3. Add as scope ng-controller= "Myctrl as scope" when using

Angular Service

• What is a service

  • In AngularJS, a service is a function or object that can be used in your AngularJS app. More than 30 services are built in AngularJS.

  • angular main service

  • $scope: scope to be responsible for connecting the view and controller, The ViewModel in MVVM is the equivalent of a bridge.

  • $rootScope

  • $location

  • $window

  • $log

  • $interval and setinterval difference Sometimes angular cannot monitor data changes during data transformations:

        SetInterval (function () {$scope. Time=new Date ();     Console.log ($scope. Time); $scope. $apply ();//tell angular to update the data},1000)//But if you use $interval this angular service, sometimes the service internally helps us to do this kind of data update 

• Create service created through module: service, Factory

  • Service creation:app.service (' MyService ', function () { this.name= ' myservice '; });

  • Factory created: app.factory (' MyFactory ', function () { return {

    } });

instruction

• Ng-bind

• Ng-bind-html

• Ng-repeat

• Ng-class

• Ng-if

• Ng-hide

• Ng-show

• Ng-switch

• Ng-src

• Ng-href

• Ng-focus

• Ng-blur

• Ng-dblclick

MVVM Design Pattern

• what is MVVM design mode

  • model"

  • view

  • ViewModel (view model)

  • consists of the above three parts where ViewModel is the function of the bridge to link the model and view together

  • MVVM pattern is the abbreviation for the Model-view-viewmode (model-view-view model) pattern, It first appeared in Microsoft's WPF and Silverlight frameworks, using the ViewModel (view model) to Bond view and model, while further separating the view from the model. Facilitates separation of artwork and programmer functions.

• MVVM Nature

  • The essence of this is to code the modularity

    • The advantages of modularity are clear logic, easy maintenance but also increase the amount of code and development costs

Characteristics of Angular

• Bidirectional data binding

• Instruction System

• MVVM design Pattern

• Multi-Modular development

• Dependency Injection

Angular Module/Service/MVVM