1.Angular Framework-angular Introduction and basic use, MVC pattern Introduction

1.1. ANGULARJS Overview

1.1.1. Introduction

• Referred:ng
• Angular is an MVC framework

AngularJS 诞生于2009年，由 Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化(编程)、自动化双向数据绑定、语义化标签、指令、依赖注入等等。

• Other front-end frames: Vuejs, Avalon, React, BackBone, Knockoutjs

1.1.2. Core features of angular

• directives ,MVC, modularity , bidirectional data binding

1.1.3. Principles

• Developers are not recommended to manually manipulate the DOM, which is the underlying or manipulating the DOM
• Free your hands and simplify the operation of HTML (free from the DOM)

1.1.4. Advantages

• Angular minimizes DOM operations on the page
• Let JavaScript develop focus on business logic
• More reasonable code structure
• Lower maintenance costs
• Combine page structure and data with simple instructions
• Component-based programming with custom directives

1.1.5. Usage Scenarios

• Angularjs is primarily concerned with the construction of CRUD applications, typically single-page applications.

1.2. SPA-Single page application

• SPA:Single Page Application
• Introduced:

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

• Single-page application:

• Traditional multi-page applications:

1.2.1. Advantages

• 1 No Refresh loading page, avoid unnecessary jump and repeat rendering
• 2 Better user experience, let users feel the speed and fluency of native app in web App
• 3 Reduce request volume, save traffic and speed up page response

• 4 You can select a retention state, such as a music website, when you toggle a page, the song does not stop playing

• Disadvantages of traditional Ajax:

1 ajax请求不会留下历史记录2 用户无法直接通过URL直接进入指定页面3 ajax对SEO不友好

1.2.2. Disadvantages

• Not conducive to SEO, but there are other solutions

1.2.3. Key technical points

