基于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 相关文章推荐
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
JavaScript canvas绘制折线图
Feb 18 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PDO实现学生管理系统
2020/03/21 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
python删除特定文件的方法
2015/07/30 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
什么样的创业计划书可行性高?
2014/02/01 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
企业出纳岗位职责
2014/03/12 职场文书
社区党建工作总结2015
2015/05/13 职场文书
中小企业员工手册范本
2015/05/14 职场文书
杨善洲观后感
2015/06/04 职场文书
签证工作证明模板
2015/06/15 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
MongoDB支持的索引类型
2022/04/11 MongoDB