AugularJS根基入门与实践-

??前?言?前端??AngularJS是为了克制HTML在构建利用上的不够而设计的。（援用baidu百科）AngularJS运用了不一样的办法，它尝试去补脚HTML自身在构建利用方面的缺点。AngularJS通过运用我们称为指令(directives)的构造，让阅读器能够辨认新的语法。（援用baidu百科）例如

前 言

前端

　 AngularJS是为了克制HTML在构建利用上的不够而设计的。（援用baidu百科）

　　AngularJS运用了不一样的办法，它尝试去补脚HTML自身在构建利用方面的缺点。AngularJS通过运用我们称为指令(directives)的构造，让阅读器能够辨认新的语法。（援用baidu百科）　　　　　　例如：

　　　　　　　　运用双大括号{{}}语法进行数据绑定；

　　　　　　　　运用DOM控制构造来实现迭代或者隐蔽DOM片段；

　　　　　　　　支撑表单和表单的验证；

　　　　　　　　能将逻辑代码关联到相干的DOM元素上；

　　　　　　　　能将HTML分组成可重用的组件。

本篇学习主要有两个局部：

①【AngularJS 常用指令】
②【AngularJS 的 mvc 】
　

　　　　　　　　　　

1、AngularJS 常用指令

【常用指令】
　　1.na-app:声明angularjs所管辖的区域，个别写在body或者HTML上准则一个一面只写一个


2.ng-model 指令把元素值（比方输入域的值）绑定到利用程序。


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

①
②{{name}}
4.ng-init 指令初始化 AngularJS 利用程序变量。


5.表达式：{{}}绑定表达式，可以包括数字、运算符和变量。但表达式在网页加载眨眼会看到{{}},所以可以用ng-bind=”取代
{{5+""+5+',Angular'}}

【根本感念】
指令：AngularJS中，通过扩展HTML的属性供给功能 ↓↓↓↓（菜鸟教程中的原话）
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

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

ng-init 指令初始化利用程序数据。

ng-model 指令把元素值（比方输入域的值）绑定到利用程序。

2、AngularJS 的 mvc

　　　
【mvc三层框架】

1、 Model（模型）：利用程序中处于处置属性局的局部。（保留或修改数据到数据库、变量等）。AugularJS中的Model特征的是：数据
　　 view（视图）：会员看到的而用于显示数据的页面
　　 controller（控制器）：利用程序中处置会员交互的局部。负责从视图读取数据，控制会员输入，并项目性发送数据。

2、工作道理：会员从视图层发送要求，controller接收到要求后转发给对应的model处置，medle处置完成后返回效果给controller，并在view成反应给会员。

　　新建一个angular模块，即ng-app所绑定的局部，需要通报两个参数：
① 模块名称，即ng-app所需要绑定的名称。ng-app="myApp"；
② 数组：需要注入的模块名称，不需要可为空。

var app = angular.module("myApp",[]);

在Angular模块上，新建一个控制器Controller，需要通报两个参数称。
① ng-controller="myCtrl"
② controller的结构函数：结构函数可以传入多个参数，包含$scope/$roatScope以及各种系统内置对象

【angularJS中的作用域】
①$scope：部分作用域，声明在$scope上的属性和办法，只能在目前Controller中运用；
②$rootScope：根作用域，声明在$rootscope上的熟知感和办法可以在ng-app所包括的任何区域运用（不管可否赞成controller，或可否在controller包括范畴中）。
>>> 若没有运用$scope 声明变量，而直接在html中运用ng-model绑定的变量作用域为：
1.要是ng-model在某个ng-controller中，则此变量会默许绑定到目前Controller的$scope上
2.要是ng-model没有在任何一个ng-controller中，则此变量将绑定在$rootScope上。

结果图如下：

 1  2  3      4          5          6         13     14     15         16             17             18             19             20             21             22             23             24         25         26             27             28             29         30         31             32     33     
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！