Angular 指令初始

1.ng-app 边界指令：规定了使用angular使用范围；在这个ng-app的范围里面 可以使用angular语法
   ng-app 不赋值
   ng-app='myApp'（ang创建模块的时候限制边界，使用）
  创建angular模块 ng-app='名称' 一般都要名字

//赋值
//不赋值

2.{{}} 表达式 变量  函数()  简单的运算
   AngularJS 表达式写在双大括号内：{{ expression }}
  作用：显示数据  把数据显示到视图上面

{{1+2}}

3.ng-model:内置指令：用在input 双向数据绑定，可以获取input里面输入的内容  textarea
   ng-model='msg'  把用户输入的信息数据 存储在msg变量上；

4.ng-init:初始化数据  
   说明：ng-init='msg="hello world"'

{{mm}}

 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；

 
{{item}}{{$index}}

 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元素 是否存在   

  showhideif

11、事件
       ng-事件名='函数名（）'
       ng-click='' ng-mouseenter=''....

       绑定事件
                作用：给元素绑定指定的事件
                语法：
                说明：1.事件类型就是js中的事件类型
                    2.事件可以指定函数调用，也可以写表达式
                    3.事件对象是$event
                    4.函数调用时可以传递实参 

 点我试试鼠标移入

12.定义控制器(作用域)
            作用：把页面分割成不同的作用域
            语法：模型.controller('名称',function($scope){

             })
            说明：1.controller是模型上的一个方法
                       2.参数1，是控制器名称，名称不能重复
                       3.参数2，有两种写法
                       第一种：直接写一个函数
                       第二种：以数组形式写，数组中最后一项是函数，函数前面的数组项是需要依赖注入的服务。
                            还有一个功能是防止代码压缩时把依赖注入的服务名称改变了，在真实项目开发时使用第二种数组形式的写法。模型.controller('名称',['$scope',function($s){}])
                      4.$scope,在当前作用域下注入局部的作用域对象，在当前作用域下所有angular管理的变量、方法都必须定义在$scope上

    
{{share}}
{{div1}} 
{{div2}}
{{share}}

13. ng-class=''
            添加样式（ul隔行换色）

        
{{item}} {{$index}}删除

  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);}}])    

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！