1.ng-app 边界指令：规定了使用angular使用范围；在这个ng-app的范围里面 可以使用angular语法 ng-app 不赋值 ng-app='myApp'（ang创建模块的时候限制边界，使用） 创建angular模块 ng-app='名称' 一般都要名字
<html lang="en" ng-app='myApp'>//赋值 <html lang="en" ng-app>//不赋值2.{{}} 表达式 变量 函数() 简单的运算 AngularJS 表达式写在双大括号内：{{ expression }} 作用：显示数据 把数据显示到视图上面
<h2>{{1+2}}</h2>3.ng-model:内置指令：用在input 双向数据绑定，可以获取input里面输入的内容 textarea ng-model='msg' 把用户输入的信息数据 存储在msg变量上；
<input type="text" ng-model='msg' ng-init='msg="hello world"'> <!-- 展示数据同步 --> <p ng-bind='msg'></p>4.ng-init:初始化数据 说明：ng-init='msg="hello world"'
<div ng-init='mm="期待改变数据"'> {{mm}} </div>5.ng-bind 和{{ }} 显示数据 {{}} 没有引入angular会显示{{}} ng-bind：如果angular没有加载的时候，什什么都不不显示
6.ng-controller=‘名字’
angular设计模式：mvc
m：model 模型 数据
v: view 视图 页面（html）
c： controller 控制器 控制视图和模型数据
PS：页面里面可以有多个控制器；每个控制器作用域在当前控制器里面；
app.controller('控制器名字',['$scope','$rootScope',function($scope){ //$scope.是angular里面给我们提供的对象 内置服务 //$scope 连接数据和视口 }])7.ng-repeat='' 遍历数据
说明：ng-repeat='变量名 in 数组' 遍历数组每一列的值 给变量名
$index 获取当前列的下标---（重点）
$first 判断是否是第一元素
$last 判断是否是最后一元素
ps：
一般是取到数组时，采取页面遍历；
遍历数组 不允许有重复的信息；
如果有，添加标识 track by $index；
<li ng-repeat='item in arrList track by $index'>{{item}}{{$index}}</li>8. ng-if /ng-else ng-if=true 显示 内容 false隐藏 9. ng-show='boolean' true 显示 false 不显示 是否显示 10.ng-hide='boolean' true 不显示 false 显示 是否隐藏 ng-if=''true 显示 false 不显示 是否显示
可以存变量 也可以存Boolean表达式 ； 区别： ng-show /ng-hide 控制css的display：none显示隐藏的 ng-if/ng-else 控制dom元素 是否存在
<div ng-show='flag'>show</div> <div ng-hide='flag'>hide</div> <div ng-if='flag'>if</div> <script> var app=angular.module('app',[]); //控制器 app.controller('mainctrl',['$scope',function($scope){ //控制flag 显示隐藏 // $scope.flag=true; $scope.flag=false; }]) </script>11、事件 ng-事件名='函数名（）' ng-click='' ng-mouseenter=''....
绑定事件 作用：给元素绑定指定的事件 语法：<E ng-事件类型='函数调用()'></E> 说明：1.事件类型就是js中的事件类型 2.事件可以指定函数调用，也可以写表达式 3.事件对象是$event 4.函数调用时可以传递实参
<button ng-click='demo()'>点我试试</button> <button ng-mouseenter='enter()'>鼠标移入</button> <script> var app=angular.module('app',[]); //控制器 app.controller('mainctrl',['$scope',function($scope){ //事件 --方法 $scope.demo=function(){ console.log('出来了'); }; $scope.enter=function(){ console.log('鼠标出来了'); } }]) </script>12.定义控制器(作用域) 作用：把页面分割成不同的作用域 语法：模型.controller('名称',function($scope){
}) 说明：1.controller是模型上的一个方法 2.参数1，是控制器名称，名称不能重复 3.参数2，有两种写法 第一种：直接写一个函数 第二种：以数组形式写，数组中最后一项是函数，函数前面的数组项是需要依赖注入的服务。 还有一个功能是防止代码压缩时把依赖注入的服务名称改变了，在真实项目开发时使用第二种数组形式的写法。模型.controller('名称',['$scope',function($s){}]) 4.$scope,在当前作用域下注入局部的作用域对象，在当前作用域下所有angular管理的变量、方法都必须定义在$scope上
<!-- 第一个控制器 --> <div ng-controller='div1'> <h2>{{share}}</h2> {{div1}} </div> <hr> <!-- 第二个控制器 --> <div ng-controller='div2'> {{div2}} <h2>{{share}}</h2> </div><script> //模型： var app=angular.module('app',[]); //$scope 作用域范围：当前的控制器里面 局部范围 //$rootScope 根控制器 作用域范围是全局的 //第一个控制器 app.controller('div1',['$scope','$rootScope',function($scope,$rootScope){ $scope.div1='我是第一个控制器盒子'; //公共的属性 方法 $rootScope.share='公共的数据 都可以调用'; }]) //第二个控制器 app.controller('div2',['$scope',function($scope){ $scope.div2='我是第二个控制器盒子'; }]) </script>
13. ng-class='' 添加样式（ul隔行换色）
<ul> <li ng-repeat='item in arr' ng-class='{pink:$index%2==0}'> {{item}} {{$index}} <!-- <button ng-show='$index%2==0'>删除</button> --> <button ng-click='del($index)'>删除</button> </li> </ul> var app=angular.module('app',[]); app.controller('main',['$scope',function($scope){ // $scope.flag=false; //案例 $scope.arr=['吃吃','喝喝','睡睡','玩玩','豆豆']; //删除 $scope.del=function(a){//a形参 //this // console.log(a); this.arr.splice(a,1); } }])
