AngularJS---指令

AngularJS:js框架,实现单页面的增删改查.他是一个以JavaScript编写的库。

建议把脚本放到元素的底部,这样会提高网页加载速度,因为HTML加载不受制于脚本加载。

首先:记得定义控制器


在一个页面里定

在一个页面里定义多个控制器,直接追加

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

    })

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

  
注意: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 视图

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

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”实际上是一个函数.

你可能感兴趣的:(AngularJS---指令)