基于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的eval()中使用函数的进一步讨论
Jul 26 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
清除输入框内的空格
Dec 21 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
小程序自定义弹框效果
Nov 16 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判断文件夹是否存在不存在则创建
2015/04/09 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
JS继承 笔记
2011/07/13 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python机器学习实现决策树
2019/11/11 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python如何生成xml文件
2020/06/04 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
灰雀教学反思
2014/04/28 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
开票证明
2015/06/23 职场文书
英文投诉信格式
2015/07/03 职场文书
感恩教育主题班会
2015/08/12 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技