基于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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
JS实现快递单打印功能【推荐】
Jun 21 Javascript
JS实现烟花爆炸效果
Mar 10 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中redis的用法深入解析
2014/02/20 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python class的继承方法代码实例
2020/02/14 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
材料专业毕业生求职信
2014/02/26 职场文书
小学生环保演讲稿
2014/04/25 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
计划生育证明书写要求
2014/09/17 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers