AngularJS---指令

AngularJS:js框架,实现单页面的增删改查.他是一个以JavaScript编写的库。
建议把脚本放到<body>元素的底部,这样会提高网页加载速度,因为HTML加载不受制于脚本加载。
 
-------------------------------------------------------------------------------------------
 
 
 
首先:记得定义控制器
 <script>
        var app= angular.module('angularJSApp',[]);
        app.controller('myCtrl',function(){

        })
 </script>
 
在一个页面里定义多个控制器,直接追加

    angular.module('angularJSApp',[])
    .controller('watchCtrl1',function(){
        //定义多个控制器,直接追加
    })
     .controller('watchCtrl2',function(){

    })
-------------------------------------------------------------------------------------------------------------------步骤:  
 1,ng-app:指令定义一个AngularJS应用程序                
 一个页面只能有一个ng-app的指令,写多个只能第一个被使用  

<body class="container" ng-app="angularJSApp"> 
注意:AngularJSApp是可选值

  
2,ng-init: 初始化                
在应用程序运行前执行.和控制器中定义的变量是独立的   
             
 字符串、数值、对象、数组  
              
 ng-init=“name='admin'"                 
 ng-init=“score='[12,13,22]'" 数组                 
 ng-init=“student{score='[12,13,22]}'" 对象         对象名.属性名/方法名                
 ng-init=“score=30"  
 
建议使用function初始化数据
function initVar($scope){
   //model:初始化数据,$scope
   //controller
}
  
3,ng-bind:绑定   数据初始化好以后,就可以绑定使用                    
指令把应用程序数据绑定到 HTML 视图
       <span ng-bind="info.title"></span>         

绑定也可以用表达式         
写法: {{expression}}        
 作用:把数据绑定到 HTML,输出数据    与 ng-bind 指令有异曲同工之妙   
title by expr:{{info.title}} 
title:<span ng-bind="info.title"></span>
可以包含文字、运算符和变量

4,ng-modal: 实现双向绑定          
实现双向绑定,单纯的js也能实现,动态监听输入框的值是否变化                   
 指令把元素值(比如输入域的值)绑定到应用程序  
  
5,ng-repeat:  遍历所有的集合,生成html                 
定义集合中每项数据的模板    

6,ng-controller:  定义应用的控制器对象                   
 定义控制器

---------------------------------------------------------------------------------	
 PS: MVC:  		 
 model:  	 	 
 view:   		  
controller:

------------------------------------------------------------------------------------

控制器:

	控制AngularJS应用程序的数据。即上边定义好的 单页面应用 ng-app=""
   常规的JavaScript对象
注:在angular-1.2.5.js中可以直接写成函数
demo:
	var app=angular。module(‘angularJSApp’,[]);
        app.controller('myCtrl',function($scope){
	$scope.name='angular';
	$scope.info={title:'angularJS',price:130;
	});
ng-controller=“myCtrl”定义了一个控制器,即“myCtrl”实际上是一个函数,
 
 

                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值