• 1 Ajax
• 2 use of anchor points (Window.location.hash #)
• 3 Hashchange Events

1.2.4. Implementation ideas

• Listen for events that change the value of the anchor, and request the corresponding data according to the different anchor points
• 1 anchor (#) is used as the inside of the page to jump, locate and display the corresponding content
• 2 Ng, the anchor is used as an identity for requesting different resources, requesting data and presenting the content

1.2.5. Examples and references

• SPA-Baidu Encyclopedia
• A SPA (single page application) architecture
• NetEase Cloud Music

1.3. Basic use of Angularjs

• AngularJS is executed automatically, and we just need to tell it what to do and where to do it.

1.3.1. Cases

• 1 Hello World case
• 2 text box value plus 1 case

1.3.2. Use steps

• 1 Introducing NG's JS file
• 2 Setting ng-app Instructions
• 3 adding directives to a text box ng-model
• 4 Adding instructions to the button ng-click

1.4. Directive-directives

• AngularJS has a complete, extensible set of instructions to help WEB application development
• Directives are some markup on DOM elements that allow NG to add some special behavior to DOM elements
• Directives include: built-in directives and custom directives

1.4.1. What is the directive?

• The prefix ng- attribute is called a directive, which is to bind data to DOM elements, add events, etc.

<input type="text" ng-model="userName">

• The value of the instruction is one: expression

1.4.2. Type of instruction

• Attribute (A), Element (E), Class (C), comment (M)

1.4.3. common directive 1.4.3.1. Ng-app

• Function: This directive is used to start a ANGULARJS application
• Understanding: Specifies the boundaries of the ANGULARJS application management, only the instructions inside the Ng-app will work
• Explain:

ng-app 指令指定了应用的根元素，通常放置在页面的根元素，也可以是任意的元素例如：body或html标签应用程序运行时，会自动执行边界内部的其他指令。标记的范围尽可能小，提高性能注意：每个页面中可以出现多次 `ng-app` 指令（不推荐！）如果是多个需要手动引导：`angular.bootstrap()`

1.4.3.2. Ng-click

• Function: Used to specify events that are executed when a DOM element is clicked
• Grammar:ng-click="expression"

<button ng-click="val + 1"></button>

1.4.3.3. Ng-model

• Role: Bind data, use in Input/select/textarea tags
• Description

ng-model指令将尝试把属性绑定到当前作用域中。如果当前作用域中没有该属性，那么AngluarJS会帮我们隐式创建并且添加到当前作用域中。

1.4.3.4. Ng-init (Learn)

• Function: Initialize the value of the property
• Grammar:ng-init="uName=‘Jack‘"

1.5. Expression-expression

• Description: Some JavaScript code fragments are primarily used in interpolation bindings or as attribute values directly as directives

从JS角度，使用运算符和数据 连接起来的有 结果 的代码就是：表达式注意：不带分号例如：可以使用 console.log(); 打印出来， 或者    console.log( expression );可以用作 赋值运算符 的右值    var test = expression;

<p>{{user.name}}</p><p>{{1 + 8}}</p><p>{{"hello" + "world"}}</p><div ng-click="sayHi()"></div>

1.6. Angularjs's execution process analysis

• Example code:

<body ng-app>    <input type="text" ng-model="user.name" />    <p>Hello {{user.name}}</p></body>

1.6.1. Execution Process Description

• 1 ng-app tell Angularjs to let it manage the inside of the body code
• The 2 ng-app directive creates an object that contains the relevant contents of the ANGULARJS, for example: the data model
• 3 ng-model instruction Query data model there are user no objects and name attributes, no then create
• 4 Create user object and name properties, and initialize name value to: empty string
• 5 Expressions {{user.name}} Find out from the data model that there is no such data, if any, take it out and show
• 6 ng-model and {{}} User.Name point to the same data in the data model
• 7 Changes in text box values can result in changes in the data model, and changes in the data model can also lead to changes in the expression

1.6.2. Case Hardening

• Addition Calculator case

1.7. View Angularjs's documentation

• Goal: Learn to view official documentation

1.7.1. Offline documentation and online documentation

• ANGULARJS Official documents
• Ng Chinese Document-1
• Ng Chinese Document-2

1.8. Module-Modules

• All the other content is based on the module, there are modules have other content!

模块是一个容器包含了应用程序的不同组成部分，并且这些内容必须要依附于一个模块    例如：controllers, services, filters, directives, configs 等模块是应用程序的组成单元，例如：登录模块、注册模块、商品列表模块 等，这些模块组合在一起构成了一个完整的应用程序。

1.8.1. Creating a Module

• Grammar:var app = angular.module(moduleName, []);
• Role: Create a module that allows Angluarjs to manage the entire content in a modular format
• Description: Modules can also be created several times, but rarely do this
• Example:

// 第一个参数：模块名称，字符串// 第二个参数：数组，用来添加当前模块的依赖项var app = angular.module("firstApp", ["otherModuleName"]);

1.8.2. Getting the module

• Grammar:var app = angular.module(moduleName);
• Function: Gets the specified module

1.9. Controller-Controllers

• Need to cooperate with ng-controller directives to use

1.9.1. Creating a Controller

• Grammar:app.controller(ctrlName, callback);
• Role: Create a controller, the controller must appear under a module
• Example:

app.controller("DemoController", function($scope) {    // $scope 相当于当前的数据模型});

1.9.2. The role of the controller

• 1 data used in the initial view, which is the container for storing data
• 2 exposing a data model or function behavior to a view through a $scope object
• 3 Monitor the change of the model and make corresponding logical processing

1.9.3. Description of the $scope

• 1 $scope is a bridge between the controller and the view for passing data between the controller and the view
• 2 recommendation: Adding data to $scope should use an object, not as its property
• 2 Exposing the data model (data and behavior) in the controller, using a directive or an expression in the view
  • Contrast: Local Variables
• 4 Note: $scope This name must be written like this!
• 5 $scope was injected into the controller when it was created.

1 ng 在使用的时候，页面中只要有 ng-app 就会创建一个 scope，名字是：$rootScope2 $scope 是 HTML（视图）背后的“男人” ---->    视图：女人，负责美（展示）    $scope：男人，负责提供美的资源（数据）3 所有的控制器都继承自 $rootScope 4 继承是按照：原型式继承 来实现5 对于HTML来说，参照原型式继承：子节点继承自父节点

1.10. Data binding method 1.10.1. Bidirectional data binding

• Generally ng-model implemented by directives
• Overview:

数据模型的值发生改变，就会导致页面值的改变；页面值的改变，也会导致数据模型中值的改变，这种相互影响的关系就是双向数据绑定。

1.10.2. One-way data binding

• Generally {{}} implemented by expressions
• Overview: The value of the data model changes, causing the page value to change

1.11. MVC and MVVM

• Advantages: Code Separation (View code, controller code), separation of duties, decoupling
• Objective: To solve the tight coupling relationship between application presentation structure and business logic, and to realize modularization and reuse.
• Improves the structure and maintainability of code, but does not improve the efficiency of code execution

1.11.1. Introduction to MVC

MVC（Model–view–controller）是一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。MVC是一种应用程序的设计思想（不是设计模式）

• Model for data storage and data processing methods (CRUD)
• View Display Data
  • In Angluar, view refers to the HTML code that is ordered to be wrapped in the page ng-app
• Controller is the part of the application that handles user interaction
  • Usually the controller is responsible for reading data from the view, controlling user input, and sending data to the model, which is the bridge of data and view.

例如：移动端和PC端两个View，共享同一个Model在MVC设计模式中， Model 响应用户请求并返回响应数据，View 负责格式化数据并把它们呈现给用户，业务逻辑和表示层分离，同一个 Model 可以被不同的 View 重用，所以大大提高了代码的可重用性。

1.11.2. MVVM

• Evolved from the MVC pattern!
• Composition

M: model 模型，相当于 User（构造函数）V: view 视图， ng-app 管理的页面VM: ViewModel 视图模型 在Angular中就是：$scope

1.11.2.1. ViewModel

• 1 $scope is actually a VM in the MVVM pattern (view model)
• 2 angular a lot of the use of $scope, covered the concept of C (Controller), so many people call it the MVVM framework
• 3 do not delve into what type (MVC/MVVM), it is important to learn to use.
• 4 MVW ===> "Model View Whatever"
• 5 MVVM first out of Microsoft WPF now

1.11.3. Case: User Registration 1.11.3.1. Basic use of Localstorage

• getItem(keyName): Read, Parameter type: string
• setItem(keyName, keyValue): set, Parameter type: string

1.11.3.2. Reference

• Localstorage-mdn
• Basic use of Localstorage

1.12. $watch-Listening data

• Grammar:$scope.$watch(attrName, callback, flag);
• Role: Listen to changes in the data model in $scope, unable to monitor other data (for example, normal variables)
• Note: When the $watch method is called, it is called immediately.

app.controller("demoController", function($scope) {    $scope.name = "jack";    // 参数一：表示监听的$scope中的属性名称，类型为：字符串    // 参数二：表示数据变化执行的回调函数，有两个参数分别是：当前值与变化之前的值    // 参数三：比较方式，false：表示比较引用；true：表示比较值。默认值为false    $scope.$watch("name", function(curValue, oldValue) {        // 只要被监听的数据发生变化，就会指定该回调函数中的代码！        // 略过第一次执行        if(curValue === oldValue) return;    });});

1.13. How to start Ng

• 1 ng-app start with command
• 2 Manual start:angular.bootstrap(document, [‘MyModule‘])

// 等待文档加载完成后，启动 angularangular.element(document).ready(function() {    angular.bootstrap(document, [‘MyModule‘]);});

1.14. Other 1.14.1. Multiple apps

• Note: Creating multiple on the same page is not recommendedng-app
• Note: NG will only find the first ng-app and start, and if you start the other one, you need to start it manually

<div ng-app="FirstApp"></div><div ng-app="SecondApp"></div>

1.15. The difference between frame and library 1.15.1. Library

• JQuery is a library, Angular is a framework
• jquery is a collection of APIs that encapsulate DOM operations and improve development efficiency

使用jQuery的思路：1 想要获取元素，我调用 $(selector)2 元素绑定事件，我调用 .on()3 进行什么DOM操作，我调用什么方法完成总结：你告诉jQuery你要做的操作，jQuery就能帮你做好。      **在使用库的过程中，开发人员是 控制者**

1.15.2. Framework

• The framework prescribes a way of programming
• When using frames, the framework controls everything, and we just need to write the code according to the rules.

Angular提供了一套完整的解决方案，所有的流程都设定好了我们只需要按照流程规则，把我们的代码进行填坑。

1.15.3. The main differences are:

• Control inversion, the framework that controls the entire process is the framework
• Your call Library, the Framework calls you.
• Hollywood principles: Don ' t call us, we'll call you.

1.16. Other information 1.16.1. Angular Code Style

• Johnpapa/angular-styleguide

1.16.2. modularity

• Lego
• Lego-Robotics

1.16.3. Reference website

• Baidu CDN
• Open Source China online tool

1.Angular Framework-angular Introduction and basic use, MVC pattern Introduction