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