前 言
前端
angularjs是为了克服html在构建应用上的不足而设计的。（引用百度百科）
angularjs使用了不同的方法，它尝试去补足html本身在构建应用方面的缺陷。angularjs通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。（引用百度百科）
例如：
使用双大括号{{}}语法进行数据绑定；
使用dom控制结构来实现迭代或者隐藏dom片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的dom元素上；
能将html分组成可重用的组件。
本篇学习主要有两个部分：
①【angularjs 常用指令】②【angularjs 的 mvc 】
| 1、angularjs 常用指令 |
【常用指令】
1.na-app:声明angularjs所管辖的区域，一般写在body或者html上原则一个一面只写一个
<body ng-app=""> </body>
2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
<input type="text" id="input" ng-model="name"/>
3.ng-bind 指令把应用程序数据绑定到 html 视图。
①<div id="div" ng-bind="name"></div>
②<div>{{name}}</div>
4.ng-init 指令初始化 angularjs 应用程序变量。
<body ng-app="" ng-init="name=123"></body>
5.表达式：{{}}绑定表达式，可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替
{{5+""+5+',angular'}}
【基本感念】
指令：angularjs中，通过扩展html的属性提供功能 ↓↓↓↓（菜鸟教程中的原话）
angularjs 指令是扩展的 html 属性，带有前缀 ng-。
ng-app 指令初始化一个 angularjs 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
指令：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上。
效果图如下：
代码如下：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{ width: 300px;
height: 100px;
background-color: #00bfff;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="text" ng-model="name"/>
<div ng-bind="name" class="div1"></div>
<div ng-bind="age" class="div1"></div>
<div ng-bind="classes" class="div1"></div>
<div ng-bind="classes.name" class="div1"></div>
<div ng-bind="classes.age" class="div1"></div>
<div ng-bind="classes.sex" class="div1"></div>
</div>
<div ng-controller="myctrl1">
<input type="text" ng-model="name"/>
<div ng-bind="name" class="div1"></div>
<div ng-bind="age" class="div1"></div>
</div>
</body>
<script language="javascript" src="angular-1.5.6/angular.js?1.1.11"></script>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){$scope.name = "帅哥" ;
$scope.age = "18岁";
$scope.classes = {name:"张三",
age:"16岁",
sex:"男"
};
});
app.controller("myctrl1",function($rootscope){$rootscope.name = "hahaha" ;
});
</script>
</html>
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！