微客导航 » 文章资讯 » 基于AngularJS的简单使用详解

基于AngularJS的简单使用详解

2023-09-25 00:09:05 148

AngularJs的初步认识和使用

一：

1.模块化

定义模块和控制器ng-app="myapp"controller="myctrl"

指定模型ng-model=""

获取的属性值:ng-bind="属性名"或者{{属性名}}

2.初始化模块(在Script中进行)

varmyapp1=angular.module("myapp",[]);

3.定义模块的控制器,并依赖注入,
$scope:可以操作模块作用域内的所有视图

myapp1.controller("myctrl",["$scope",function($scope){
$scope."属性名"
//也可以对$scope操作的视图进行赋值
$scope."属性名"="值";
}])

4.绑定事件

//其他事件联想基本为:ng-动作
ng-click="clear()"

在定义的模块控制器中进行事件函数的后续操作:
$scope.clearSop=function(){
$scope.name="";
}

5.集合数据的遍历

数据格式范例:对象数组一般的数据类型(进行页面数据交互时因注意json的数据格式)

$scope.products=[
{
id:1001,
name:'数码相机',
price:3000
},{
id:1002,
name:'苹果手机',
price:7000
}
];

遍历样式:product相当于元素,products相当于集合,index为索引


{{$index+1}}
{{product.id}}
{{product.name}}
{{product.price}}

6.AngularJS中的路由的使用

1.需要单独导入:angular-route.js文件

2.定义angular模块

3.初始化模块

4.路由中的路径格式采用:"#/+url"

5.使用ng-view的模块用来展示路由加载后的变化内容

6.初始化模块:

varmyapp1=angular.module("myapp",["noRoute"]);

7.配置模块的路由

myapp.config(["$routeProvider",function($routeProvider){
$routeProvider
.when('/JavaEE',{
templateUrl:'5_1.html'
})
.when('/IOS',{
templateUrl:'5_2.html'
})
.when('/Android',{
templateUrl:'5_3.html'
})
.otherwise({
redirectTo:'/JavaEE'
});
}]);

以上这篇基于AngularJS的简单使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于AngularJS的简单使用详解

热门推荐

随机推荐