初识 angular js
创建第一个 angularjs 项目
<html ng-app> : 表名这个是angularjs 项目
双大括号标记 {{ }} 的内容是问候语中绑定的表达式
Angular 模型变量
Angular 的循环
Angular 控制器
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<!DOCTYPE HTML>
<html><head></head>
<script type="text/javascript" src="./angular.min.js"></script>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
name : <input type="text" ng-model="name"><br>
age : <input type="text" ng-model="age"><br>
message: {{name + "==>" + age}}
</div>
<script type="text/javascript">
var app = angular.module('myapp' , []);
app.controller('myCtrl' , function($scope){
$scope.name = 'zeopean';
$scope.age = 23;
});
</script>
</body></html>
Angular 数据类型
<!-- 运行时只能有一个 ng-app -->
<!-- 整数 -->
<div ng-app="" ng-init="num1=1;num2=3">
<p>nums is:<span ng-bind="num1*num2"></span></p>
<p>sum is:<span>{{ num1 + num2 }}</span></p>
</div>
<!-- 字符串 -->
<div ng-app="" ng-init="str1='hell';str2='world'">
this is String : {{str1 + '---' + str2}}
</div>
<!-- angular 对象 -->
<div ng-app="" ng-init="person={name:'zeopean' , age:22}">
<p>msg is: {{person.name + ' - ' + person.age}}</p>
</div>
<!-- angular 数组 -->
<div ng-app="" ng-init="points=[1,23,4,5,34,53,65,54]" >
array item's value is: <span> {{points[2]}} </span>
</div>
转载于:https://www.cnblogs.com/zeopean/p/5341943.html
初识 angular js相关推荐
- 初识angular.js之爱恨情仇
angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小, ...
- [Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法
最近在学习入门Angular JS,学习资源是https://angular.cn/tutorial, 在学习到 "https://angular.cn/tutorial/toh-pt6模拟 ...
- angular.js 嵌套路由
介绍 AngularJS 嵌套路由:,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可 ...
- 如何使用多个参数调用Angular.js过滤器?
本文翻译自:How do I call an Angular.js filter with multiple arguments? As from the documentation , we can ...
- 如何在Angular.js选择框中使用默认选项
本文翻译自:How to have a default option in Angular.js select box I have searched Google and can't find an ...
- angular.js phonecat翻译
AngularJS 手机目录应用教程 概述 这个应用将带领开发者贯穿使用angularjs来开发一个web-app程序.这个应用程序是基于 Google Phone Gallery 但它现在已经不存在 ...
- Angular js 具体应用(一)
1,首先引用Angular 百度静态资源库搜索Angular 复制链接,在HTML中嵌入script 最好写在正文下面 <script type="text/javascript& ...
- angular js一factory,service,provider创建服务
服务:在AngularJS 中,服务是一个函数或对象 在写控制器的时候,不要复用controller,当我们的controller里面有相同的代码时,此时需要把它抽取成一个服务,所有的服务都符合依赖注 ...
- Angular JS 中的内置方法之表单验证
angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用 转载于:https://www.cnblogs.com/Pikzas/p/9005861.ht ...
最新文章
- python 日志封装
- speech_to_text_demo powered by IBM!
- linux io测试陈旭,陈旭方案论证及器件选择.doc
- leetcode 328. 奇偶链表(双指针)
- CVPR 2021 | 跨模态点云补全新框架ViPC:用单一视图推断完整信息
- ntp时间同步服务器配置
- 为何 5G、物联网和区块链,可以成为科技铁三角?
- Exchange 2016 之移动设备邮箱策略
- java负零_java数据结构从零基础到负基础
- 力扣-191 位1的个数
- 红外遥控模块的使用方法,以及stm32代码
- 网络中使用最多的图片格式有哪些
- 强化学习——格子游戏问题
- python lol脚本_Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
- linux安装阵列卡驱动程序,Linux系统下如何安装阵列卡驱动?
- android 添加子view,如何在Android中向ImageView添加子视图
- gitHub不能用密码推送了,必须要使用令牌
- 河南科技学院教务管理系统服务器,河南科技学院教务管理系统http://jwgl.hist.edu.cn/jwweb/...
- 李宏毅HW01——新冠疫情数据的预测
- 阿里云python课程_阿里云大学编程语言免费精华课程集锦