基于AngularJS的简单使用详解


Posted in Javascript onSeptember 10, 2017

Angular Js 的初步认识和使用

一:

1.模块化

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

指定模型 ng-model=""

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

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

var myapp1 =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为索引

<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>

6.AngularJS中的路由的使用

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

2.定义angular模块

3.初始化模块

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

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

6.初始化模块:

var myapp1=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的简单使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
JS获取字符对应的ASCII码实例
Sep 10 #Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 #Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 #Javascript
浅谈Express异步进化史
Sep 09 #Javascript
vue组件学习教程
Sep 09 #Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
You might like
非常实用的PHP常用函数汇总
2014/12/17 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python 测试实现方法
2008/12/24 Python
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python基础教程之缩进介绍
2014/08/29 Python
Django与JS交互的示例代码
2017/08/23 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
军训鉴定表自我鉴定
2014/02/13 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
优秀党员先进材料
2014/12/18 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript