从入门到实践(必看)

序

前端

AngularJS旨在克服HTML在构建应用程序时的缺点。(引用百度百科)

AngularJS使用不同的方法，试图弥补HTML本身在构建应用程序时的缺陷。AngularJS使浏览器能够通过使用我们称之为指令的结构来识别新的语法。(引用百度百科)

例如，使用双花括号{{}}语法进行数据绑定；使用DOM控制结构实现迭代或隐藏DOM片段；支持表单和表单验证；可以将逻辑代码与相关的DOM元素关联起来；可以将HTML分组为可重用的组件。本研究主要包括两个部分：Angular JS的通用指令Angular JS的mvc

1.AngularJS的常用说明

[通用说明]

1.na-app:声明angularjs管辖的区域，一般写在body或者HTML上，一面只写一个。

body ng-app='' /body

2.ng-model指令将元素值(如输入字段值)绑定到应用程序。

输入类型=' text ' id=' input ' ng-model=' name '/

3.ng-bind指令将应用程序数据绑定到HTML视图。

div id=' div ' ng-bind=' name '/divdiv { { name } }/div

4.ng-init指令初始化AngularJS应用程序变量。

body ng-app=' ng-init=' name=123 '/body

5.表达式：{{}}绑定表达式，可以包含数字、运算符和变量。但是，在加载网页的瞬间，表达式会看到{{}}，所以可以用ng-bind="替换

{{5 '' 5 '，有角度' }}

【基本感受】

说明：在AngularJS中，通过扩展HTML属性提供功能(菜鸟教程原话)

AngularJS指令是一个前缀为ng-的扩展HTML属性。

ng-app指令初始化一个AngularJS应用程序。

ng-init指令初始化应用程序数据。ng-model指令将元素值(如输入字段值)绑定到应用程序。

2.AngularJS的mvc

[mvc三层框架]

1.模型：应用程序中位于财产处理办公室的部分。(将数据保存或修改到数据库、变量等。).AugularJS中的模型的特征在于：数据

视图：用户看到并用来显示数据的页面

控制器：应用程序中处理用户交互的部分。负责从视图中读取数据，控制用户输入，并按项目发送数据。

2.工作原理：用户从视图层发出请求，控制器收到后转发给相应的模型处理。medle处理完成后，结果返回给控制器，并反馈给视图中的用户。

要创建角度模块，即由ng-app绑定的零件，需要传递两个参数：

模块名称，即ng-app需要绑定的名称。ng-app=' myApp '；

数组：要注入的模块名称；它不需要为空。

var app=angular.module('myApp '，[])；

在角度模块上，要创建控制器，需要传递两个参数比例。

ng-controller='myCtrl '

控制器的构造函数：构造函数可以传入多个参数，包括$scope/$roatScope和各种内置对象

angularJS中的作用域]

$作用域：局部作用域，在$作用域上声明的属性和方法只能在当前Controller中使用；

$rootScope: root scope，在$rootScope上声明的熟悉度和方法可以用在ng-app中包含的任何区域(无论控制器是否同意包含在控制器中)。

如果变量不是用$scope声明的，则在html中直接用ng-model绑定的变量的范围是：

1.如果ng-model在ng-Controller中，默认情况下，该变量将绑定到当前控制器的$作用域

2.如果ng-model不在任何ng-controller中，这个变量将绑定到$rootScope。

效果图如下：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS '。div 1 {宽度： 300 px高度： 100像素；背景色-: # 00BFFF；}/style/head body ng-app=' myApp ' div ng-controller=' myCtrl '输入类型=' text ' ng-model=' name '/div ng-bind=' name ' class=' div 1 '/div ng-bind=' age ' class=' div 1 '/div ng-bind=' class ' class=' div 1 '/div ng-bind=' class。name ' class=' div 1 '/div ng-bind=' class。age ' class=' div 1 '/div ng-bindapp . controller(' myCtrl '，函数($scope){ $scope.name='帅哥；$scope.age='18岁；$ scope.classes={ name: '张三，年龄：'16岁，sex: '男' };});app.controller('myCtrl1 '，函数($rootScope){ $rootScope.name='哈哈哈；});/script/html以上这篇AugularJS从入门到实践（必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。