入门小 Demo-1
{{100+100}}
执行结果如下: 表达式的写法是
{{表达式 }}
表达式可以是变量或是运算式
ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的
ng-app 指令 定义了 AngularJS 应用程序的根元素。
ng-app 指令 在网页加载完毕时会自动引导(自动初始化)应用程序。
2.双向绑定
入门小 Demo-1 双向绑定
请输入你的姓名:
{{myname}},你好
运行效果如下: ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。
入门小 Demo-3 初始化
//定义函数
function helloController($scope) {
$scope.greeting = {
text : "hello"
};
}
{{greeting.text}},angular!
ng-controller 用于指定所使用的控制器
理解 $scope
: $scope
的使用贯穿整个 AngularJS App
应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope
就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope
,同样的$scope
发生改变时也会立刻重新渲染视图.
Angular 遵循软件工程的 MVC 模式,并鼓励展现,数据,和逻辑组件之间的松耦合,提高代码的复用性.angularJS 为后端减轻了很多业务压力,带来了更轻的 web 应用.
那么在 AngularJS 的应用中,怎么提现 mvc 设计模式的呢?下面来看以下代码展示 AngularJS 的 应用.
Insert title here
//定义函数
function helloController($scope) {
$scope.greeting = {
text : "hello" //模型层
};
}
//控制层
{{greeting.text}},angular!
//视图层
5.模块化设计
js 编程通常把 js 都放在全局环境中,那么这些变量函数,或者是对象都会产生在 window 对象下,会污染全局空间.为了更好管理 js,我们使用模块化的开发方式.
Insert title here
//定义一个叫oneModule名称的模块
var myModule = angular.module('oneModule',[]);
//使用模块调用方法
myModule.controller('helloController',function($scope){
$scope.greeting = function(){
return "hello,angular!";
}
})
{{greeting()}},angular!
6. 初始化指令
我们如果希望有些变量具有初始值,可以使用ng-init
指令来对变量初始化。
入门小 Demo-3 初始化
请输入你的姓名:
{{myname}},你好
7.事件指令
入门小 Demo-5 事件指令
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z= parseInt($scope.x)+parseInt($scope.y);
}
});
x:
y:
运算
结果:{{z}}
运行结果: ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法。
入门小 Demo-6 循环数据
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [100,192,203,434 ];//定义数组
});
{{x}}
这里的 ng-repeat
指令用于循环数组变量。
运行结果如下:
入门小 Demo-7 循环对象数组
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [
{name:'张三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
];//定义数组
});
姓名
数学
语文
{{entity.name}}
{{entity.shuxue}}
{{entity.yuwen}}
运行结果如下:
我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http
来实现。注意:以下代码需要在 tomcat 中运行。
入门小 Demo-8 内置服务
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope,$http){
$scope.findAll=function(){
$http.get('data.json').success(
function(response){
$scope.list=response;
}
);
}
});
姓名
数学
语文
{{entity.name}}
{{entity.shuxue}}
{{entity.yuwen}}
建立文件 data.json:
[
{"name":"张三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":67,"yuwen":86}
]