基于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 validation插件表单验证的一个例子
Mar 03 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
vue子路由跳转实现tab选项卡
Jul 24 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
3.从实例开始
2006/10/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
js数组的操作指南
2014/12/28 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue实例的选项总结
2020/06/09 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python 从远程服务器下载东西的代码
2013/02/10 Python
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
转党组织关系介绍信
2014/01/08 职场文书
学术诚信承诺书
2014/05/26 职场文书
运动会广播稿50字
2015/08/19 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python