angular入门--绑定字符串
要使用angularjs,首先得下载并且在页面中调用它
先上源码
<html ng-app="app1">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>angularJs Test</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller='ctrl1' >
<span ng-bind='name'>aaaaaaaaaaaa</span>
<script>
var app=angular.module('app1',[]);
app.controller('ctrl1',['$scope',function($scope){
$scope.name="China";
}])
</script>
</body>
</html>
几个说明
1.ng-app代表这是一个angularJs app
2.ng-controller代表这是一个控制器,简单来讲它定义了作用域;
3.如何绑定字符串
<span ng-bind='name'>aaaaaaaaaaaa</span>
<span ng-bind-template='this is :{{name}}'>aaaaaaaaaaaa</span>
第一种方式直接绑定了scope的一个变量
第二种方式可以在绑定scope name的情况下,可以在前面加上this is:
但是无论哪种方式,都会冲掉span里面有的aaaaaaaaaaaaa内容
效果如下
第一种解析结果
第二种解析结果
其实还有第三种方式,不过这种方式当angular没有加载完时,会直接显示在页面上,简单讲页面会显示没有解析的结果,代码和效果也上吧
<span >aaaaaaaa:{{name}}</span>
angular入门--绑定字符串的更多相关文章
- angular入门
angular入门 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- Angular入门笔记
AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...
- OO的奇妙冒险——OOP入门与字符串处理
OO的奇妙冒险 ~OOP入门与字符串处理~ 总体分析 公测 中测(基础与进阶): 其实在我看来,从完成作业的角度来说,中测的基础与进阶并没有任何区别,都不能挂,都不太难,都对得分没有什么影响.中测的样 ...
- angular入门一之环境安装及项目创建
angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...
- python3入门之字符串
获得更多资料欢迎进入我的网站或者 csdn或者博客园 经过前面的介绍相信大家也对python有了一个初步的了解:本节主要介绍字符串,不管学习什么编语言字符串一定在其中扮演着重要的地位.本节主要讲解,字 ...
- Vue && Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除 还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
- Angular入门篇高速开发导航网
简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程 ...
- Nodejs之MEAN栈开发(五)---- Angular入门与页面改造
这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...
- Angular 入门学习
1.Hello World 入门 源代码 <!doctype html> <html ng-app> <head> <script src="htt ...
随机推荐
- Linux 权限管理-ACL权限
ACL权限是为了在现有的所有者.所属组.其他人不够使用的情况下使用的,使用它必须保证文件所在的分区支持ACL df -h:查看系统所有分区信息 dumpe2fs -h /dev/vda1,可以查看分区 ...
- Jmeter用beanshell将相应中的参数写入到本地文件中
实现效果: 将每次请求的指定参数写入到本地csv文件中. 实际场景:将登录请求中,服务器返回的token值获取并写入到本地csv文件中,供其他接口调用.这样在压测单接口时,不需要再进行登录,避免压测单 ...
- Linux创建与删除
一.创建文件夹.文本.用户.组 mkdir 创建文件夹 touch 创建文本 useradd 创建用户 例1:创建一个文件夹xiaomi 创建文件夹:mkdir xiaomi 例2:创建一个文件如ad ...
- Python脚本批量修改服务器密码
搭建环境 centos 7.4 使用脚本 python 批量修改connect用户的密码 生成密码为随机密码 保存为xls文档 passwd_chang #!/usr/bin/env python ...
- docker安装nacos
nacos 最近尝试着将项目由springcloud + netflix重构为springcloud alibaba,需要安装一些组件,感觉安装太麻烦,版便尝试着使用docker来部署,发现挺方便,记 ...
- VMware15 镜像Centos7修改静态IP
VMware15 镜像Centos7修改静态IP * 我的网卡名称为ens33: * 配置IP在 /etc/sysconfig/network-scripts/ifcfg-ens33 目录下: * D ...
- Python 中class的小例子
class Song(): def __init__(self,lyrics): self.lyrics=lyrics def sing_a_song(self): for line in self. ...
- Ubuntu安装qwt步骤
1.svn获取代码 svn checkout https://svn.code.sf.net/p/qwt/code/trunk/qwt 2.生产makefile qmake 3.编译(确保已经安装了q ...
- RabbitMQ系列之【设置RabbitMQ远程ip登录】
由于账号guest具有所有的操作权限,并且又是默认账号,出于安全因素的考虑,guest用户只能通过localhost登陆使用,并建议修改guest用户的密码以及新建其他账号管理使用rabbitmq. ...
- windows环境下tensorflow安装过程详解
写在最前: 在安装过程中遇到很多坑,一开始自己从官网下载了Python3.6.3或者Python3.6.5或者Python3.7.1等多个版本,然后直接pip install tensorflow或者 ...